阶段性案例--服装生产的软性推广

最编程 2024-03-20 20:04:11

...

制作页面结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>服务推广软文</title>
    </head>
    <body>
        <p><strong>NO.3</strong><strong>BUTTERFLY</strong></p>
        <p><strong>in August</strong><strong>28th.2022</strong></p>
        <h2><strong>2022</strong><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.3</strong><strong class="b">BUTTERFLY</strong></p>
        <p class="two"><strong class="a">in August</strong><strong class="b">28th.2022</strong></p>
        <h2><strong class="a">2022</strong><strong class="b">秋装全面上新</strong></h2>
        <p class="three">全场两件<strong>包邮</strong></p>
        <p class="four">所有邂逅相逢，所有萍聚水遇，都在缘分的天空下慢慢演绎。一款柔情含蓄的衣饰或是一袭与众不同的衣衫，
        都会成为你不同凡响的必要法宝。在火热激情的青春里，在热烈奔放的夏之海洋里，你会选择什么样的精彩？</p>
    </body>
</html>

运行效果如图所示：

原文地址：https://www.cnblogs.com/liuyouqi/p/16132503.html

上一篇： Oracle PL / SQL 注释 - 单行注释

下一篇：使用 MimeMessageHelper - [ Spring 中文手册 ] - 在线本地手册 - php中文网