制作页面结构
<!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>
运行效果如图所示:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战