css+div框架【简记】 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         body {
  8             margin: 0; /*设置外边距为0*/
  9             text-align: center;
 10             background-color: #ffffcc;
 11         }
 12 
 13         #container {
 14             width: 800px;
 15             height: 1000px;
 16             background-color: #ffff00;
 17             margin: 0 auto; /*居中显示，块自适应宽*/
 18         }
 19 
 20         #header {
 21             float: left; /*元素向左浮动*/
 22             width: 800px;
 23             height: 100px;
 24             margin: 0 auto;
 25             clear: both; /*拒绝下方的元素飘上来，例如menu*/
 26             background-color: #ff0000;
 27         }
 28 
 29         #logo {
 30             float: left;
 31             width: 250px;
 32             height: 90px;
 33             background-color: green;
 34             clear: right;
 35             margin: 0;
 36         }
 37 
 38         #banner {
 39             float: right;
 40             width: 540px;
 41             height: 90px;
 42             margin: 0;
 43             background-color: #67ff0c;
 44         }
 45 
 46         #menu {
 47             width: 800px;
 48             height: 35px;
 49             margin: 0 auto;
 50             clear: both;
 51             background-color: gray;
 52         }
 53 
 54         .nav {
 55             margin: 0 auto;
 56             width: 800px;
 57             height: 10px;
 58             clear: both;
 59             background-color: #ffffff;
 60             line-height: 10px; /*设置行高，免得字体超出*/
 61         }
 62 
 63         .nav_a {
 64             float: left;
 65             /*margin: 0 auto;因为不占整屏的宽度所以就不设置了*/
 66             width: 610px;
 67             height: 10px;
 68             clear: both;
 69             background-color: #ffffff;
 70             line-height: 10px;
 71         }
 72 
 73         .left_main {
 74             margin: 0;
 75             float: left;
 76             width: 610px;
 77             height: 420px;
 78             clear: right;
 79             background-color: #ff0000;
 80         }
 81 
 82         .right_main {
 83             margin: 0;
 84             float: right;
 85             width: 180px;
 86             height: 420px;
 87             background-color: rgba(91, 69, 180, 0.89);
 88         }
 89 
 90         .left_a {
 91             margin: 0;
 92             float: left;
 93             width: 300px;
 94             height: 205px;
 95             background-color: #0000ff;
 96         }
 97 
 98         .left_b {
 99             margin: 0;
100             float: right;
101             width: 300px;
102             height: 205px;
103             clear: right; /*可有可无*/
104             background-color: #0000ff;
105         }
106 
107         .con {
108             margin: 0px;
109             width: 800px;
110             height: 200px;
111             clear: both;
112             border-bottom-style: solid;
113             background-color: #691a36;
114         }
115 
116         .one {
117             margin-left: 5px;
118             float: left;
119             width: 150px;
120             height: 200px;
121             clear: left;
122             background-color: #ff99f0;
123         }
124 
125         .two {
126             float: left;
127             margin-left: 10px;
128             width: 150px;
129             height: 200px;
130             background-color: #ffccf0;
131         }
132 
133         .three {
134             float: left;
135             margin-left: 10px;
136             width: 150px;
137             height: 200px;
138             background-color: #0ffff0;
139         }
140 
141         .four {
142             float: left;
143             margin-left: 10px;
144             width: 150px;
145             height: 200px;
146             background-color: #f0fff0;
147         }
148 
149         .five {
150             float: left;
151             margin-left: 10px;
152             width: 150px;
153             height: 200px;
154             background-color: rgba(35, 255, 202, 0.45);
155         }
156 
157         #footer {
158             margin: 0 auto;
159             width: 800px;
160             height: 25px;
161             background-color: red;
162         }
163 
164 
165     </style>
166 </head>
167 <body>
168 
169 
170 <div id="container">
171     <div id="header">
172         <div id="logo">logo</div>
173         <div id="banner">banner</div>
174     </div>
175     <div id="menu">menu</div>
176     <div class="nav">nav</div>
177     <div class="left_main">
178         <div class="left_a">left_a</div>
179         <div class="left_b">left_b</div>
180         <div class="nav_a">nav</div>
181         <div class="left_a">left_a</div>
182         <div class="left_b">left_b</div>
183     </div>
184     <div class="right_main">right_main</div>
185     <div class="nav">nav</div>
186     <div class="con">
187         <div class="one">one</div>
188         <div class="two">two</div>
189         <div class="three">three</div>
190         <div class="four">four</div>
191         <div class="five">five</div>
192     </div>
193     <div class="con">
194         <div class="one">one</div>
195         <div class="two">two</div>
196         <div class="three">three</div>
197         <div class="four">four</div>
198         <div class="five">five</div>
199     </div>
200     <div id="footer">footer</div>
201 
202 </div>
203 </body>
204 </html>
View Code

效果图：

posted @ 2020-02-17 16:30  九鸩  阅读(212)  评论(0)  编辑  收藏  举报