综合开发

HTML中布局

微信扫一扫,分享到朋友圈

HTML中布局

技术图片

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <metacharset="utf-8" />
5         <title></title>
6         <linkrel="stylesheet"type="text/css"href="http://mamicode.com/css/style.css"/>
7         <styletype="text/css">
8 h2{text-align:center;color:red;}
9
10         </style>
11     </head>
12     <body>
13
14         <h2>布局1</h2>
15         <divstyle="background-color: black;">
16                     <divclass="box1">
17                     <headerclass="box1-1">header</header>
18                     <menuclass="box1-2">menu</menu>
19                     <divclass="box1-3">siderbar</div>
20                     <divclass="box1-4">content</div>
21                     <divclass="box1-5">news</div>
22                     <divclass="box1-6">service</div>
23                     <divclass="box1-7">tip</div>
24                     <divclass="box1-8">footer</div>
25                 </div></div>
26         <h2>布局2</h2>
27         <divstyle="background-color: darkslategray;">
28                     <divclass="box2">
29                     <divclass="box2-1">head</div>
30                     <divclass="box2-2">menu</div>
31
32                     <divclass="box22">
33                         <divclass="box2-3">sidebar</div>
34                         <divclass="box2-4">activity</div>
35                         <divclass="box2-5">banner</div>
36                         <divclass="box2-6">photo</div>
37                         <divclass="box2-7">service</div>
38                     </div>
39                     <divclass="box2-8">footer</div>
40                 </div></div>
41         <h2>布局3</h2>
42         <divstyle="background-color: black;">
43             <divclass="box3">
44                 <divclass="box3-1">head</div>
45                 <divclass="box3-2">menu</div>
46                 <divclass="box3-3">scrool</div>
47                 <divclass="box3-4">content</div>
48                 <divclass="box3-5">photo</div>
49                 <divclass="box3-6">introduc</div>
50                 <divclass="box3-7">friendlink</div>
51                 <divclass="box3-8">footer</div>
52             </div>
53         </div>
54         <h2>布局4</h2>
55         <divstyle="background-color: darkslategray;">
56             <divclass="box4">
57                 <divclass="box4-1">head</div>
58                 <divclass="box44">
59                     <divclass="box4-2">content</div>
60                     <divclass="box4-3">service</div>
61                 </div>
62                 <divclass="box4-4">sidebar</div>
63                 <divclass="box4-5">joinus</div>
64                 <divclass="box4-6">footer</div>
65             </div>
66         </div>
67         <h2>布局5</h2>
68         <divstyle="background-color: black;">
69             <divclass="box5">
70                 <divclass="box55">
71                     <divclass="box56">
72                                     <divclass="box5-1">nav</div>
73                                     <divclass="box5-2">list</div>
74                                 </div>
75                                 <divclass="box5-3">main</div>
76
77                                 <divclass="box57">
78                                     <divclass="box5-4">news</div>
79                                     <divclass="box5-5">guild</div>
80                                     <divclass="box5-6">service</div>
81                                 </div></div>
82                 <divclass="box5-7">footer</div>
83             </div>
84         </div>
85         <h2>布局6</h2>
86         <divstyle="background-color: darkslategray;">
87             <divclass="box6">
88                 <divclass="box6-1">head</div>
89                 <divclass="box6-2">sidebar</div>
90
91                 <divclass="box67">
92                     <divclass="box6-3">content</div>
93                     <divclass="box6-4">news</div>
94                 </div>
95
96                 <divclass="box6-5">service</div>
97                 <divclass="box6-6">guild</div>
98                 <divclass="box6-7">regsiter</div>
99                 <divclass="box6-8">footer</div>
100             </div>
101         </div>
102         <h2>布局7</h2>
103         <divstyle="background-color: black;">
104             <divclass="box7">
105                 <divclass="box7-1">head</div>
106                 <divclass="box7-2">title</div>
107                 <divclass="box7-3">title</div>
108                 <divclass="box7-4">title</div>
109                 <divclass="box7-5">content</div>
110                 <divclass="box7-6">content</div>
111                 <divclass="box7-7">content</div>
112                 <divclass="box7-8">footer</div>
113             </div>
114         </div>
115         <h2>布局8</h2>
116         <divstyle="background-color: darkslategray;">
117             <divclass="box8">
118                 <divclass="box8-1">head</div>
119                 <divclass="box8-2">menu</div>
120
121             <divclass="box88">
122                 <divclass="box89">
123                             <divclass="box8-3">hot</div>
124                             <divclass="box8-4">status</div>
125                             <divclass="box8-5">friendlink</div>
126                 </div>
127
128                             <divclass="box810">
129                                 <divclass="box8-6">news</div>
130                                 <divclass="box8-7">loginba</div>
131                                 <divclass="box8-8">service</div>
132                                 <divclass="box8-9">joinus</div>
133                                 <divclass="box8-10">production</div>
134                             </div>
135             </div>
136                 <divclass="box8-11">footer</div>
137             </div>
138         </div>
139
140     </body>
141 </html>

css:

1 *{margin: 0;padding: 0;}2 .box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8{text-align: center;font-size: 30px;}3
4
5 /*布局1*/6 .box1{width: 960px;height: 880px;margin: 0 auto; }7 .box1-1{height: 100px; background-color: red;}8 .box1-2{height: 50px; background-color: darkgrey; margin: 0;padding: 0;}9 .box1-3{height: 350px;width: 320px; background-color: darksalmon;float: left;}10 .box1-4{height: 350px;width: 640px;background-color: cornflowerblue;float:right;}11 .box1-5{width: 320px;height: 300px; background-color: blanchedalmond;float: left;}12 .box1-6{width: 320px;height: 300px; background-color: beige;float: left;}13 .box1-7{width: 320px;height: 300px;background-color: red;float: right;}14 .box1-8{height:80px;background-color: yellow;clear: both;}15
16 /*布局2*/17 .box2{width: 960px;height: 1040px; margin: 0 auto;}18 .box2-1{height: 100px;width: 960px; background-color: red; }19 .box2-2{height: 80px; background-color: #FFEBCD;}20 .box22{height: 800px;}21 .box2-3{width: 160px;height: 800px; background-color: deepskyblue;float: left;}22 .box2-4{width: 480px;height: 400px;background-color: blueviolet;float: left;}23 .box2-5{width: 320px;height: 400px;background-color: darkorange;float:right;}24 .box2-6{width: 800px;height: 200px;background-color: yellow;float: right;}25 .box2-7{width: 800px;height: 200px; background-color: darkgray;float: right;}26 .box2-8{height: 60px;width: 960px; background-color: darkolivegreen;}27
28 /*布局3*/29 .box3{width: 960px;height: 1030px; margin: 0 auto;}30 .box3-1{height: 100px; background-color: red;}31 .box3-2{height: 80px; background-color: hotpink;}32 .box3-3{height: 300px;background-color: #6495ED;}33 .box3-4{width: 320px;height: 380px; background-color: #E9967A;float: left;}34 .box3-5{width: 240px; height: 380px; background-color: darkkhaki; float: left;}35 .box3-6{width: 400px;height: 380px; background-color: lightyellow;float: right;}36 .box3-7{width: 960px;height: 90px; background-color: brown; clear: both;}37 .box3-8{width: 960px;height: 80px; background-color: darkgoldenrod;clear: both;}38
39 /*布局4*/40 .box4{width:960px;height: 890px;margin: 0 auto;}41 .box4-1{height: 100px;background-color: red;}42 .box44{width: 640px;height: 500px;float: left;}43 .box4-2{width: 640px; height: 200px; background-color: #FFEBCD;}44 .box4-3{width: 640px;height: 300px;background-color: #A9A9A9;}45 .box4-4{width: 320px;height: 500px;background-color: #00BFFF;float: right;}46 .box4-5{height: 90px;background-color: lightblue;clear: both;}47 .box4-6{height:200px; background-color:green;clear: both;}48
49 /*布局5*/50 .box5{width: 960px;height: 800px;margin: 0 auto;}51 .box55{width: 960px;height: 720px;}52 .box56{width: 160px;height: 720px; float: left;}53 .box5-1{width: 160px; height: 120px; background-color: red;}54 .box5-2{width: 160px; height: 600px; background-color: dodgerblue;}55 .box5-3{width: 480px;height: 720px;background-color: #FF8C00; float: left;}56 .box57{width: 320px;height: 720px;float: right;}57 .box5-4{height: 120px;width: 320px; background-color: #008000;}58 .box5-5{height: 300px;width: 320px;background-color: #B8860B;}59 .box5-6{width: 320px;height: 300px; background-color: #8A2BE2;}60 .box5-7{height:80px;background-color:red;clear: both;}61
62 /*布局6*/63 .box6{width: 960px;height: 680px;margin: 0 auto; }64 .box6-1{height: 100px; background-color: red;}65 .box6-2{width: 320px; height: 260px; background-color: #FFEBCD;float: left;}66 .box67{width: 480px;height: 260px;float: left;}67 .box6-3{height: 130px;width: 480px; background-color: blue;}68 .box6-4{height: 130px;width: 480px;background-color: green;}69 .box6-5{width: 160px;height: 260px; background-color: darkgoldenrod;float: right;}70 .box6-6{width: 560px;height: 220px; background-color: gold;float: left;}71 .box6-7{width: 400px;height: 220px;background-color: #8A2BE2;float: right;}72 .box6-8{height:100px;background-color: #FFEBCD;clear: both;}73
74 /*布局7*/75 .box7{width: 960px;height:650px;margin: 0 auto;}76 .box7-1{height: 100px; background-color: #556B2F;}77 .box7-2{width: 320px; height:120px; background-color: #A52A2A;float: left;}78 .box7-3{width: 320px; height: 120px;background-color: #E9967A;float: left;}79 .box7-4{width: 320px; height: 120px;background-color: #F5F5DC;float:right;}80 .box7-5{width: 320px;height: 350px; background-color: #6495ED;float: left;}81 .box7-6{width: 320px;height: 350px; background-color: burlywood;float: left;}82 .box7-7{width: 320px;height: 350px;background-color: darkorange;float: right;}83 .box7-8{height:80px;background-color: #BDB76B;clear: both;}84
85 /*布局8*/86 .box8{width: 960px;height:770px;margin: 0 auto;}87 .box8-1{height: 100px; background-color: red;}88 .box8-2{height:50px; background-color: #A9A9A9;}89 .box88{width: 960px; height: 520px;}90 .box89{width: 320px;height: 520px;float: left;}91 .box8-3{width: 320px; height: 180px;background-color: #E9967A;}92 .box8-4{width: 320px; height: 160px;background-color: #008000;}93 .box8-5{width: 320px;height: 180px; background-color: coral;}94 .box810{width: 640px;height: 520px;float: right;}95 .box8-6{width: 480px;height: 185px; background-color: #FFEBCD;float: left;}96 .box8-7{width: 160px;height: 185px;background-color: #F5F5DC;float: left;}97 .box8-8{width: 400px;height: 175px; background-color: darksalmon;float: left;}98 .box8-9{width: 240px;height: 175px; background-color: blueviolet;float: left;}99 .box8-10{width: 640px;height: 160px; background-color: #B8860B;float: right;}100             .box8-11{height:100px;background-color: #BDB76B;clear: both;}    

HTML中布局

原文地址:https://www.cnblogs.com/chen-wei123/p/12573255.html

唯心主义蠢货的[vue学习] Vue的nextTick

上一篇

Zabbix配置企业微信群聊机器人告警

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

HTML中布局

长按储存图像,分享给朋友