学习培训DIV+CSS网页页面合理布局之混和合理布局

日期:2021-03-04 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

DIV+CSS 网页页面合理布局第4篇:混和合理布局

1、混和合理布局

  在掌握了1列、多列和3列合理布局以后,混和合理布局也就不难了解了,混和合理布局还可以叫综合性型合理布局,那末混和合理布局便可以在1列合理布局的基本之上,分成多列合理布局,3列合理布局,网页页面合理布局的构造广泛全是3列合理布局,可是在3列合理布局的基本上,能够依据具体要求,对网页页面再开展区划。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  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、固定不动宽度混和合理布局

  固定不动宽度的混和合理布局构造,同固定不动宽度的3列合理布局方式同样。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  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、自融入混和合理布局

  自融入混和合理布局是对3列自融入合理布局的改善。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  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">设计方案网页页面的第1步便是设计方案版面合理布局,构建网站构造,网页页面排版的有效性,在1定水平上也危害着网站总体的合理布局和后期的提升。1个好的网站形象能更非常容易地吸引住客户、留住客户。因而,网站主页第1屏的排版十分关键,许多情况下能决策客户的去与留。</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、混和合理布局的运用

  混和合理布局在网站中运用较为普遍,再繁杂的合理布局构造,她们的基本原理全是相通的,能够举1反3。网页页面合理布局便是根据內容、作用的不一样,应用 CSS 对元素开展文件格式设定,依据版面的合理布局构造开展排序,那末合理布局也便是元素与元素之间的关联,或向1边看齐,或精确精准定位,或有1定间隔,或嵌套循环,或互相层叠,使元素依照设计方案稿的款式好看的展现在网页页面上。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  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

上一篇:纯CSS3打造属于自身的“小黄人” 返回下一篇:没有了