| 标题 | div+css网页布局 |
| 范文 | 为了相应网页的标准化进程，最近开始学习div+css网页布局了，感觉css确实不错，现在发表出来，跟大家共享 一列固定宽度 <div id=”left” >一列固定宽度</div> #left{ width:455px; height:1000px; background-color:#00FFFF; border:1px solid #333333; } 一列自适应 <div id=”left” >一列自适应</div> #left{ width:80%; height:1000px; background-color:#00FFFF; border:1px solid #333333; } 一列宽度居中（auto让浏览器自动判断边距，将当前div但左右边距设为auto，浏览器会将div但左右边距设为相同） <div id=”left” >一列固定宽度</div> #left{ width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333; margin：opx auto； } 二列固定宽度 <div id=”left” >左列</div> <div id=”right” >右列</div> #left {float:left;width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333; } #right{float:left;width:400px;height:1000px;background-color:#000000;border:1px solid #FF0000; } 二列宽度自适应（在算百分比时要考虑边框大小） <div id=”left” >左列</div> <div id=”right” >右列</div> #left {float:left;width:20%;height:1000px;background-color:#00FFFF;border:1px solid #333333; } #right{float:left;width:70%;height:1000px;background-color:#000000;border:1px solid #FF0000; } 两列右列宽度自适应（左栏宽度为固定值，右栏宽度不设值且不浮动） <div id=”left” >左列</div> <div id=”right” >右列</div> #left {float:left;width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333; } #right{height:1000px;background-color:#000000;border:1px solid #FF0000; } 二列固定宽度居中（外层设左右边距为auto,注意大盒子的固定宽度的算法） <div id=”box”> <div id=”left” >左列</div> <div id=”right” >右列</div> </div> #box {margin:0px auto ;width:404px; } #left {float:left;width:200px;height:1000px;background-color:#00FFFF;border:1px solid #333333; } #right{float:left;width:200px;height:1000px;background-color:#000000;border:1px solid #FF0000; } 三列宽度自适应、浮动中间列（左右两列绝对定位，中间边距参照左右两列） <div id=”left” >左列</div> <div id=”center” >中间</div> <div id=”right” >右列</div> #left {width:200px;height:1000px;background-color:#00FFFF;border:1px solid #333333; position:absolute;top:0px;left:0px; } #right{float:left;width:200px;height:1000px;background-color:#000000;border:1px solid #FF0000;position:absolute;top:0px;left:0px; } #center {height:1000px;background-color:#000000;border:1px solid #FF0000;margin-left:104px;maigin-right:104px; } 高度自适应（对象高度是否百分比显示，取决于其父级对象。浏览器默认情况下，body没有高度属性，直接设height:100%;时，不产生任何效果，但给body设定100%后，便发生作用了） html,body{margin:opx;height:100%; } #left {float:left;width: 300px;height: 100%;background-color:#00FFFF;border:1px solid #333333; } |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。