一、 結構與表現相分離的思想
1.1、微博用戶發言信息列表製作
代碼示例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微軟雅黑", "宋體", "Tahoma"}
/*公共樣式*/
body{ padding-top:50px; line-height:20px}
.userPic{padding:5px; border:1px #ccc solid}
.demo01, .demo02{ margin-bottom:20px}
p{ text-indent:2em}
/*初級*/
.demo01{width:600px; overflow:hidden}
.demo01 .left{ width:100px; float:left}
.demo01 .left .userPic{margin-left:20px}
.demo01 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}
.demo01 .right h6{ margin-bottom:5px}
.demo01 .right .pubTime{ float:right;color:#999; margin-top:-8px}
/*中級*/
.demo02{width:600px; overflow:hidden}
.demo02 .userPic{float:left; margin-left:20px}
.demo02 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}
.demo02 .right h6{ margin-bottom:5px}
.demo02 .right .pubTime{ float:right;color:#999; margin-top:-8px}
/*高級*/
.demo03{width: 460px;padding:20px;position: relative;background-color: #EEF7FF;border: 1px solid #CCC; margin-left:100px}
.demo03 h6{ margin-bottom:5px}
.demo03 .dialog p{text-indent: 2em; line-height:20px}
.demo03 .userPic{ float:left; margin:-20px 0 0 -100px}
.demo03 .pubTime{position:absolute; top:10px; right:20px; color:#999;}
</style>
</head>
<body>
<!---demo01----------------------------------->
<div class="demo01">
<div class="left">
<img class="userPic" src="images/head01.jpg" width="50" height="50" />
</div>
<div class="right">
<span class="pubTime">10分鐘前</span>
<h6>火影忍者</h6>
<p>火影忍者是由教育部高等教育司2001年12月批准立項試點，2005年4月正式批准運營的遠程教育公共服務體系，爲遍佈全國的學員提供學歷(專升本，高起專)和非學歷教育諮詢、報名、學習輔導、課程考試、交費等7X24小時學習支持服務400-810-6736。</p>
</div>
</div>
<!---demo02----------------------------------->
<div class="demo02">
<img class="userPic" src="images/head01.jpg" width="50" height="50" />
<div class="right">
<span class="pubTime">10分鐘前</span>
<h6>火影忍者</h6>
<p>火影忍者是由教育部高等教育司2001年12月批准立項試點，2005年4月正式批准運營的遠程教育公共服務體系，爲遍佈全國的學員提供學歷(專升本，高起專)和非學歷教育諮詢、報名、學習輔導、課程考試、交費等7X24小時學習支持服務400-810-6736。</p>
</div>
</div>
<!---demo03----------------------------------->
<div class="demo03">
<img class="userPic" src="images/head02.jpg" width="50" height="50" />
<h5>櫻桃小丸子</h5>
<p>火影忍者是由教育部高等教育司2001年12月批准立項試點，2005年4月正式批准運營的遠程教育公共服務體系，爲遍佈全國的學員提供學歷(專升本，高起專)和非學歷教育諮詢、報名、學習輔導、課程考試、交費等7X24小時學習支持服務400-810-6736。</p>
<span class="pubTime">10分鐘前</span>
</div>
</body>
</html>
運行結果：
此篇博客代碼下載地址：Layout教程2代碼下載
博主的所有博客目錄如下：博客文章目錄彙總
Java面試部分的博客目錄如下：Java筆試面試目錄
轉載請標明出處，原文地址：https://blog.csdn.net/weixin_41835916 如果覺得本文對您有幫助，請點擊頂支持一下，您的支持是我寫作最大的動力，謝謝。
