写一个如下的页面：
代码解析如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单页面</title>
<style type="text/css">
body,div,p,span,a,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,input{margin:0px; spadding:0px; list-style:none; }
body{color:#cccccc; font-size:12px; font-family:'宋体'; }
a{color:#0000ee; }
.main{height:200px; width:700px; border: 1px #cccccc solid; margin: 100px auto; padding:20px;}
.first{font-size:14px; }
.first span{font-size: 14px; font-weight: bold; color: #696969; }
.first textarea{width:670px; height:70px; margin-top:10px; padding:10px; border:1px solid #cccccc; resize:none; font-size:12px; color:#cccccc; margin-bottom: 30px;}
.second span{margin-top:10px; display:block;}
</style>
</head>
<body>
<div class="main">
<div class="first">
<span>评论</span>
<img src="110.jpg" width="75" height="15" alt=""/>
<a href="#">我要打分</a>
<div class="second">
<textarea>评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。</textarea>
<img src="tj.jpg" width="55" height="22" alt=""/>
<!---这里可以用p用的话 -->
<span>没有任何评论</span>
</div>
</div>
</div>
</body>
</html>
写一个文章列表：
注意：我们在写文章列表的时候呢我们的主盒子的高度度一般都是不设置的 他应该靠内容来撑起来 这样会增加代码的可扩展性；
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文章列表</title>
<style type="text/css">
body,p,ol,ul,li,dl,dt,dd,span,a,img,h1,h2,h3,h4,h5,h6,input{margin:0px; padding:0px; list-style:none; }
body{font-size:15px; font-family:"宋体"; color:#333333; background: #fafafa; }
a{color:#333333; text-decoration: none; }
a:hover{text-decoration: underline; }
.main{width:300px; margin:100px auto; border:1px #cacaca solid; padding:15px; }
.main h2{border-bottom: 1px #cacaca solid;}
.main span{font-size:14px; }
.main li{line-height: 30px; border-bottom: 1px #cacaca dashed; padding-left: 5px; }
</style>
</head>
<body>
<div class="main">
<h2>最新文章<span>/New Articles</span></h2>
<ul>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
<li><img src="../5.3文章列表/arr.jpg" width="10" height="9" alt=""/> <a href="#">体验javascript的魅力</a></li>
</ul>
</div>
</body>
</html>3. 编写一个品质生活的网页
代码示例：
/* 注意这个首行不缩进两个字符text-indent:2em;
注意这一句：background:url(dot.jpg) no-repeat 0 center;
后面的 0和center 表示 水平方向左对齐 垂直方向是居中*/
/*注意这个li 标签我们家padding-top 是不行的 因为背景图片居中的时候就不会跟着你的文字下去那么多 他会去中点
但是如果我们用margin-top 就不会发生这种情况*/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>品质生活案例</title>
<style type="text/css">
body,div,span,a,img,ul,ol,li,h1,h2,h3,h4,h5,h6,p,input{margin:0px; padding:0px; list-style: none; }
body{font-size:12px; font-family:"宋体"; color:#000; }
a{text-decoration: none; color:#000; }
a:hover{text-decoration: underline; color:#dd4073; }
.main{width:230px; height:240px; background: url(bg.jpg); margin:100px auto; padding: 60px 20px 0px 420px;}
.more{ text-align: right; margin-bottom: 45px;}
.more a{ color:#ffffff;}
.main h3{text-align: center; font-size: 16px;}
/* 注意这个首行不缩进两个字符text-indent:2em;
注意这一句：background:url(dot.jpg) no-repeat 0 center;
后面的 0和center 表示 水平方向左对齐 垂直方向是居中*/
.con{ margin-top:20px; text-indent:2em; }
.main ul{font-size:14px; }
/*注意这个li 标签我们家padding-top 是不行的 因为背景图片居中的时候就不会跟着你的文字下去那么多 他会去中点
但是如果我们用margin-top 就不会发生这种情况*/
.main ul li{background:url(dot.jpg) no-repeat 0 center; padding-left:10px; margin-top: 10px; }
</style>
</head>
<body>
<div class="main">
<p class="more">
<a href="#">更多..</a>
</p>
<h3>
<a href="#">奥斯卡影后在纽约签署的豪宅</a>
</h3>
<p class="con">
<a>奥斯卡影后娜塔莉—波特曼的这间公寓，整排的落地窗显得宽敞明亮，每件家具都有光滑的线条感…</a>
</p>
<ul>
<li><a href="#">流光溢彩 施华洛世奇系列珠宝</a></li>
<li><a href="#">流光溢彩 施华洛世奇系列珠宝</a></li>
<li><a href="#">流光溢彩 施华洛世奇系列珠宝</a></li>
</ul>
</div>
</body>
</html>