你知道几种div布局方法?_采风浪人_太平洋博客

来源：百度文库编辑：神马文学网时间：2024/10/04 06:06:46

你知道几种div布局方法?

阅读:(146) 评论:(1) 发表时间:2009-07-16作者:采风浪人
常用的DIV布局方法汇总根据个人的经验网页的输出用纯粹的div+css并不是最好的方式，那并不符合标准的xhtml语义，也不利于seo的推广优化。用div来布局整个网页的架构还是不错的,那会比用table的嵌套更加简洁。至于用div输出的网页运行速度是不是会比table来得要快? 刚学习之初我是抱有很大的疑问的，在这里我只是说下我自己的理解和看法也不一定完全的正确。相信很多的朋友都会在baidu或google里看到过div+css实例教程的那个例子，我也看了。DIV结构如下：
　　│body {}　/*这是一个HTML元素，具体我就不说明了*/
　　└#Container {}　/*页面层容器*/
　　　　　├#Header {}　/*页面头部*/
　　　　　├#PageBody {}　/*页面主体*/
　　　　　│　├#Sidebar {}　/*侧边栏*/
　　　　　│　└#MainBody {}　/*主体内容*/
　　　　　└#Footer {}　/*页面底部*/ 对于一个初学者来说那是非常好的教程，不过这个布局完全是用table布局的思路来写的。所有的div都在#Container里，那就达不到div分块显示的效果。Div输出的原则是尽量细分和少的嵌套，那样就不会因为某个div 显示得比较慢而影响了整个页面的显示速度。当然了从代码量来说div布局确实是会比table更加简洁和清晰的，尽管如此也不是任何时候都是用div就比用table好。像本来显示效果就是表格的网页那当然是考虑用表格比div要好得多了，那样用table输出工作效率更高并且代码量也不比用div 少那又何乐而不为呢? 网页输出的时候应该不拘一格,那样的工作效率才会更高，效果也更加好。好了长话短说，现在直接进入我们的主题div的几种布局方式，还是以上面的页面为例子。 1、上下布局　　　　├#Header {}　/*页面头部*/
　　　　　├#PageBody {}　/*页面主体*/
　　　　　└#Footer {}　/*页面底部*/ Html代码: TD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ="Content-Type" content="text/html; charset=utf-8" /> 常用的<wbr>五种DIV布局方法-<wbr>by采风浪人</ti<wbr>tle> <link href="inde<wbr>x.css" rel="style<wbr>sheet" type="text<wbr>/css" /> </head> <body> <div id="Header<wbr>"> </div> <div id="PageBo<wbr>dy"> </div> <div id="Footer<wbr>"> </div> </body> </html> Css代码: @charset "utf-8"; /* CSS Document */ body{ margin:0px<wbr>; padding:0p<wbr>x; } #Header, #PageBody,<wbr> #Footer{ width:900p<wbr>x; margin:0 auto; } #Header{ height:100<wbr>px; background<wbr>:#003366; } #PageBody{ height:100<wbr>0px; border:1px<wbr> #000000 solid; } #Footer{ height:200<wbr>px; background<wbr>:#990000; } 2 、左右布局　　　　　│　├#S<wbr>idebar {}　/*侧边栏*/<br>　　　　　│　└#M<wbr>ainBody {}　/*主体内容*<wbr>/ 1）指定左右两列的宽度，<wbr>只需要将左边的div<wbr> 向左浮动{float<wbr>:left;}，右边<wbr>的div 向右浮动{float<wbr>:right;}，并<wbr>清除浮动，即可实现。 Html代码: <div id="PageBo<wbr>dy"> <div id="Sideba<wbr>r"></div> <div id="MainBo<wbr>dy"></div> </div> Css代码: /* 左右布局开始 */ #Sidebar{ width:200p<wbr>x; height:100<wbr>%; background<wbr>:#000000; float:left<wbr>; } #MainBody{ width:700p<wbr>x; height:100<wbr>%; float:righ<wbr>t; background<wbr>:#6600CC; } /* 左右布局结束 */ 注：右边的div 向左浮动#MainB<wbr>ody {float:lef<wbr>t;}也是可以，因为<wbr>#Sidebar和#<wbr>MainBody是包<wbr>含在#PageBod<wbr>y这里没有清除浮动也<wbr>是没有问题的。清除浮动有三种方式<wbr>：<br> a、通过在浮动元素的<wbr>父级元素上添加清除浮<wbr>动的class类; <div id="PageBo<wbr>dy" class="cle<wbr>ar"> <div id="Sideba<wbr>r"></div> <div id="MainBo<wbr>dy"></div> </div> b、通过在浮动元素后<wbr>面添加一个空元素，然<wbr>后在这个空元素上定义<wbr>clear:both<wbr>来清除浮动； <div id="PageBo<wbr>dy" class=”cle<wbr>ar”> <div id="Sideba<wbr>r"></div> <div id="MainBo<wbr>dy"></div> <div class="cle<wbr>ar"></div> </div> C、在下一个div的<wbr>css里加入clea<wbr>r:both来清除浮<wbr>动；假设上面的div布局<wbr>里没有# PageBody <div id="Header<wbr>"> </div> <div id="Sideba<wbr>r"></div> <div id="MainBo<wbr>dy"></div> <div id="Footer<wbr>"> </div> # Footer{ cear:both; } 这种布局方式从显示效<wbr>率来说应该是最符合D<wbr>IV输出的思想的，不<wbr>过那样很容易出错输出<wbr>难度会比较大。具体用<wbr>那种方式布局就看个人<wbr>的喜好和页面的效果图<wbr>来确定。 2）不指定宽度布局 a、左边指定宽度，右边指<wbr>定宽度，左在上，右在<wbr>下；(此处的上和下是<wbr>指在html代码中从<wbr>上到下编写顺序中的位<wbr>置，下文皆同) 这种布局方法与左右定<wbr>宽布局的方法基本相同<wbr>，只需要将左边的di<wbr>v向左浮动{floa<wbr>t:left;}，并<wbr>清除浮动，右边的di<wbr>v就会跟在已浮动的“<wbr>div左”后面，即已<wbr>经实现左右两列布局了<wbr>。我们试着将#Mai<wbr>nBody的宽度注释<wbr>掉就可以看到右边的宽<wbr>度是根据内容变化的。 <div id="PageBo<wbr>dy"> <div id="Sideba<wbr>r">左边导航</d<wbr>iv> <div id="MainBo<wbr>dy">右边内容</<wbr>div> </div> #MainBody{ /*width:70<wbr>0px; */ height:100<wbr>%; float:righ<wbr>t; background<wbr>:#6600CC; } b、左边指定宽度，右边不<wbr>指定宽度，左在下，右<wbr>在上；为什么要用这种有点奇<wbr>怪的不合乎常规的布局<wbr>方法呢？这样布局当然有它自己<wbr>本身的优点的。将右边<wbr>div写在上方，通常<wbr>是希望在加载网站内容<wbr>时先显示右边的内容。代码示例如下： <div id="PageBo<wbr>dy"> <div id="MainBo<wbr>dy">右边内容</<wbr>div> <div id="Sideba<wbr>r">左边导航</d<wbr>iv> </div> /* 左右布局开始 */ #Sidebar{ width:200p<wbr>x; height:100<wbr>%; background<wbr>:#000000; float:left<wbr>; } #MainBody{ /*width:70<wbr>0px; */ width:100%<wbr>; height:100<wbr>%; margin-lef<wbr>t:-300px; float:righ<wbr>t; background<wbr>:#6600CC; } #MainBody .content{ background<wbr>:#FF9966; margin-lef<wbr>t:200px; } /* 左右布局结束 */ 使用左边指定宽度，右<wbr>边不指定宽度，左在下<wbr>，右在上布局方法的几<wbr>个要点 1）将右边的div向<wbr>右浮动，并设一个负的<wbr>margin-lef<wbr>t，注意这个这个宽带<wbr>应该大于或等于左边的<wbr>宽度；<br> 2）在右边div里面<wbr>增加一个div，用于<wbr>放右边的内容，计算出<wbr>左边需要留出的宽度，<wbr>并将此数据设置为该d<wbr>iv的margin-<wbr>left，如{mar<wbr>gin-left:2<wbr>00px;}；<br> 3）要是外面没有#P<wbr>ageBody包含,<wbr>浮动后一定要在父级元<wbr>素或后一个元素上清除<wbr>浮动；以上是我们在进行网页<wbr>布局时最常用的几种方<wbr>式，当然在实际应用中<wbr>还是需要掌握很多技巧<wbr>的。熟能生巧那是一点<wbr>不错的，关键在于勤学<wbr>苦练。要让div居中通常用<wbr> margin:0 auto; 另外指定最小高度的自<wbr>适应高度也是比较常用<wbr>的 <div id="PageBo<wbr>dy"> </div> <div id="clearb<wbr>ox"> </div> #PageBody{ min-height<wbr>:100px; _height:10<wbr>0px; } .clearbox { border-top<wbr>:1px solid transparen<wbr>t !important<wbr>; margin-top<wbr>:-1px !important<wbr>; border-top<wbr>:0; margin-top<wbr>:0; clear: both; visibility<wbr>: hidden; } 这里你可以把#Pag<wbr>eBody看成一个画<wbr>卷,而.clearb<wbr>ox是画轴。自适应高<wbr>度就是这样。好了，到此为止把例子<wbr>的最终代码贴上来： Index.html <!DOCTYPE html PUBLIC "-//W3C//D<wbr>TD XHTML 1.0 Transition<wbr>al//EN" "http://www<wbr>.w3.org/TR<wbr>/xhtml1/DT<wbr>D/xhtml1-t<wbr>ransitiona<wbr>l.dtd"> <html xmlns="http://www<wbr>.w3.org/19<wbr>99/xhtml"> <head> <meta http-equiv<wbr>="Content-<wbr>Type" content="t<wbr>ext/html; charset=ut<wbr>f-8" /> <title>常用的<wbr>五种DIV布局方法-<wbr>by采风浪人</ti<wbr>tle> <link href="inde<wbr>x.css" rel="style<wbr>sheet" type="text<wbr>/css" /> </head> <body> <div id="Header<wbr>"> </div> <div id="PageBo<wbr>dy"> <div id="MainBo<wbr>dy"> <wbr> <div class="con<wbr>tent"> <wbr> 右边内容 <wbr> </div> </div> <div id="Sideba<wbr>r">左边导航</d<wbr>iv> </div> <div id="Footer<wbr>"> </div> </body> </html> Index.css : @charset "utf-8"; /* CSS Document */ body{ margin:0px<wbr>; padding:0p<wbr>x; } .clear{ clear:both<wbr>; } /* 上下布局开始 */ #Header, #PageBody,<wbr> #Footer{ width:900p<wbr>x; margin:0 auto; } #Header{ height:100<wbr>px; background<wbr>:#003366; } #PageBody{ height:100<wbr>0px; background<wbr>:#CCCCCC; } #Footer{ height:200<wbr>px; background<wbr>:#990000; } /* 上下布局结束 */ /* 左右布局开始 */ #Sidebar{ width:200p<wbr>x; height:100<wbr>%; background<wbr>:#000000; float:left<wbr>; } #MainBody{ /*width:70<wbr>0px; */ width:100%<wbr>; height:100<wbr>%; margin-lef<wbr>t:-10px; float:righ<wbr>t; background<wbr>:#6600CC; } #MainBody .content{ background<wbr>:#FF9966; margin-lef<wbr>t:200px; } /* 左右布局结束 */ 把以上代码分别保存为<wbr>index.html<wbr> index.css两<wbr>个文件，并保存到同一<wbr>目录下运行即可看到效<wbr>果。注:要转载请保存以下<wbr>链接 http://www<wbr>.mobanshej<wbr>i.com/ </li></li></ul></div> <div class="list-group"> <a href="/article/1149953" class="list-group-item">你知道几种div布局方法?_采风浪人_太平洋博客</a> <a href="/article/492710" class="list-group-item">用食物“清火”的六种方法_疾病饮食_健康_太平洋女性网</a> <a href="/article/922233" class="list-group-item">拒绝被宰！贴防爆膜你不能不知道的事实【图】_防爆膜知识心得_太平洋汽车网</a> <a href="/article/2035973" class="list-group-item">3种方法教1-2岁宝宝识字_早教知识_教育_太平洋亲子网1</a> <a href="/article/1316968" class="list-group-item">基于CSS的DIV网页设计 - 使用固定层方法设计网页 - 三栏_爱上你的微笑</a> <a href="/article/1961604" class="list-group-item">大芯板十大品牌^*^教你几招绿色建材选购方法_</a> <a href="/article/483456" class="list-group-item">电线杆的故事_东中浪人</a> <a href="/article/2596604" class="list-group-item">新型电力电子器件_电气浪人</a> <a href="/article/504977" class="list-group-item">DIV居中_随心写下</a> <a href="/article/1449941" class="list-group-item">分享几种祈祷和灵修方法_天主教耶稣爱你网</a> <a href="/article/2685450" class="list-group-item">教你几种方法彻底删除桌面顽固图标_解决桌面图标无法删除 -</a> <a href="/article/1566529" class="list-group-item">夫妻调情11试，包你兴奋【精彩】！_现代的人生的太平洋汽车网博客</a> <a href="/article/2597987" class="list-group-item">第三天二列和三列布局—DIV+CSS教程—十天学会web标准_div+css_二列布局_...</a> <a href="/article/778524" class="list-group-item">鉴别皮鞋质量好坏的几种方法！_</a> <a href="/article/1534411" class="list-group-item">去除文档中多余空行的几种方法_</a> <a href="/article/1916941" class="list-group-item">去除文档中多余空行的几种方法_</a> <a href="/article/425190" class="list-group-item">我儿子和他的Google实习令人惊叹（组图）_稻_太平洋博客</a> <a href="/article/869248" class="list-group-item">太平洋摄影部落_中国最大的摄影博客_太平洋电脑网</a> <a href="/article/1076476" class="list-group-item">[转]买进就涨的选股技巧 1_仙鹤_太平洋博客</a> <a href="/article/1403647" class="list-group-item">WM系统手机实现多接入点同时连接_天空小猪飞_太平洋博客</a> <a href="/article/1743173" class="list-group-item">Core i3 530试用手记 - 高清视频播放篇_梦幻小魔猪_太平洋博客</a> <a href="/article/1830038" class="list-group-item">_生活_太平洋亲子网</a> <a href="/article/423065" class="list-group-item">解决OO车身划痕的方法_赛欧论坛_车友会俱乐部_太平洋汽车论坛#post_15220237...</a> <a href="/article/718279" class="list-group-item">安装Linux的几种方法_Linux/其他_操作系统_维护维修宝典</a> </div> </div> </div> </div> </div> </div> <footer id="footer" class="footer hidden-print"> <div class="container"> <div class="panel panel-default"> <div class="panel-heading">相关问题</div> <div class="panel-body"> <a class="btn btn-default" href="/article/1128008" title="《最后的“云南王”卢汉》（2）">《最后的“云南王”卢汉》（2）</a> <a class="btn btn-default" href="/article/1128009" title="5大饮食习惯吃出苗条身材 -">5大饮食习惯吃出苗条身材 -</a> <a class="btn btn-default" href="/article/1128010" title="杨宪益：半瓶浊酒，四年星斗——我的四年牢狱生活">杨宪益：半瓶浊酒，四年星斗——我的四年牢狱生活</a> <a class="btn btn-default" href="/article/1128011" title="d第一张">d第一张</a> <a class="btn btn-default" href="/article/1128012" title="大壮阳秘术正宗版 - 『两性私语』 - 原创社区电子书-最优秀的txt电子书下载及原...">大壮阳秘术正宗版 - 『两性私语』 - 原创社区电子书-最优秀的txt电子书下载及原...</a> <a class="btn btn-default" href="/article/1128013" title="俄罗斯集装箱式巡航导弹令中美两国海军精神崩溃！">俄罗斯集装箱式巡航导弹令中美两国海军精神崩溃！</a> <a class="btn btn-default" href="/article/1128014" title="愚者与智者的区别48个差距">愚者与智者的区别48个差距</a> <a class="btn btn-default" href="/article/1128015" title="中国最美的100句古典古诗词">中国最美的100句古典古诗词</a> <a class="btn btn-default" href="/article/1128016" title="笑破肚皮的山寨名言">笑破肚皮的山寨名言</a> <a class="btn btn-default" href="/article/1128017" title="肖伟俐：周建人的为官、为人和为学">肖伟俐：周建人的为官、为人和为学</a> <a class="btn btn-default" href="/article/1128018" title="走进世博会：犹太裔建筑师回上海寻根">走进世博会：犹太裔建筑师回上海寻根</a> <a class="btn btn-default" href="/article/1128019" title="【140条】电脑操作知识">【140条】电脑操作知识</a> <a class="btn btn-default" href="/article/1128020" title="三十如狼四十虎：女人放纵情欲的黄金时代001">三十如狼四十虎：女人放纵情欲的黄金时代001</a> <a class="btn btn-default" href="/article/1128021" title="百年奇书-犹太复国主义长老会议纪要之(1-17)">百年奇书-犹太复国主义长老会议纪要之(1-17)</a> <a class="btn btn-default" href="/article/1128022" title="某些官员为何“不会说话”">某些官员为何“不会说话”</a> <a class="btn btn-default" href="/article/1128023" title="文化的沙漠（摘）">文化的沙漠（摘）</a> <a class="btn btn-default" href="/article/1128024" title="非常全面的电子书籍网站d地址 - 我学网（开复学生网）">非常全面的电子书籍网站d地址 - 我学网（开复学生网）</a> <a class="btn btn-default" href="/article/1128025" title="清明上河图">清明上河图</a> <a class="btn btn-default" href="/article/1128026" title="女孩的生活方式">女孩的生活方式</a> <a class="btn btn-default" href="/article/1128027" title="根治所有胃病2">根治所有胃病2</a> <a class="btn btn-default" href="/article/1128028" title="12种食物">12种食物</a> <a class="btn btn-default" href="/article/1128029" title="治落枕可采用指掐内关法">治落枕可采用指掐内关法</a> <a class="btn btn-default" href="/article/1128030" title="Invictus">Invictus</a> <a class="btn btn-default" href="/article/1128031" title="沈宝祥：胡耀邦对思想路线建设的贡献">沈宝祥：胡耀邦对思想路线建设的贡献</a> <a class="btn btn-default" href="/article/1128032" title="猫耳朵面">猫耳朵面</a> <a class="btn btn-default" href="/article/1128033" title="原来保持单身有这么多含义(">原来保持单身有这么多含义(</a> <a class="btn btn-default" href="/article/1128034" title="[评论随笔]隐权力：中国历史弈局的幕后推手（即将出版）">[评论随笔]隐权力：中国历史弈局的幕后推手（即将出版）</a> <a class="btn btn-default" href="/article/1128035" title="不衰老的活法">不衰老的活法</a> <a class="btn btn-default" href="/article/1128036" title="数字常识">数字常识</a> <a class="btn btn-default" href="/article/1128037" title="柠檬萝卜">柠檬萝卜</a> <a class="btn btn-default" href="/article/1128038" title="请不到的好老师-中小学生成材的摇篮">请不到的好老师-中小学生成材的摇篮</a> </div> </div></div> <div class="copy-right"> <p>神马文学网，客观、专业、权威的知识性互动百科全书。</p></div> </footer> </body> </html>