首页前端开发HTML学习DIV+CSS网页布局之混合布局

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

时间2024-01-24 05:43:39发布访客分类HTML浏览1113
导读：收集整理的这篇文章主要介绍了学习DIV+CSS网页布局之混合布局，觉得挺不错的，现在分享给大家，也给大家做个参考。 DIV+CSS 网页布局第四篇：混合布局1、混合布局 在了解了一列、两列和三列布局之后，混合布局也就不难理解了，...
收集整理的这篇文章主要介绍了学习DIV+CSS网页布局之混合布局，觉得挺不错的，现在分享给大家，也给大家做个参考。

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>   
    57. @H_328_512@

    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="#"> 新闻/a> /li>   
    99.         li> a href="#"> 热点/a> /li>   
    100.         li> a href="#"> 动态/a> /li>   
    101.         li> a href="#"> 直播/a> /li>   
    102.         li> a href="#"> 地图/a> /li>   
    103.         li> a href="#"> 服务/a> /li>   
    104.         li> a href="#"> 社区/a> /li>   
    105.         li> a href="#"> 关于我们/a> /li>   
    106.     /ul>   
    107. /div>   
    108. div id="main">   
    109.     div class="left"> 左边/div>   
    110.     div class="right">   
    111.         div class="sup">   
    112.             div class="sup-left"> 右-左/div>   
    113.             div class="sup-right"> 右-右/div>   
    114.         /div>   
    115.         div class="middle"> 右-中/div>   
    116.         div class="sub"> 右-下/div>   
    117.     /div>   
    118. /div>   
    119. div id="footer"> 页脚/div>   
    120. /body>   
    121. /html>   

    以上就是本文的全部内容，希望对大家的学习有所帮助。

    原文：http://www.cnblogs.com/Mtime/p/5276222.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

DIV+CSS布局

若转载请注明出处： 学习DIV+CSS网页布局之混合布局
本文地址： https://pptw.com/jishu/585078.html
html5-Canvas可以在web中绘制各种图形 关于div与>div的区别小结

游客 回复需填写必要信息
↑