内容基于html标签结构。
h5标签：
诗标题用h1，分割线hr，文字p，斜体i，下划线u，删除线del。
特殊符号：
版权标识 ©。
排版用css实现（行内样式很麻烦而且难改，不建议）。
css属性：文字位置（中左右）text-align，宽度width（用了占屏幕百分比），高度height（用了具体像素px值），颜色color，背景background（直接给分割线设置了背景灰色免得变矩形）。
css选择器：前面没有符号的是标签，有.是class，有#是id。
进一步内容可以查询有关概念或改动编码看其变化。
<!DOCTYPE html>
<html>
<head>
<title>山居秋暝</title>
<style type="text/css">
h1 {text-align:centercolor:red}
hr {width:50%height:3pxtext-align:centerbackground:grey}
footer {text-align:center}
.bluepoem {color:blue}
#author {text-align:right}
</style>
</head>
<body>
<header>
<h1>山居秋暝</h1>
<hr />
<p id="author"><i>唐 王维</i></p>
</header>
<div>
<p class="bluepoem">空山新雨后，天气晚来秋。</p>
<br />
<p><u>明月松间照，清泉石上流。</u></p>
<br />
<p class="bluepoem">竹喧归浣女，莲动下渔舟。</p>
<br />
<p><del>随意春芳歇，王孙自可留。</del></p>
</div>
<footer>
©版权所有 <网页设计与制作>
</footer>
</body>
</html>
你好！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>.code-box{position:relativedisplay:inline-blockwidth:90%margin:0 0 16pxborder:0px solid #f0f0f0border-bottom:1px solid #a7a8abborder-radius:2px-webkit-transition:all 0.2stransition:all 0.2smargin-top:30pxmargin-bottom:4px}.code-box,.code-box .code-box-demo{background-color:#fff}.code-box-demo{display:nonepadding:2px 24px 1pxcolor:rgba(0,0,0,0.85)border-bottom:1px solid #f0f0f0}.code-box-meta.markdown{position:relativewidth:100%font-size:14pxborder-radius:0 0 2px 2px-webkit-transition:background-color 0.4stransition:background-color 0.4s}.markdown{color:rgba(0,0,0,0.85)font-size:14pxline-height:2}.code-box-title{font-family:'宋体'font-weight:boldposition:absolutetop:-26pxfont-size:22pxfont-style:italicmargin-left:0pxpadding:1px 8pxpadding-left:5pxpadding-right:10pxcolor:#777background:#fffborder-radius:2px 2px 0 0-webkit-transition:background-color 0.4stransition:background-color 0.4s}.code-box-title a{text-decoration:none}.code-box-description{border:0 noneborder-top:2px solid #a7a8abpadding:10px 5px 6pxwidth:600px}.code-box-description div{font-family:'宋体'font-size:22pxfont-weight:bold}.code-box-description div._title{text-align:centertext-decoration:underline}.code-box-description div._content:last-child{margin-left:100pxmargin-top:-10pxmargin-bottom:-10px}.code-box-description div._content span{font-size:26pxcolor:red}ul.note{margin-left:8pxpadding-left:0pxmargin:2px 8px}ul.note li{list-style:nonefont-family:'宋体'font-size:22pxcolor:black}ul.note li:before{content:""display:inline-blockwidth:15pxheight:15pxbackground-color:blackborder-radius:50%margin-right:5px}</style>
</head>
<body>
<section class="code-box" id="components-empty-demo-basic" data-scrollama-index="2">
<section class="code-box-meta markdown">
<div class="code-box-title"><a href="#components-empty-demo-basic">诗词赏析</a></div>
<div class="code-box-description">
<div class="_title">春望</div>
<div class="_content">国破山河在，城春草木深。</div>
<div class="_content _last">感时花溅泪，<span>恨别鸟惊心。</span></div>
</div>
</section>
</section>
<ul class="note">
<li>烽火连三月，家书抵“万金”。</li>
<li>白头搔更短，浑欲不胜簪。</li>
</ul>
</body>
</html>
希望对你有帮助！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）