当前位置:Gxlcms > html代码 > DIV+CSS网页布局之:混合布局-彼岸时光

DIV+CSS网页布局之:混合布局-彼岸时光

时间:2021-07-01 10:21:17 帮助过:33人阅读

1、混合布局

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

 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、固定宽度混合布局

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

 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、自适应混合布局

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

 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 对元素进行格式设置,根据版面的布局结构进行排列,那么布局也就是元素与元素之间的关系,或者向一边看齐,或者精准定位,或者有一定间距,或者嵌套,或者相互堆叠,使元素按照设计稿的样式漂亮的呈现在网页上。

  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:
                        
                    

人气教程排行