一、 结构与表现相分离的思想
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 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。