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

鳄鱼君Ba

发表文章数:514

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » CSS阶段案例 制作服装推广软文

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>服装软文推广案列</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;}

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

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《CSS阶段案例 制作服装推广软文》 发布于2020-04-27

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

6 + 1 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册