DIV+CSS 網頁佈局之：混合佈局

時間 2019-12-04

標籤 div+css div css 網頁佈局混合欄目 HTML 简体版

原文原文鏈接

一、混合佈局

　　在瞭解了一列、兩列和三列布局以後，混合佈局也就不難理解了，混合佈局也能夠叫綜合型佈局，那麼混合佈局就能夠在一列布局的基礎之上，分爲兩列布局，三列布局，網頁佈局的結構廣泛都是三列布局，可是在三列布局的基礎上，能夠根據實際需求，對網頁再進行劃分。html

 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>

二、固定寬度混合佈局

　　固定寬度的混合佈局結構，同固定寬度的三列布局模式相同。佈局

 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>

三、自適應混合佈局

　　自適應混合佈局是對三列自適應佈局的改進。優化

 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>

四、混合佈局的應用

　　混合佈局在網站中應用比較普遍，再複雜的佈局結構，他們的原理都是相通的，能夠觸類旁通。網頁佈局就是依據內容、功能的不一樣，使用 CSS 對元素進行格式設置，根據版面的佈局結構進行排列，那麼佈局也就是元素與元素之間的關係，或者向一邊看齊，或者精準定位，或者有必定間距，或者嵌套，或者相互堆疊，使元素按照設計稿的樣式漂亮的呈如今網頁上。網站

  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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。