学习DIV+CSS网页布局之混合布局

前端  /  管理员 发布于 7年前   245

DIV+CSS 网页布局第四篇：混合布局

1、混合布局

　　在了解了一列、两列和三列布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局，那么混合布局就可以在一列布局的基础之上，分为两列布局，三列布局，网页布局的结构普遍都是三列布局，但是在三列布局的基础上，可以根据实际需求，对网页再进行划分。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>混合布局</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #header{   
  9.     height:50px;   
  10.     background:blue;   
  11. }   
  12. #main{   
  13.     width:100%;   
  14.     overflow:hidden;   
  15. }   
  16. #main .main-left{   
  17.     width:20%;   
  18.     height:800px;   
  19.     background:lightgreen;   
  20.     float:left;   
  21. }   
  22. #main .main-right{   
  23.     width:80%;   
  24.     height:800px;   
  25.     float:right;   
  26. }   
  27. #main .main-right .right-l{   
  28.     width:80%;   
  29.     height:800px;   
  30.     background:yellow;   
  31.     float:left;   
  32. }   
  33. #main .main-right .right-r{   
  34.     width:20%;   
  35.     height:800px;   
  36.     background:pink;   
  37.     float:right;   
  38. }   
  39. #footer{   
  40.     height:50px;   
  41.     background:gray;   
  42. }   
  43. </style>  
  44. </head>  
  45. <body>  
  46. <div id="header">头部</div>  
  47. <div id="main">  
  48.     <div class="main-left">左边</div>  
  49.     <div class="main-right">  
  50.         <div class="right-l">右-左</div>  
  51.         <div class="right-r">右-右</div>  
  52.     </div>  
  53. </div>  
  54. <div id="footer">页脚</div>  
  55. </body>  
  56. </html>  

2、固定宽度混合布局

　　固定宽度的混合布局结构，同固定宽度的三列布局模式相同。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>固定宽度混合布局</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #header{   
  9.     height:50px;   
  10.     background:blue;   
  11. }   
  12. #main{   
  13.     width:960px;   
  14.     margin:0 auto;   
  15.     overflow:hidden;   
  16. }   
  17. #main .main-left{   
  18.     width:200px;   
  19.     height:800px;   
  20.     background:lightgreen;   
  21.     float:left;   
  22. }   
  23. #main .main-right{   
  24.     width:760px;   
  25.     height:800px;   
  26.     float:right;   
  27. }   
  28. #main .main-right .right-l{   
  29.     width:560px;   
  30.     height:800px;   
  31.     background:yellow;   
  32.     float:left;   
  33. }   
  34. #main .main-right .right-r{   
  35.     width:200px;   
  36.     height:800px;   
  37.     background:pink;   
  38.     float:right;   
  39. }   
  40. #footer{   
  41.     width:960px;   
  42.     height:50px;   
  43.     background:gray;   
  44.     margin:0 auto;   
  45. }   
  46. </style>  
  47. </head>  
  48. <body>  
  49. <div id="header">头部</div>  
  50. <div id="main">  
  51.     <div class="main-left">左边</div>  
  52.     <div class="main-right">  
  53.         <div class="right-l">右-左</div>  
  54.         <div class="right-r">右-右</div>  
  55.     </div>  
  56. </div>  
  57. <div id="footer">页脚</div>  
  58. </body>  
  59. </html>  

3、自适应混合布局

　　自适应混合布局是对三列自适应布局的改进。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>自适应混合布局</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #header{   
  9.     height:50px;   
  10.     background:blue;   
  11. }   
  12. #main{   
  13.     width:100%;   
  14.     position:relative;   
  15. }   
  16. #main .main-left{   
  17.     width:20%;   
  18.     height:800px;   
  19.     background:red;   
  20.     position:absolute;   
  21.     left:0;   
  22.     top:0;   
  23. }   
  24. #main .main-center{   
  25.     height:800px;   
  26.     background:lightgreen;   
  27.     margin:0 20%;   
  28. }   
  29. #main .main-right{   
  30.     width:20%;   
  31.     height:800px;   
  32.     background:pink;   
  33.     position:absolute;   
  34.     right:0;   
  35.     top:0;   
  36. }   
  37. #footer{   
  38.     height:50px;   
  39.     background:gray;   
  40. }   
  41. </style>  
  42. </head>  
  43. <body>  
  44. <div id="header">头部</div>  
  45. <div id="main">  
  46.     <div class="main-center">设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。</div>  
  47.     <div class="main-right">右列</div>  
  48.     <div class="main-left">左列</div>  
  49. </div>  
  50. <div id="footer">页脚</div>  
  51. </body>  
  52. </html>  

4、混合布局的应用

　　混合布局在网站中应用比较广泛，再复杂的布局结构，他们的原理都是相通的，可以举一反三。网页布局就是依据内容、功能的不同，使用 CSS 对元素进行格式设置，根据版面的布局结构进行排列，那么布局也就是元素与元素之间的关系，或者向一边看齐，或者精准定位，或者有一定间距，或者嵌套，或者相互堆叠，使元素按照设计稿的样式漂亮的呈现在网页上。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>混合布局</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #header{   
  9.     height:30px;   
  10.     background:blue;   
  11.     margin-bottom:10px;   
  12. }   
  13. #nav{   
  14.     width:960px;   
  15.     margin:0 auto;   
  16.     margin-bottom:10px;   
  17. }   
  18. #main{   
  19.     width:960px;   
  20.     height:800px;   
  21.     margin:0 auto;   
  22.     overflow:hidden;   
  23. }   
  24. #main .left{   
  25.     width:200px;   
  26.     height:800px;   
  27.     background:lightgreen;   
  28.     float:left;   
  29. }   
  30. #main .right{   
  31.     width:750px;   
  32.     height:800px;   
  33.     float:right;   
  34. }   
  35. #main .right .sup{   
  36.     height:200px;   
  37.     margin-bottom:10px;   
  38. }   
  39. #main .right .sup-left{   
  40.     width:370px;   
  41.     height:200px;   
  42.     background:pink;   
  43.     float:left;   
  44. }   
  45. #main .right .sup-right{   
  46.     width:370px;   
  47.     height:200px;   
  48.     background:orange;   
  49.     float:right;   
  50. }   
  51. #main .right .middle{   
  52.     height:300px;   
  53.     background:yellow;   
  54.     margin-bottom:10px;   
  55. }   
  56. #main .right .sub{   
  57.     height:280px;   
  58.     background:purple;   
  59. }   
  60. #footer{   
  61.     width:960px;   
  62.     height:50px;   
  63.     background:gray;   
  64.     margin:0 auto;   
  65.     margin-top:10px;   
  66. }   
  67. #nav ul{   
  68.     list-style:none;   
  69.     background:lightgray;   
  70.     overflow:hidden;   
  71. }   
  72. #nav li{   
  73.     float:left;   
  74. }   
  75. #nav li a{   
  76.     display:block;   
  77.     color:black;   
  78.     width:104px;   
  79.     height:30px;   
  80.     line-height:30px;   
  81.     text-decoration:none;   
  82.     text-align:center;   
  83. }   
  84. #nav .home{   
  85.     width:128px;   
  86. }   
  87. #nav li a:hover{   
  88.     color:white;   
  89.     background:green;   
  90. }   
  91. </style>  
  92. </head>  
  93. <body>  
  94. <div id="header">头部</div>  
  95. <div id="nav">  
  96.     <ul>  
  97.         <li><a  class="home" href="#">首页</a></li>  
  98.         <li><a href="#"

  • 上一条：
    css制作黑色经典导航下拉菜单
    下一条：
    学习DIV+CSS网页布局之三列布局

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客