在该笔记中，介绍的是网页制作中，如何从更深层次上理解结构(HTML)与表现(CSS)之间的关系。
结构(HTML)与表现(CSS)相分离的思想
当我们拿到一个网页的设计图的时候，首先观察网页的文字内容和内容模块之间的关系，将重点放在语义化的 HTML 代码上，而不要过多考虑设计图上的样式。当把 HTML 内容编写完成之后，再考虑样式如何实现(增加 div span 等操作)，力求在不改变现有结构的基础上，完成现有设计图的效果。
下面的例子是对该思想的具体阐述：
用户发言信息列表制作
下面的例子，显示的是使用三种方法来制作同一样内容以及样式的网页局部。
<html>
<head>
<title>初级阶段结构设置</title>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
.demo1{
width: 600px;
overflow: hidden;
}
.demo1 .left img{
margin-left: 20px;
width: 40px;
height: 40px;
}
.demo1 .left{
width: 100px;
float: left;
}
.demo1 .right{
width: 458px;
padding: 20px;
float: right;
background-color: #9CF;
border: 1px solid #CCC;
position: relative;
}
.demo1 .right p {
font-size: 12px;
line-height: 25px;
}
.demo1 .right span{
position: absolute;
right: 20px;
top: 10px;
font-size: 12px;
}
.demo1 .right h6 {
color: #666;
}
.demo2{
width: 600px;
overflow: hidden;
}
.demo2 img{
margin-left: 20px;
width: 40px;
height: 40px;
float: left;
}
.demo2 .right{
width: 458px;
padding: 20px;
float: right;
background-color: #9CF;
border: 1px solid #CCC;
position: relative;
}
.demo2 .right p {
font-size: 12px;
line-height: 25px;
}
.demo2 .right span{
position: absolute;
right: 20px;
top: 10px;
font-size: 12px;
}
.demo2 .right h6 {
color: #666;
}
.demo3{
width: 458px;
padding: 20px;
background-color: #9CF;
border: 1px solid #CCC;
margin-left: 100px;
position: relative;
}
.demo3 img{
width: 40px;
height: 40px;
float: left;
margin: -20px 0 0 -100px;
}
.demo3 h6 {
color: #666;
}
.demo3 span{
position: absolute;
right: 20px;
top: 10px;
font-size: 12px;
}
.demo3 p {
font-size: 12px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="demo1">
<div class="left">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/avatar.jpg">
</div><div class="right">
<h6>ShiningDan</h6>
<p>这是我的个人发言。这是我的个人发言。这是我的个人发言。这是我的个人发言。
这是我的个人发言。这是我的个人发言。这是我的个人发言。
这是我的个人发言。这是我的个人发言。这是我的个人发言。
</p>
<span>10分钟之前</span>
</div>
</div>
<br/>
<div class="demo2">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/avatar.jpg">
<div class="right">
<h6>ShiningDan</h6>
<p>这是我的个人发言。这是我的个人发言。这是我的个人发言。这是我的个人发言。
这是我的个人发言。这是我的个人发言。这是我的个人发言。
这是我的个人发言。这是我的个人发言。这是我的个人发言。
</p>
<span>10分钟之前</span>
</div>
</div>
<br/>
<div class="demo3">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/avatar.jpg">
<h6>ShiningDan</h6>
<p>这是我的个人发言。这是我的个人发言。这是我的个人发言。这是我的个人发言。
这是我的个人发言。这是我的个人发言。这是我的个人发言。
这是我的个人发言。这是我的个人发言。这是我的个人发言。
</p>
<span>10分钟之前</span>
</div>
</body>
</html>
显示效果如下：
下面是对三种不同方法的分析：
第一种方法(初级方法)：使用了多层 div，将每一部分都定义成一个 div，然后进行样式架构
第二种方法(中级方法)：相比第一种方法，少了一个 div，因为即使没有这个 div，也可以成功地把头像放在指定的位置。
第三种方法(高级方法)：只使用了一个div，然后通过 css 样式来对内容进行排版，同样达到了一样的效果，但是代码最简单！
这个例子告诉我们，先通过结构去考虑，在编写完结构以后，只通过样式来改变它的布局。而不是像第一种方法，在编写结构的过程中，已经用过 div 的配合考虑了布局在里面。所以我们在开始写 HTML 代码的时候，先把要呈现的内容展示出来，然后通过 CSS 进行布局，直到必须的时候再添加 div 辅助进行布局。