CSS布局中,一个重要的标签DIV,DIV是XHTML所支持的标签,DIV是一个容器,所有的XHTML标签对象都可以称为是一个容器.如<div>content</div>,<h1>titles</h1>....div代码的书写格式: <div id="id 名称">[...]</div><div class="class名称">[...]</div> 注:同一个名称的id值,在当前的XHTML页面中,只日须使用一次,class名称可以重复使用.1.一列布局 一列固定宽度 XHTML CODE： <div id="layout">一列固定宽度width:300px;height:300px;</div> CSS CODE： #layout{background-color:#C7E091;border:2px solid #B0BCA6;width:300px;height:300px;} 一列宽度自适应 XHTML CODE： <div id="layout">一列自适应宽度width:80%</div> CSS CODE： #layout{background-color:#C7E091;border:2px solid #B0BCA6;width:80%;height:300px;} 注：自适应的优势是，当扩大或缩小浏览器窗口大小时，其宽度将维持在与浏览器当前宽度比例的80%。 一列固定宽度居中 XHTML CODE： <div id="layout">一列固定宽度居中</div> CSS CODE： #layout{background-color:#C7E091;border:2px solid #B0BCA6;width:400px;height:300px;margin:0px auto;} 注：margin:0px auto;margin属性用于控制对象的上右下左4个方向的外边距，当margin使用两个参数时，第一个参数表示上下边距，第二个表示左右边距。auto值是让浏览器自动判断边距，浏览器将会使div对象的左右边距设为相同，从而实现居中效果。2.二列布局 二列固定宽度 XHTML CODE: <div id="left">left</div><div id="left">left</div> CSS CODE: #left{background-color:#EBDD9E;border:2px solid #B5A068;width:300px;height:300px;float:left;}#right{background-color:#EBDD9E;border:2px solid #B5A068;width:300px;height:300px;float:left;} 注：float属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局方式，DIV布局基本上都通过FLOAT的控制来实现布局。float用于设置对象是否浮动显示，以及设置具体的浮动方式，可用值none，left，right。 二列宽度自适应 XHTML CODE： <div id="left">left</div><div id="left">left</div> CSS CODE: #left{background-color:#EBDD9E;border:2px solid #B5A068;width:20%;height:300px;float:left;}#right{background-color:#EBDD9E;border:2px solid #B5A068;width:70%;height:300px;float:left;} 注：在CSS布局中，一个对象的宽度，不仅仅是由WIDTH值来决定，一个对象的真实宽度是由对象本身的宽、对象的左右外边距，以及左右边框，还有内边距这些属性相加而成。有关宽度计算的问题，是CSS布局中相当重要的被成为盒模型问题。 右列宽度自适应 XHTML CODE： <div id="left">left</div><div id="right">right</div> CSS CODE： #left{background-color:#EBDD9E;border:2px solid #B5A068;width:100px;height:300px;float:left;}#right{background-color:#EBDD9E;border:2px solid #B5A068;width:300px;height:300px;} 二列固定宽度居中 XHTML CODE： <div id="layout"><div id="left">left</div><div id="right">right</div></div> CSS CODE： #layout{margin:0px auto;width:408px;}#left,#right{background-color:#EBDD9E;border:2px solid #B5A068;width:200px;height:300px;float:left;}3.三列布局 三列浮动中间列宽度自适应 XHTML CODE： <div id="left">left</div><div id="center">center</div><div id="right">right</div> CSS CODE： body{margin:0px;}#left{background-color:#EBDD9E;border:2px solid #B5A068;width:100px;height:300px;position:absolute;top:0px;left:0px;}#center{background-color:#EBDD9E;border:2px solid #B5A068;height:300px;margin-left:100px;margin-right:100px;}#right{background-color:#EBDD9E;border:2px solid #B5A068;width:100px;height:300px;position:absolute;right:0px;top:0px;} 最后,脚本之家提醒大家请自行演示学习.

　　推荐阅读

　　CSS教程:用dl dt dd来制作列表

　　今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方：　　1、如果用UL还布局，右边一栏比较麻烦；　　2、文字外边的边框自适应比较麻烦；　　3、很可能要定死高度；>>>详细阅读

本文标题：学习CSS布局网页的一些实例

地址：http://www.17bianji.com/kaifa2/CSS/17149.html

 1/2    1