进入了WEB2.0时代后,网页设计师们,为了让页面外观与结构分离,就要用CSS样式来规范布局.用CSS样式规范布局使代码更简洁,更结构化,便站点访问和维护更加容易.在这里我们来看一下,怎么用CSS来布局的.
现今网络上比较流行的页面布局是内容区水平三列的样式,下面的html代码简单的表现了这种样式:
<html>
<head>
<title>CSS样式页</title>
<style type="text/css">
<!--
body{
text-align:center;
margin: 0px;
font-family: "宋体";
font-size:12px;
}
#top,{
margin:1px;
border: 1px solid #000000;
width:980px;
}
#content{
width:980px;
margin:1px;
}
#left{
background: #F1F1F1;
margin:5px 0px;
width: 222px;
float: left;
}
#mid{
background: #DFF7FF;
margin: 5px;
padding: 0px;
float: left;
width: 548px;
}
#right{
background: #FFEBCC;
margin-top:5px;
width: 200px;
float: right;
}
#bottom{
background: #6891D2;
margin:5px 1px;;
width:980px;
border: 1px solid #000000;
}
h2.title{
padding:2px;
background: Red;
font-family: "宋体";
font-size:16px;
color:#ffffff;
}
-->
</style>
</head>
<body>
<div id="top">这里是页首</div>
<div id="content"> <!--这里是内容区-->
<div id="left"> <!--这里是内容区左侧-->
<h2 class="title">CSS</h2>
</div>
<div id="mid"><!--这里是内容区中间部份--></div>
<div id="right"><!---这里是内容区右侧--></div>
</div>
<div id="bottom">这里是页尾</div>
</body>
</html>