结构与表现相分离的思想
一般遵循原则: 先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。
例子：
用微博的发言列表
<!DOCTYPE html>
<html>
<head>
<title>发言列表</title>
<style type="text/css">
body,p,h1,h2,h3,h4,h5,h6,form,ul,ol,hr{
margin:0;
padding: 0;
font:14px/1.5,normal,"Arial","sans-serif","微软雅黑","宋体","Tahoma";
color:#666;
}
ul,ol{
list-style: none;
}
img{
width: 60px;
height: 70px;
}
.demo1 {
width: 600px;
position: relative;
overflow: hidden;
}
.demo1 .left{
width: 100px;
float: left;
}
.demo1 .left img{
margin-left: 20px;
width: 60px;
height: 70px;
}
.demo1 .right{
width: 458px;
padding: 20px;
float: right;
background: #9cF;
border:1px solid #ccc;
}
.demo1 .right p{
font-size: 12px;
line-height: 25px;
}
.demo1 span{
position: absolute;
right: 20px;
top: 10px;
font-size: 10px;
}
.demo2 {
width: 600px;
position: relative;
overflow: hidden;
}
.demo2 img{
float: left;
margin-left: 20px;
width: 60px;
height: 70px;
}
.demo2 .right{
width: 458px;
padding: 20px;
float: right;
background: #9cF;
border:1px solid #ccc;
}
.demo2 .right p{
font-size: 12px;
line-height: 25px;
}
.demo2 span{
position: absolute;
right: 20px;
top: 10px;
font-size: 12px;
}
.demo3 {
width: 458px;
padding: 20px;
position: relative;
background: #9cF;
border:1px solid #ccc;
margin-left: 100px;
}
.demo3 img{
float: left;
margin:-20px 0 0 -100px;
}
.demo3 .right p{
font-size: 12px;
line-height: 25px;
}
.demo3 span{
position: absolute;
right: 20px;
top: 10px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="demo1">
<div class="left">
<img src="1.jpg">
</div>
<div class="right">
<h6>小猫咪</h6>
<p>原始文字是人类用来紀錄特定事物、簡化圖像而成的書寫符號。 文字在发展早期都是图画形式的，有些是以形表意，有些是以形表音，其中有表意文字（象形文字，即以形表意的文字），與語音無甚關係，中國文字便是從此漸次演變而成。原始文字是人类用来紀錄特定事物、簡化圖像而成的書寫符號。 文字在发展早期都是图画形式的，有些是以形表意，有些是以形表音，其中有表意文字（象形文字，即以形表意的文字），與語音無甚關係，中國文字便是從此漸次演變而成。</p>
<span>10分钟以前</span>
</div>
</div>
<br>
<br>
<div class="demo2">
<img src="1.jpg">
<div class="right">
<h6>小猫咪</h6>
<p>原始文字是人类用来紀錄特定事物、簡化圖像而成的書寫符號。 文字在发展早期都是图画形式的，有些是以形表意，有些是以形表音，其中有表意文字（象形文字，即以形表意的文字），與語音無甚關係，中國文字便是從此漸次演變而成。原始文字是人类用来紀錄特定事物、簡化圖像而成的書寫符號。 文字在发展早期都是图画形式的，有些是以形表意，有些是以形表音，其中有表意文字（象形文字，即以形表意的文字），與語音無甚關係，中國文字便是從此漸次演變而成。</p>
<span>10分钟以前</span>
</div>
</div>
<br>
<br>
<div class="demo3">
<img src="1.jpg">
<h6>小猫咪</h6>
<p>原始文字是人类用来紀錄特定事物、簡化圖像而成的書寫符號。 文字在发展早期都是图画形式的，有些是以形表意，有些是以形表音，其中有表意文字（象形文字，即以形表意的文字），與語音無甚關係，中國文字便是從此漸次演變而成。原始文字是人类用来紀錄特定事物、簡化圖像而成的書寫符號。 文字在发展早期都是图画形式的，有些是以形表意，有些是以形表音，其中有表意文字（象形文字，即以形表意的文字），與語音無甚關係，中國文字便是從此漸次演變而成。</p>
<span>10分钟以前</span>
</div>
</body>
</html>
效果如图
用了三种不同的方法编写，结构越来越简单。
第一种定义了三个div，比较麻烦，编码较多。
第二种定义了两个div，是上一种的优化，把left的div去掉，直接让图像浮动，然后用margin-left将图像放置中间。
第三种定义了一个div，更加简便。只剩下一个div，用margin为负值将图像从div移出来。
网页布局应该先按结构和语义编写代码，然后进行CSS样式设置，减少HTML和CSS的契合度。
我们可以灵活地利用margin为负值，text-indent缩进，运用在我们的网页布局上，可以简化我们的代码。
1268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
