HTML部分:
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>
CSS部分:
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>