DIV+CSS 网页布局第四篇：混合布局
1、混合布局
在 了解 了一列、两列和三列布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局，那么混合布局就可以在一列布局的基础之上，分为两列布局，三列布局，网页布局的结构普遍都是三列布局，但是在三列布局的基础上，可以根据实际需求，对网页再进行划分。
XM L/HT ML Code 复制内容到剪贴板
<!DOCTY PE &nbs p; html > < html > < head > < meta charset = "UTF-8" > < t IT le > 混合布局 </ title > < style > *{m arg in:0;padding:0;} # header{ h ei ght:50px; background:blue; } #m ai n{ width:100%; overflow:hidden; } #main .main-left{ width:20%; height:800px; background:lightgreen; float:left; } #main .main-right{ width:80%; height:800px; float:right; } #main .main-right .right-l{ width:80%; height:800px; background:yellow; float:left; } #main .main-right .right-r{ width:20%; height:800px; background:pink; float:right; } #footer{ height:50px; background:gray; } </ style > </ head > < body > < div id = "header" > 头部 </ div > < div id = " ;m ain" > < div class = "main-left" > 左边 </ div > < div class = "main-right" > < div class = "right-l" > 右-左 </ div > < div class = "right-r" > 右-右 </ div > </ div > </ div > < div id = "footer" > 页脚 </ div > </ body > </ html > @H_50_ 512 @
2、固定 宽 度混合布局
固定宽度的混合布局结构，同固定宽度的三列布局模式相同。
XML/HTML Code 复制内容到剪贴板
<!DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > 固定宽度混合布局 </ title > < style > *{mar gin :0;padding:0;} #header{ height:50px; background:blue; } #main{ width:960px; margin:0 auto; overflow:hidden; } #main .main-left{ width:200px; height:800px; background:lightgreen; float:left; } #main .main-right{ width:760px; height:800px; float:right; } #main .main-right .right-l{ width:560px; height:800px; background:yellow; float:left; } #main .main-right .right-r{ width:200px; height:800px; background:pink; float:right; } #footer{ width:960px; height:50px; background:gray; margin:0 auto; } </ style > </ head > < body > < div id = "header" > 头部 </ div > < div id = "main" > < div class = "main-left" > 左边 </ div > < div class = "main-right" > < div class = "right-l" > 右-左 </ div > < div class = "right-r" > 右-右 </ div > </ div > </ div > < div id = "footer" > 页脚 </ div > </ body > </ html >
3、自适应混合布局
自适应混合布局是对三列自适应布局的改进。
XML/HTML Code 复制内容到剪贴板
<!DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > 自适应混合布局 </ title > < style > *{margin:0;padding:0;} #header{ height:50px; background:blue; } #main{ width:100%; position:relative; } #main .main-left{ width:20%; height:800px; background: red ; position:absolute; left:0; top:0; } #main .main- center { height:800px; background:lightgreen; margin:0 20%; } #main .main-right{ width:20%; height:800px; background:pink; position:absolute; right:0; top:0; } #footer{ height:50px; background:gray; } </ style > </ head > < body > < div id = "header" > 头部 </ div > < div id = "main" > < div class = "main-center" > 设计网页的第一步就是设计版面布局，搭建 网站结构 ，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常 重要 ，很多时候能决定用户的去与留。 </ div > < div class = "main-right" > 右列 </ div > < div class = "main-left" > 左列 </ div > </ div > < div id = "footer" > 页脚 </ div > </ body > </ html >
4、混合布局的应用
混合布局在网站中应用比较广泛，再复杂的布局结构，他们的原理都是相通的，可以举一反三。网页布局就是依据内容、功能的不同，使用 CSS 对元素进行格式设置，根据版面的布局结构进行排列，那么布局也就是元素与元素之间的关系， 或者 向一边看齐，或者 精准 定位，或者有一定间距，或者嵌套，或者相互 堆叠 ，使元素按照设计稿的样式漂亮的呈现在网页上。
XML/HTML Code 复制内容到剪贴板
<!DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > 混合布局 </ title > < style > *{margin:0;padding:0;} #header{ height:30px; background:blue; margin-bottom:10px; } #nav{ width:960px; margin:0 auto; margin-bottom:10px; } #main{ width:960px; height:800px; margin:0 auto; overflow:hidden; } #main .left{ width:200px; height:800px; background:lightgreen; float:left; } #main .right{ width:750px; height:800px; float:right; } #main .right .sup{ height:200px; margin-bottom:10px; } #main .right .sup-left{ width:370px; height:200px; background:pink; float:left; } #main .right .sup-right{ width:370px; height:200px; background:orange; float:right; } #main .right .middle{ height:300px; background:yellow; margin-bottom:10px; } #main .right .s ub { height:280px; background:purple; } #footer{ width:960px; height:50px; background:gray; margin:0 auto; margin -t op:10px; } #nav ul{ list -s tyle:none; background:lightgray; overflow:hidden; } #nav li{ float:left; } #nav li a{ dis play :block; color:black; width:104px; height:30px; line-height:30px; text-decoration:none; text-align:center; } #nav .home{ width:128px; } #nav li a:hover{ color:white; background:green; } </ style > </ head > < body > < div id = "header" > 头部 </ div > < div id = "nav" > < ul > < li > < a class = "home" hr ef = "#" > 首页 </ a > </ li > < li > < a href = "#" > 新闻 </ a > </ li > < li > < a href = "#" > 热点 </ a > </ li > < li > < a href = "#" > 动态 </ a > </ li > < li > < a href = "#" > 直播 </ a > </ li > < li > < a href = "#" > 地图 </ a > </ li > < li > < a href = "#" > 服务 </ a > </ li > < li > < a href = "#" > 社区 </ a > </ li > < li > < a href = "#" > 关于我们 </ a > </ li > </ ul > </ div > < div id = "main" > < div class = "left" > 左边 </ div > < div class = "right" > < div class = "sup" > < div class = "sup-left" > 右-左 </ div > < div class = "sup-right" > 右-右 </ div > </ div > < div class = "middle" > 右-中 </ div > < div class = "sub" > 右-下 </ div > </ div > </ div > < div id = "footer" > 页脚 </ div > </ body > </ html >
以上就是本文的全部内容，希望对大家的学习有所帮助。
原文： http://www.cnblogs.com/Mtime/p/5276222.html
总结
以上是 为你收集整理的 学习DIV+CSS网页布局之混合布局 全部内容，希望文章能够帮你解决 学习DIV+CSS网页布局之混合布局 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于学习DIV+CSS网页布局之混合布局的详细内容...