|
进入了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> |
|
|
