CSS阶段案例 制作服装推广软文

一个简单的案例,服装推广软文,主要就是设置不同的字体,不同的颜色。字体可到网上下载,其它的字体都可以,主要是简单回顾一下css样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><a href="https://www.mubanjun.cn/tag/%e6%9c%8d%e8%a3%85%e8%bd%af%e6%96%87%e6%8e%a8%e5%b9%bf" title="更多关于 服装软文推广 的文章" target="_blank">服装软文推广</a>案列</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<p class="one"><strong class="a">NO.1</strong><strong class="b">BUTTERFLY</strong></p>
<p class="two"><strong class="a">in April</strong> <strong class="b">27th.2020</strong></p>
<h2><strong class="a">2020</strong><strong class="b">夏装全面上新</strong></h2>
<p class="three">全场两件<strong>包邮</strong></p>
<p class="font">所有邂逅相遇,所有萍水相逢,都在缘分的天空下慢慢演绎。一款柔情含蓄的衣饰或是一裘与众不同的衣衫,都会成为你不同凡响的法宝。在火热激情的青春里,在热烈奔放的夏之海洋里,你会选择什么样的精彩?</p>
</body>
</html>
@charset "utf-8"
/*CSS Document*/
	*{margin: 0;padding: 0;}
	@font-face{font-family: ONYX;src:url(font/onyx.ttf);}
	@font-face{font-family: BOOM;src:url(font/BOOMERAN.TTF);}
	@font-face{font-family: jianzhi;src:url(font/JIANTI.TTF);}
	.one .a{font-family: ONYX;font-size: 46px;color: #333;}
	.one .b{font-family: Microsoft YaHei;font-size: 58px;color: #0c8611;}
	.two .a{font-family: "微软雅黑";font-size: 28px;font-weight: bold;font-style: oblique;color: #333;}
	.two .b{font-family:Impact;font-size: 36px;font-weight: bold;color: #333;}
	h2 .a{font-family: Microsoft YaHei, "微软雅黑";font-size: 60px;}
	h2 .b{font-family:LTCH;font-size: 50px;color: #e1005a;}
	.three{font-family: "微软雅黑";font-size:36px;font-weight: 900;}
	.three strong{font-family: "微软雅黑";font-size: 36px;color: #e1005a;}
	.font{font-family: "微软雅黑";width: 800px;font-weight: 900;color: #b9a8a8;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

字体不是固定的,你可以随便到网上找几个好看的的字体,搭配出更好看的效果。

发表评论