阶段案例——制作服装推广软文
制作页面结构
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>服务推广软文title>
head>
<body>
<p><strong>NO.3strong><strong>BUTTERFLYstrong>p>
<p><strong>in Auguststrong><strong>28th.2022strong>p>
<h2><strong>2022strong><strong>秋装全面上新strong>h2>
<p>全场两件<strong>包邮strong>p>
<p>所有邂逅相逢，所有萍聚水遇，都在缘分的天空下慢慢演绎。一款柔情含蓄的衣饰或是一袭与众不同的衣衫，
都会成为你不同凡响的必要法宝。在火热激情的青春里，在热烈奔放的夏之海洋里，你会选择什么样的精彩？p>
body>
html>
定义CSS样式
@charset "utf-8";
/*CSS Document*/
*{margin: 0; padding: 0;}
@font-face { font-family:ONYX; src: url(font/ONYX.TTF); }
@font-face { font-family:TCM; src: url(font/TCM__.TTF); }
@font-face { font-family:ROCK; src: url(font/ROCK.TTF); }
@font-face { font-family:BOOM; src: url(font/BOOMBOX.TTF); }
@font-face { font-family:LTCH; src: url(font/LTCH.TTF); }
@font-face { font-family:jianzi; src: url(font/FZNZNW.TTF); }
.one .a{font-family: ONYX; font-size: 48px; color: #333;}
.one .b{font-family: TCM; font-size: 58px; color: #4C9372;}
.two .a{font-family: ROCK; font-size: 24px; font-weight: bold; font-style: oblique; color: #333;}
.two .b{font-family: ROCK; font-size: 36px; font-weight: bold; color: #333;}
h2 .a{font-family: BOOM; font-size: 60px;}
h2 .b{font-family: LTCH; font-size: 50px; color: #E1005a;}
.three{font-family: "微软雅黑"; font-size: 36px;}
.three strong{color: #E1005a;}
.four{width: 500px; font-family: "微软雅黑"; font-size: 14px; color: #747474;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style03.css" type="text/css" />
<title>服务推广软文title>
head>
<body>
<p class="one"><strong class="a">NO.3strong><strong class="b">BUTTERFLYstrong>p>
<p class="two"><strong class="a">in Auguststrong><strong class="b">28th.2022strong>p>
<h2><strong class="a">2022strong><strong class="b">秋装全面上新strong>h2>
<p class="three">全场两件<strong>包邮strong>p>
<p class="four">所有邂逅相逢，所有萍聚水遇，都在缘分的天空下慢慢演绎。一款柔情含蓄的衣饰或是一袭与众不同的衣衫，
都会成为你不同凡响的必要法宝。在火热激情的青春里，在热烈奔放的夏之海洋里，你会选择什么样的精彩？p>
body>
html>
运行效果如图所示：
