如何用CSS样式进行网页布局

来源：互联网发布：sql查询第几位数据编辑：程序博客网时间：2024/06/05 05:15

1 分栏又称为分列，常见的布局分为：

一列布局两列布局三列布局混合布局

(1)一列布局：

<!DOCTYPE html><html><head><meta http-equiv="Comtent-Type" content="text/html" charset="utf-8"><title>布局</title><style type="text/css">body{margin:0; padding: 0;}.top{height: 100px;background: blue;}.main{width: 800px; height: 300px;background: #ccc;margin: 0 auto;}.foot{width: 800px;height: 100px;background: #900;margin: 0 auto;}</style></head><body>    <div class="top"></div>     <div class="main"></div>     <div class="foot"></div></body></html>

margin:0 auto; //让元素居中显示

(2) 两列布局:

<!DOCTYPE html><html><head><meta http-equiv="Comtent-Type" content="text/html" charset="utf-8"><title>布局</title><style type="text/css">body{margin:0; padding: 0;}.main{width: 800px;margin: 0 auto;}.left{width: 220px;height: 500px;float:left;background: #ccc;}.right{width: 580px;height: 500px;float: right;background: #ddd;}</style></head><body><div class="main">    <div class="left"></div>     <div class="right"></div>     </div></body></html>

float:left(right);//浮动靠左或者右

(3) 三列布局：

<!DOCTYPE html ><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>三列布局</title>   <style type="text/css">     body{ margin:0; padding:0; font-size:30px; font-weight:bold}     div{ line-height:50px}    .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}    .main{ height:600px; margin:0 310px 0 210px; background:#9CF}    .right{ height:600px; width:300px; position:absolute; top:0;right:0; position:absolute; background:#FCC;}</style></head><body>        <div class="left">left</div>    <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>    <div class="right">right</div></body></html>

(4) 混合布局

<!DOCTYPE html><html><head><meta http-equiv="Comtent-Type" content="text/html" charset="utf-8"><title>流式布局</title><style type="text/css">body{margin:0; padding: 0;}.top{height: 100px;background: blue;}.head{height: 100px;width: 800px;background: #f60;margin: 0 auto;}.main{width: 800px; height: 600px;background: #ccc;margin: 0 auto}.left{width: 200px;height: 600px;background: yellow;float: left;}.right{width: 600px;height: 600px;background: #369;float: right;}.sub_l{width: 400px;height: 600px;background: green;float: left;}.sub_r{width: 200px;height: 600px;background: #09F;float: right;}.foot{width: 800px;height: 100px;background: #900;margin: 0 auto}</style></head><body>     <div class="top">     <div class="head"></div>     </div>     <div class="main">         <div class="left">         </div>         <div class="right">            <div classs="sub_l">            </div>            <div class="sub_r">            </div>         </div>     </div>     <div class="foot">300px</div>    </body></html>

阅读全文

0 0