1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <title>最后一题框架</title>
6 <style>
7 *{margin:0;padding: 0;}
8 body{background-color: #ccc;}
9 .box{
10 width: 1020px;
11 height: 2200px;
12 margin:0 auto;
13 border: 1px solid blue;
14 background-color: skyblue;
15 }
16 .box .header{
17 height: 160px;
18 border: 1px solid red;
19 background-color: #eee;
20 }
21 .box .header .top1{
22 height: 50px;
23 background-color: #f00;
24 }
25 .box .header .top2{
26 height: 60px;
27 background-color: #0f0;
28 }
29 .box .header .top3{
30 height: 50px;
31 background-color: #00f;
32 }
33
34 /*********************************/
35 .box .banner{
36 width: 1020px;
37 height: 420px;
38 margin: 20px auto;
39 border: 1px solid red;
40 background-color: #fff;
41 }
42 /**********************************/
43 .box .fenlei{
44 width: 980px;
45 height: 100px;
46 margin:0 auto;
47 border:1px solid blue;
48 background-color: #333;
49 }
50 /***********************************/
51 .box .jptj{
52 width: 980px;
53 height: 500px;
54 margin: 20px auto;
55 border: 1px solid red;
56 background-color: #444;
57 }
58 .box .rmsp{
59 width: 980px;
60 height: 500px;
61 margin: 20px auto;
62 border: 1px solid red;
63 background-color: #444;
64 }
65 .box .weibu{
66 width: 980px;
67 height: 100px;
68 margin: 0px auto;
69 border:1px solid blue;
70 background-color: #555;
71 }
72 .box .footer{
73 width: 980px;
74 height: 40px;
75 margin:20px auto;
76 background-color: #666;
77 border: 1px solid blue;
78 }
79 </style>
80 </head>
81 <body>
82 <div class="box">
83 <!-- 头部开始 -->
84 <div class="header">
85 <div class="top1">登录注册位置</div>
86 <div class="top2">搜索位置</div>
87 <div class="top3">导航栏位置</div>
88 </div>
89 <!-- 头部结束 -->
90 <!-- banner开始 -->
91 <div class="banner">放banner的位置</div>
92 <!-- banner结束 -->
93 <!-- 商品分类开始 -->
94 <div class="fenlei">
95 <div class="fenlei1">商品分类</div>
96 <div class="fenlei2">商品分类导航</div>
97 </div>
98 <!-- 商品分类结束 -->
99 <!-- 精品推荐开始 -->
100 <div class="jptj">精品推荐</div>
101 <!-- 精品推荐结束 -->
102 <!-- 热卖商品开始 -->
103 <div class="rmsp">热卖商品</div>
104 <!-- 热卖商品结束 -->
105 <!-- 尾部开始 -->
106 <div class="weibu">尾部广告</div>
107 <!-- 尾部结束 -->
108 <!-- 页脚信息 -->
109 <div class="footer">页脚</div>
110 <!-- 页脚信息结束 -->
111 </div>
112 </body>
113 </html>
时间： 2024-08-25 23:13:15