结构、表现和行为分离，不仅是一项技术，更主要的是一种思想，当我们拿到一个网页时，先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。，减少HTML与CSS耦合度。
案例一：微博对话框
<!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" /> <meta name="author" content="智能社 - zhinengshe.com" /> <meta name="copyright" content="智能社 - zhinengshe.com" /> <title>智能社 - www.zhinengshe.com</title> <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/head01.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>
案例二：网页换肤（相同HTML，不同CSS）