1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>网站首页</title>
6 <style>
7 #bodyDiv{
8 border: 1px solid blue;
9 width: 90%px;
10 }
11 .logoDiv{
12 border: 1px solid blue;
13 width: 33%;
14 float: left;
15 height: 50px;
16 }
17 .clear{
18 clear: both;
19 }
20 #menuDiv{
21 width: 100%;
22 height: 50px;
23 border: 1px solid blue;
24 background-color: black;
25 }
26
27 #imgDiv{
28 width: 100%;
29 border: 1px solid blue;
30 }
31
32 .productClass{
33 width: 100%;
34 border: 1px solid blue;
35 }
36 .contentClass{
37 width: 100%;
38 border: 1px solid blue;
39 }
40 .contentClass font{
41 font-size: 30px;
42 color: black;
43 }
44
45 #menuDiv a{
46 font-size: 20px;
47 color: white;
48 }
49 <!--找到id为menuDiv中的 a元素,不知道为什么这个注释总有问题-->
50 </style>
51 </head>
52 <body>
53 <!--整体的DIV-->
54 <div id="bodyDiv">
55 <!--首行分为三个小块-->
56 <div class="logoDiv">
57 <img src="../01静态界面/img/logo2.png" height="48"/>
58 </div>
59 <div class="logoDiv">
60 <img src="../01静态界面/img/header.png" height="48" />
61 </div>
62 <div class="logoDiv">
63 <a href="">登录</a>
64 <a href="">注册</a>
65 <a href="">购物车</a>
66 </div>
67 <div class="clear"></div>
68 </div>
69 <!--第二行的div-->
70 <div id="menuDiv">
71 <a href="">首页</a>
72 <a href="">电脑办公</a>
73 <a href="">手机数码</a>
74 <a href="">烟酒糖茶</a>
75 </div>
76 <!--第三行，滚动的图片-->
77 <div id="imgDiv">
78 <img src="../01静态界面/img/1.jpg" width="100%" />
79 </div>
80 <!--第四行，热门商品的Div-->
81 <div class="productClass">
82 <!--文字部分的Div-->
83 <div class="contentClass">
84 <font>热门商品</font>
85 <img src="../01静态界面/img/title2.jpg" />
86 </div>
87 <!--商品展示图片部分Div-->
88 <div style="width: 100%;border: 1px solid blue;">
89 <div style="width: 15%;height: 460px;border: 1px solid blue;float: left;">
90 <img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/>
91 </div>
92 <div style="width: 84%;height: 460px;border: 1px solid blue;float: left;">
93 <div>
94 <div style="border: 1px solid blue;width: 48%;float: left;height: 228px;">
95 <img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" />
96 </div>
97 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
98 <img src="../01静态界面/img/small03.jpg" />
99 </div>
100 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
101 <img src="../01静态界面/img/small03.jpg" />
102 </div>
103 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
104 <img src="../01静态界面/img/small03.jpg" />
105 </div>
106 </div>
107 <div>
108 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
109 <img src="../01静态界面/img/small03.jpg" />
110 </div>
111 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
112 <img src="../01静态界面/img/small03.jpg" />
113 </div>
114 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
115 <img src="../01静态界面/img/small03.jpg" />
116 </div>
117 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
118 <img src="../01静态界面/img/small03.jpg" />
119 </div>
120 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
121 <img src="../01静态界面/img/small03.jpg" />
122 </div>
123 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
124 <img src="../01静态界面/img/small03.jpg" />
125 </div>
126 </div>
127 </div>
128 </div>
129 </div>
130
131 <!--广告的Div-->
132 <div style="width: 100%;border: 1px solid blue;">
133 <img src="../01静态界面/img/ad.jpg" width="100%" height="80" />
134 </div>
135 <!--最新商品的Div-->
136 <div class="productClass">
137 <!--文字部分的Div-->
138 <div class="contentClass">
139 <font>最新商品</font>
140 <img src="../01静态界面/img/title2.jpg" />
141 </div>
142 <!--商品展示图片部分Div-->
143 <div style="width: 100%;border: 1px solid blue;">
144 <div style="width: 15%;height: 460px;border: 1px solid blue;float: left;">
145 <img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/>
146 </div>
147 <div style="width: 84%;height: 460px;border: 1px solid blue;float: left;">
148 <div>
149 <div style="border: 1px solid blue;width: 48%;float: left;height: 228px;">
150 <img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" />
151 </div>
152 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
153 <img src="../01静态界面/img/small03.jpg" />
154 </div>
155 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
156 <img src="../01静态界面/img/small03.jpg" />
157 </div>
158 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
159 <img src="../01静态界面/img/small03.jpg" />
160 </div>
161 </div>
162 <div>
163 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
164 <img src="../01静态界面/img/small03.jpg" />
165 </div>
166 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
167 <img src="../01静态界面/img/small03.jpg" />
168 </div>
169 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
170 <img src="../01静态界面/img/small03.jpg" />
171 </div>
172 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
173 <img src="../01静态界面/img/small03.jpg" />
174 </div>
175 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
176 <img src="../01静态界面/img/small03.jpg" />
177 </div>
178 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
179 <img src="../01静态界面/img/small03.jpg" />
180 </div>
181 </div>
182 </div>
183 </div>
184 </div>
185
186 <!--页脚的Div-->
187 <div style="width: 100%;border: 1px solid blue;">
188 <img src="../01静态界面/img/footer.jpg" width="100%" />
189 </div>
190
191 <!--友情链接的Div-->
192 <div>
193 <center>
194 联系我们 招贤纳士 法律声明<br />
195 Copyright © 2005-2016 传智商城 版权所有
196 </center>
197 </div>
198 </body>
199 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>注册界面</title>
6 <style>
7 div{
8 border: 1px solid blue;
9 }
10 .bodyDiv{
11 width:90%;
12 }
13
14 .bodyDiv > div{
15 width: 100%;
16 }
17
18 .logoDiv{
19 width: 33%;
20 height: 50px;
21 float: left;
22 }
23
24 .clear{
25 clear: both;
26 }
27
28 ul li{
29 display: inline;
30 }
31 </style>
32 </head>
33 <body>
34 <!--整体的div-->
35 <div class="bodyDiv">
36 <div>
37 <div class="logoDiv">
38 <img src="../01静态界面/img/logo2.png" height="50" />
39 </div>
40 <div class="logoDiv">
41 <img src="../01静态界面/img/header.png" height="50"/>
42 </div>
43 <div class="logoDiv" style="margin-top: 0px;padding-top: 10px;height: 40px;">
44 <a href="">登录</a>
45 <a href="">注册</a>
46 <a href="">购物车</a>
47 </div>
48 <div class="clear"></div>
49 </div>
50 </div>
51 <div style="height: 50px;background-color: black;">
52 <ul>
53 <li>首页</li>
54 <li>首页</li>
55 <li>首页</li>
56 <li>首页</li>
57 </ul>
58 </div>
59 <div style="height: 500px;background-image: url(../01静态界面/img/regist_bg.jpg);">
60 <div style="border:5px solid gray;background-color: white;position: absolute; left: 400px;top: 160px;width: 600px;">
61 <form>
62 <table border="0" width="100%" cellspacing="10">
63 <tr>
64 <td>用户名</td>
65 <td><input type="text" name="username"></td>
66 </tr>
67 <tr>
68 <td>密码</td>
69 <td><input type="password" name="password"></td>
70 </tr>
71 <tr>
72 <td>确认密码</td>
73 <td><input type="password" name="repassword"></td>
74 </tr>
75 <tr>
76 <td>性别</td>
77 <td>
78 <input type="radio" name="sex" value="男">男
79 <input type="radio" name="sex" value="女">女
80 </td>
81 </tr>
82 <tr>
83 <td>籍贯</td>
84 <td>
85 <select name="province">
86 <option>--请选择--</option>
87 </select>
88 <select name="city">
89 <option>--请选择--</option>
90 </select>
91 </td>
92 </tr>
93 <tr>
94 <td>爱好</td>
95 <td>
96 <input type="checkbox" name="hobby" value="篮球">篮球
97 <input type="checkbox" name="hobby" value="足球">足球
98 <input type="checkbox" name="hobby" value="排球">排球
99 <input type="checkbox" name="hobby" value="羽毛球">羽毛球
100 </td>
101 </tr>
102 <tr>
103 <td>邮箱</td>
104 <td><input type="text" name="email"></td>
105 </tr>
106 <tr>
107 <td colspan="2"><input type="submit" value="注册" /> </td>
108 </tr>
109 </table>
110 </form>
111 </div>
112 </div>
113 <!--最下面的两行-->
114 <div>
115 <img src="../01静态界面/img/footer.jpg" width="100%" />
116 </div>
117 <div>
118 <center>
119 联系我们 招贤纳士 法律声明<br />
120 Copyright © 2005-2016 传智商城 版权所有
121 </center>
122 </div>
123 </body>
124 </html>