基础网页框架

 1 <!--网页头部-->
 2         <div class="header">
 3             <div class="logo">
 4                 logo
 5             </div>
 6             <div class="language">
 7                 ENGLISH
 8             </div>
 9             <div class="nav">
10                 nav
11             </div>
12             <div class="banner">banner</div>
13         </div>
14         
15         <!--网页内容-->
16         <div class="content">
17             <div class="sidebar">sidebar</div>
18             <div class="main">
19                 <div class="newsandhots">
20                     <div class="newsbox">
21                         <div class="news1">news1</div>
22                         <div class="news2">news2</div>
23                         <div class="news3">news3</div>
24                     </div>
25                     <div class="hots">hots</div>
26                 </div>
27                 <div class="links">links</div>
28             </div>
29         </div>
30         
31         <!--网页底部-->
32         <div class="footer">footer</div>

 1 <style type="text/css">
 2             * {
 3                 margin: 0;
 4                 padding: 0;
 5             }
 6             .header {
 7                 width: 970px;
 8                 height: 253px;
 9                 margin: 0 auto;
10             }
11             .header .logo {
12                 float: left;
13                 width: 277px;
14                 height: 103px;
15                 background-color: #ff0000;
16             }
17             .header .language {
18                 float: right;
19                 width: 137px;
20                 height: 49px;
21                 margin-bottom: 8px;
22                 background-color: #00ff00;
23             }
24             .header .nav {
25                 float: right;
26                 margin-bottom: 10px;
27                 width: 679px;
28                 height: 46px;
29                 background-color: #00ff00;
30             }
31             .header .banner {
32                 overflow: hidden;
33                 width: 970px;
34                 height: 150px;
35                 background-color: #87ceeb;
36             }
37             .content {
38                 width: 970px;
39                 height: 435px;
40                 margin: 0 auto;
41                 margin-top: 20px;
42             }
43             .content .sidebar {
44                 float: left;
45                 width: 310px;
46                 height: 435px;
47                 background-color: #ffcc00;
48             }
49             .content .main {
50                 float: right;
51                 width: 650px;
52                 height: 435px;
53             }
54             .content .main .newsandhots {
55                 width: 650px;
56                 height: 401px;
57             }
58             .content .main .links {
59                 width: 650px;
60                 height: 24px;
61                 background-color: #339900;
62                 margin-top: 10px;
63             }
64             .content .main .newsandhots .newsbox {
65                 float: left;
66                 width: 450px;
67                 height: 401px;
68             }
69             .content .main .newsandhots .hots {
70                 float: right;
71                 width: 190px;
72                 height: 400px;
73                 background-color: #cc3399;
74             }
75             .content .main .newsandhots .newsbox .news1{
76                 height: 240px;
77                 background-color: #3399ff;
78                 margin-bottom:10px;
79             }
80             .content .main .newsandhots .newsbox .news2{
81                 height: 110px;
82                 background-color: #3399ff;
83                 margin-bottom:10px;
84             }
85             .content .main .newsandhots .newsbox .news3{
86                 height: 30px;
87                 background-color: #3399ff;
88             }
89             .footer {
90                 width: 970px;
91                 height: 35px;
92                 margin: 0 auto;
93                 margin-top: 10px;
94                 background-color: #000099;
95             }
96         </style>