杰晶网络

学习DIV+CSS网页布局之混合布局
网页制作 2024/11/9 佚名
3 2

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="#">新闻</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

标签：
DIV+CSS,布局,混合布局
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“学习DIV+CSS网页布局之混合布局”
暂无“学习DIV+CSS网页布局之混合布局”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网