内容基于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>
这个可以通过一个简单的js时间来实现，首先创建input按钮，添加onclick=tihuan(this)事件：
//替换方法将当前文件替换成其他文字。
function tihuan(obj){
obj.replace(obj,其他字符)
}
<!DOCTYPE HTML><html>
<head>
<title>念奴娇</title>
<meta charset=UTF-8 />
<style type="text/css">
* {
margin: 0
padding: 0
border: 0
}
ul.content {
width: 1000px
height: 600px
margin: auto
overflow: hidden
list-style: none
background: url(bg1.jpg) no-repeat
}
ul.content li {
float: right
margin-left: 7px
margin-right: 24px
line-height: 30px
width: 14px
font-size: 14px
word-wrap: break-word
word-break: nomal
font: bolder 25px/1.5 方正行楷简体
}
</style>
</head>
<body>
<ul class="content">
<li>大江东去</li>
<li>浪淘尽</li>
<li>千古风流人物</li>
<li>故垒西边</li>
<li>人道是</li>
<li>三国周郎赤壁</li>
<li>乱石穿空</li>
<li>惊涛拍岸</li>
<li>卷起千堆雪</li>
<li>江山如画</li>
<li>一时多少豪杰</li>
<li>遥想公瑾当年</li>
<li>小乔初嫁了</li>
<li>雄姿英发</li>
<li>羽扇纶巾</li>
<li>谈笑间</li>
<li>樯橹灰飞烟灭</li>
<li>故国神游</li>
<li>多情应笑我</li>
<li>早生华发</li>
<li>人生如梦</li>
<li>一尊还酹江月 苏轼</li>
</ul>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）