line-height属性 : 控制行高
* {padding:0;
margin:0;
}
index.html:
<!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=gb2312"/>
<title>流体布局</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<h1>标题</h1>
</div>
<div id="nav">
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
<li>EE</li>
<li>FF</li>
</ul>
</div>
<div id="main">
<p>北京时间2月3日消息,据国外媒体报道,Facebook作为世界上最大的在线社交网络,估值高达1000亿美元,而在它进行首次公开募股(IPO)后,必将有很多人从中受益。路透社给出了Facebook上市的受益人及机构,并逐一进行了分析</p>
</div>
<div id="navr">
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
<li>EE</li>
<li>FF</li>
</ul>
</div>
<div id="footer">
<p>powered by wordpress.</p>
</div>
stylecss:
*{
margin:0;
padding:0;
}
body{
background:white;
}
#header{
border:1px solid black;
height:60px;
line-height:60px;
margin-bottom:10px;
}
#header h1{
font-size:16px;
text-align:center;
height:100%;
margin-bottom:10px;
}
#nav{
border:1px solid black;
width:20%;
height:300px;
float:left;
margin-bottom:10px;
}
#nav ul{
text-align:center;
line-height:150%;
}
#main{
border:1px solid black;
width:55%;
height:300px;
float:left;
margin-bottom:10px;
margin-left:2%;
}
#main p{
padding:10px;
text-indent:34px;
letter-spacing:2px;
line-height:150%;
}
#navr{
border:1px solid black;
width:20%;
height:300px;
float:right;
margin-bottom:10px;
}
#navr ul{
text-align:center;
line-height:150%;
}
#footer{
border:1px solid black;
height:60px;
line-height:60px;
clear:both;
}
#footer p{
text-align:center;
}