随笔 - 54,  文章 - 0,  评论 - 0,  阅读 - 13074

制作页面结构

复制代码
<!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>
复制代码

运行效果如图所示:

 

posted on   心有所信方能行远  阅读(1124)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示