随笔 - 95, 文章 - 0, 评论 - 0, 阅读 - 14111

 1     <!DOCTYPE html>

 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>贵美商城</title>
 7         <link rel="stylesheet" type="text/css" href="css/index.css" />
 8     </head>
 9 
10     <body>
11         <div id="global">
12             <iframe src="head.html" width="980px" height="130px" frameborder="0" scrolling="no"></iframe>
13             <iframe src="center.html" width="980px" height="630px" frameborder="0" scrolling="no"></iframe>
14             <iframe src="bottom.html" width="980px" height="140px" frameborder="0" scrolling="no"></iframe>
15         </div>
16     </body>
17 </html>

index

head

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>贵美商城</title>
 7         <script type="text/javascript">
 8             function submitSearch() {
 9                 alert("搜索中...");
10             }
11         </script>
12         <link rel="stylesheet" type="text/css" href="css/head.css" />
13     </head>
14 
15     <body>
16         <div id="global">
17             <div id="top">
18                 <div id="logo">
19 
20                 </div>
21                 <div id="rightmenu">
22                     <ul>
23                         <li class="pic shop"></li>
24                         <li>
25                             <a href="#">购物车</a>
26                         </li>
27                         <li class="pic help"></li>
28                         <li>
29                             <a href="user_help.html" target="_parent">帮助中心</a>
30                         </li>
31                         <li class="pic jrsc"></li>
32                         <li>
33                             <a href="#">加入收藏</a>
34                         </li>
35                         <li class="pic index"></li>
36                         <li>
37                             <a href="#">设为首页</a>
38                         </li>
39                         <li class="pic btn">
40                             <a href="#">登录</a>
41                         </li>
42                         <li class="pic btn">
43                             <a href="#">注册</a>
44                         </li>
45                     </ul>
46                 </div>
47                 <div id="welcome">
48                     欢迎来到贵美商城！！！
49                 </div>
50                 <div id="mainmenu">
51                     <ul>
52                         <li>
53                             <a href="index.html"  target="_parent">首&nbsp;&nbsp;&nbsp;页</a>
54                         </li>
55                         <li>
56                             <a href="#">家用电器</a>
57                         </li>
58                         <li>
59                             <a href="#">手机数码</a>
60                         </li>
61                         <li>
62                             <a href="#">日用百货 </a>
63                         </li>
64                         <li>
65                             <a href="#">书&nbsp;&nbsp;&nbsp; 籍</a>
66                         </li>
67                         <li>
68                             <a href="user_help.html"  target="_parent">帮助中心</a>
69                         </li>
70                         <li>
71                             <a href="user_help.html"  target="_parent">免费开店</a>
72                         </li>
73                         <li>
74                             <a href="user_help.html"  target="_parent">全球咨询</a>
75                         </li>
76                         <li><input type="text" name="" id="search" value="" /></li>
77                         <li id="btn" onclick="submitSearch()"></li>
78                     </ul>
79                 </div>
80             </div>
81         </div>
82     </body>
83 
84 </html>

center

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>贵美商城</title>
  7         <link rel="stylesheet" type="text/css" href="css/center.css" />
  8     </head>
  9 
 10     <body>
 11         <div id="global">
 12             <div id="center">
 13                 <div id="index_left">
 14                     <div id="index_left_jydq">家用电器</div>
 15                     <ul>
 16                         <li>
 17                             <a href="#">大家电</a>
 18                         </li>
 19                         <li>
 20                             <a href="#">洗衣机</a>
 21                         </li>
 22                         <li>
 23                             <a href="#">平板电视</a>
 24                         </li>
 25                         <li>
 26                             <a href="#">电热水器</a>
 27                         </li>
 28                         <li>
 29                             <a href="#">家庭音响</a>
 30                         </li>
 31                         <li>
 32                             <a href="#">热水器</a>
 33                         </li>
 34                         <li>
 35                             <a href="#">空调冰箱</a>
 36                         </li>
 37                         <li>
 38                             <a href="#">冷柜</a>
 39                         </li>
 40                         <li>
 41                             <a href="#">DVD</a>
 42                         </li>
 43                         <li>
 44                             <a href="#">电视附件</a>
 45                         </li>
 46                         <li>
 47                             <a href="#">电燃气</a>
 48                         </li>
 49                         <li>
 50                             <a href="#">家电下乡</a>
 51                         </li>
 52                         <li>
 53                             <a href="#">家电服务</a>
 54                         </li>
 55                         <li>
 56                             <a href="#">电饭煲</a>
 57                         </li>
 58                         <li>
 59                             <a href="#">摄像机</a>
 60                         </li>
 61                     </ul>
 62                     <div id="index_left_jydq">书籍</div>
 63                     <ul>
 64                         <li>
 65                             <a href="#">大家电</a>
 66                         </li>
 67                         <li>
 68                             <a href="#">洗衣机</a>
 69                         </li>
 70                         <li>
 71                             <a href="#">平板电视</a>
 72                         </li>
 73                         <li>
 74                             <a href="#">电热水器</a>
 75                         </li>
 76                         <li>
 77                             <a href="#">家庭音响</a>
 78                         </li>
 79                         <li>
 80                             <a href="#">热水器</a>
 81                         </li>
 82                         <li>
 83                             <a href="#">空调冰箱</a>
 84                         </li>
 85                         <li>
 86                             <a href="#">冷柜</a>
 87                         </li>
 88                         <li>
 89                             <a href="#">DVD</a>
 90                         </li>
 91                         <li>
 92                             <a href="#">电视附件</a>
 93                         </li>
 94                         <li>
 95                             <a href="#">电燃气</a>
 96                         </li>
 97                         <li>
 98                             <a href="#">家电下乡</a>
 99                         </li>
100                         <li>
101                             <a href="#">家电服务</a>
102                         </li>
103                         <li>
104                             <a href="#">电饭煲</a>
105                         </li>
106                         <li>
107                             <a href="#">摄像机</a>
108                         </li>
109                     </ul>
110                     <div id="index_left_jydq">手机数码</div>
111                     <ul>
112                         <li>
113                             <a href="#">大家电</a>
114                         </li>
115                         <li>
116                             <a href="#">洗衣机</a>
117                         </li>
118                         <li>
119                             <a href="#">平板电视</a>
120                         </li>
121                         <li>
122                             <a href="#">电热水器</a>
123                         </li>
124                         <li>
125                             <a href="#">家庭音响</a>
126                         </li>
127                         <li>
128                             <a href="#">热水器</a>
129                         </li>
130                         <li>
131                             <a href="#">空调冰箱</a>
132                         </li>
133                         <li>
134                             <a href="#">冷柜</a>
135                         </li>
136                         <li>
137                             <a href="#">DVD</a>
138                         </li>
139                         <li>
140                             <a href="#">电视附件</a>
141                         </li>
142                         <li>
143                             <a href="#">电燃气</a>
144                         </li>
145                         <li>
146                             <a href="#">家电下乡</a>
147                         </li>
148                         <li>
149                             <a href="#">家电服务</a>
150                         </li>
151                         <li>
152                             <a href="#">电饭煲</a>
153                         </li>
154                         <li>
155                             <a href="#">摄像机</a>
156                         </li>
157                     </ul>
158                     <div id="index_left_jydq">日用百货</div>
159                     <ul>
160                         <li>
161                             <a href="#">大家电</a>
162                         </li>
163                         <li>
164                             <a href="#">洗衣机</a>
165                         </li>
166                         <li>
167                             <a href="#">平板电视</a>
168                         </li>
169                         <li>
170                             <a href="#">电热水器</a>
171                         </li>
172                         <li>
173                             <a href="#">家庭音响</a>
174                         </li>
175                         <li>
176                             <a href="#">热水器</a>
177                         </li>
178                         <li>
179                             <a href="#">空调冰箱</a>
180                         </li>
181                         <li>
182                             <a href="#">冷柜</a>
183                         </li>
184                         <li>
185                             <a href="#">DVD</a>
186                         </li>
187                         <li>
188                             <a href="#">电视附件</a>
189                         </li>
190                         <li>
191                             <a href="#">电燃气</a>
192                         </li>
193                         <li>
194                             <a href="#">家电下乡</a>
195                         </li>
196                         <li>
197                             <a href="#">家电服务</a>
198                         </li>
199                         <li>
200                             <a href="#">电饭煲</a>
201                         </li>
202                         <li>
203                             <a href="#">摄像机</a>
204                         </li>
205                     </ul>
206                 </div>
207                 <div id="index_center">
208                     <div id="index_center_top">
209                         <img src="img/top01.jpg"/>
210                     </div>
211                     <div id="index_center_bot">
212                         <div id="index_center_promotion">
213                             <img src="img/promotion1.jpg" />
214                         </div>
215 
216                         <div id="index_center_promotion">
217                             <img src="img/promotion2.jpg" />
218                         </div>
219                         <div id="index_center_promotion">
220                             <img src="img/promotion3.jpg" />
221                         </div>
222                         <div id="index_center_promotion_explain">
223                             <a href="#">惠普商务移动应用英寸笔记本</a>
224                         </div>
225                         <div id="index_center_promotion_explain">
226                             <a href="#">夏新N6 GPS真人语音导航手机 超低特价疯抢 数量有限！</a>
227                         </div>
228                         <div id="index_center_promotion_explain">
229                             <a href="#">三星家庭影院 HT-TZ325 购机送好礼(超值性价比)</a>
230                         </div>
231                         <div id="index_center_promotion">
232                             <img src="img/promotion4.jpg" />
233                         </div>
234 
235                         <div id="index_center_promotion">
236                             <img src="img/promotion5.jpg" />
237                         </div>
238 
239                         <div id="index_center_promotion">
240                             <img src="img/promotion6.jpg" />
241                         </div>
242                         <div id="index_center_promotion_explain">
243                             <a href="#">明基MP512投影机 2899元 送100元京卷 SVGA 2200流明</a>
244                         </div>
245                         <div id="index_center_promotion_explain">
246                             <a href="#">罗技数据1TB移动鼠标729元开抢了！</a>
247                         </div>
248                         <div id="index_center_promotion_explain">
249                             <a href="#">海森那尔极品耳机绝对不容错过！</a>
250                         </div>
251                         <div id="index_center_promotion">
252                             <img src="img/promotion7.jpg" />
253                         </div>
254 
255                         <div id="index_center_promotion">
256                             <img src="img/promotion8.jpg" />
257                         </div>
258 
259                         <div id="index_center_promotion">
260                             <img src="img/promotion9.jpg" />
261                         </div>
262                         <div id="index_center_promotion_explain">
263                             <a href="#">
264                                 亚马逊随时阅读，随时记录，时尚最佳选择！</a>
265                         </div>
266                         <div id="index_center_promotion_explain">
267                             <a href="#">优雅相框</a>
268                         </div>
269                         <div id="index_center_promotion_explain">
270                             <a href="#">IBM 2009最新上网本，特色尽显</a>
271                         </div>
272                     </div>
273                 </div>
274                 <div id="index_right">
275                     <div id="index_right_top">
276 
277                     </div>
278                     <div id="index_right_cen">
279                         <div id="index_right_show">
280                             <img src="img/show1.jpg" />
281                         </div>
282                         <div id="index_right_explain">
283                             <a href="#">大牌狂降价，三折直送</a>
284                         </div>
285                         <div id="index_right_show">
286                             <img src="img/show2.jpg" />
287                         </div>
288                         <div id="index_right_explain">
289                             <a href="#">加量不加价，你值得拥有</a>
290                         </div>
291                         <div id="index_right_show">
292                             <img src="img/show3.jpg" />
293                         </div>
294                         <div id="index_right_explain">
295                             <a href="#">黑眼圈推荐，美白不停</a>
296                         </div>
297                         <div id="index_right_show">
298                             <img src="img/show4.jpg" />
299                         </div>
300                         <div id="index_right_explain">
301                             <a href="#">瘦身狂潮风，修形之选</a>
302                         </div>
303                     </div>
304                     <div id="index_right_bot">
305                     </div>
306 
307                 </div>
308             </div>
309         </div>
310     </body>
311 
312 </html>

bottom

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>贵美商城</title>
 7         <link rel="stylesheet" type="text/css" href="css/bottom.css" />
 8     </head>
 9 
10     <body>
11         <div id="global">
12             <div id="bottom">友情链接：&nbsp;&nbsp;
13                 <a href="#">百度</a> |
14                 <a href="#">Google</a> |
15                 <a href="#">雅虎</a> |
16                 <a href="#">淘宝</a> |
17                 <a href="#">拍拍</a> |
18                 <a href="#">易趣</a> |
19                 <a href="#">当当</a> |
20                 <a href="#">京东商城</a> |
21                 <a href="#">迅雷</a> |
22                 <a href="#">新浪</a> |
23                 <a href="#">网易</a> |
24                 <a href="#">搜狐</a> |
25                 <a href="#">猫扑</a> |
26                 <a href="#">开心网</a> |
27                 <a href="#">新华网</a> |
28                 <a href="#">凤凰网</a><br />
29                 <hr /> COPYRIGHT &copy; 2003-2010
30                 <a href="#">北京市贵美商城有限公司</a> ALL RIGHT RESERVED<br /> 热线：400-66-13060 Email:service@prd.com<br /> ICP：
31                 <a href="#">沪ICP备05021104号</a><br />
32                 <img src="img/img1.gif" alt="alt" />
33                 <img src="img/img2.gif" alt="alt" />
34                 <img src="img/img3.gif" alt="alt" />
35                 <img src="img/img4.gif" alt="alt" />
36             </div>
37         </div>
38     </body>
39 
40 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>贵美注册</title>
 7         <link rel="stylesheet" type="text/css" href="css/index.css"/>
 8         <link rel="stylesheet" type="text/css" href="css/login.css" />
 9     </head>
10 
11     <body>
12         <div id="global">        
13         <iframe src="head.html" width="980px" height="130px" frameborder="0" scrolling="no"></iframe>
14         <div id="center">
15             <div id="center_left">
16                 
17             </div>
18             <div id="center_right">
19                 
20             </div>
21         </div>
22         <iframe src="bottom.html" width="980px" height="140px" frameborder="0" scrolling="no"></iframe>
23 </div>
24     </body>
25 
26 </html>

user_help

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>用户帮助</title>
  7         </script>
  8         <link rel="stylesheet" type="text/css" href="css/index.css" />
  9         <link rel="stylesheet" type="text/css" href="css/user_help.css" />
 10     </head>
 11 
 12     <body>
 13         <div id="global">
 14             <iframe src="head.html" width="980px" height="130px" frameborder="0" scrolling="no"></iframe>
 15             <div id="center">
 16                 <div id="user_help_left">
 17                     <div id="user_help_left_top">
 18                     </div>
 19                     <div id="user_help_left_bot">
 20                         <ul>
 21                             <li>
 22                                 <a href="#regsiter"><img src="img/help_left_1.jpg" /> 点击注册
 23                                     <br/> 认证中心
 24                                     <br />
 25                                 </a><br/></li>
 26                             <li>
 27                                 <a href="#sale"><img src="img/help_left_2.jpg" /> 安全中心
 28                                     <br/> 物流中心
 29                                     <br/> 资金流动
 30                                     <br/> 处理纠纷
 31                                     <br/>
 32                                 </a><br/></li>
 33                             <li>
 34                                 <a href="#buy"><img src="img/help_left_3.jpg" /> 咨询
 35                                     <br /> 投诉
 36                                     <br /> 举报
 37                                     <br /> 退款
 38                                     <br />
 39                                 </a><br/></li>
 40                             <li>
 41                                 <a href="#person"><img src="img/help_left_4.jpg" /></a><br/></li>
 42                         </ul>
 43                     </div>
 44                 </div>
 45                 <div id="user_help_right">
 46                     <div id="regsiter">
 47                         <ul>
 48                             <li class="regsiter_1">知识堂首页 >> 注册＆认证</li>
 49                             <li class="regsiter_2"><img src="img/help_right_2.jpg" /></li>
 50                             <li class="regsiter_3">享受贵美网免费网上交易乐趣，并且在超人气的社区尽情交流您的网上购物经验，您需要先注册成为贵美的会员，具体的步骤如下：</li>
 51                             <li class="regsiter_4"><img src="img/help_right_1.jpg" /></li>
 52                             <li class="regsiter_5">
 53                                 <a href="#">如何激活会员名？</a>
 54                             </li>
 55                             <li class="regsiter_5">
 56                                 <a href="#">如何注册贵美会员？</a>
 57                             </li>
 58                             <li class="regsiter_5">
 59                                 <a href="#">注册时密码设置有什么要求？</a>
 60                             </li>
 61                             <li class="regsiter_5">
 62                                 <a href="#">贵美认证</a>
 63                             </li>
 64                             <li class="regsiter_5">
 65                                 <a href="#">为什么校验码明明是对的，却提示我输入错误？</a>
 66                             </li>
 67                         </ul>
 68 
 69                     </div>
 70                     <div id="sale">
 71                         <ul>
 72                             <li class="regsiter_1">知识堂首页 >> 商家帮助</li>
 73                             <li class="regsiter_2"><img src="img/help_right_2.jpg" /></li>
 74                             <li class="regsiter_3">做贵美网的商家，拥有自己的个性小店，您需要了解贵美网上交易要点，请看出售商品的步骤：</li>
 75                             <li><img src="img/help_right_4.jpg" /></li>
 76                         </ul>
 77                     </div>
 78                     <div id="buy">
 79                         <ul>
 80                             <li class="regsiter_1">知识堂首页 >> 商家帮助</li>
 81                             <li class="regsiter_2"><img src="img/help_right_2.jpg" /></li>
 82                             <li class="regsiter_3">享受贵美网免费网上购物乐趣，您需要了解贵美贝的网上安全交易流程和网上购物的4步曲：</li>
 83                             <li class="buy_1">网上安全交易流程如下：</li>
 84                             <li class="buy_2"><img src="img/help_right_5.jpg" /></li>
 85                             <li class="buy_1">客户交易演示4步曲：：</li>
 86                             <li class="buy_2"><img src="img/help_right_6.jpg" /></li>
 87                         </ul>
 88                     </div>
 89                     <div id="person">
 90                         <legend>个人资料修改</legend>
 91                         <p><label for="email">常用邮箱：</label><input type="text" value="请输入邮箱账号" /></p>
 92                         <p><label for="password">密码：</label><input type="password" /></p>
 93                         <p><label for="password">确认密码：</label><input type="password" /></p>
 94                         <p><label for="name">昵称：</label><input type="text" value="请输入昵称" /></p>
 95                         <p><label for="interest">兴趣标签</label></p>
 96                         <input type="checkbox" value="" /> 新闻
 97                         <input name="" type="checkbox" /> 娱乐
 98                         <input name="" type="checkbox" /> 文化
 99                         <input name="" type="checkbox" /> 体育
100                         <input name="" type="checkbox" /> IT
101                         <input name="" type="checkbox" /> 财经
102                         <input name="" type="checkbox" /> 时尚
103                         <input name="" type="checkbox" /> 汽车
104                         <input name="" type="checkbox" /> 房产
105                         <input name="" type="checkbox" /> 生活
106                         </p>
107                         <p><input type="button" value="修改成功" />
108                             </fieldset>
109                     </div>
110                 </div>
111             </div>
112             <iframe src="bottom.html" width="980px" height="140px" frameborder="0" scrolling="no"></iframe>
113         </div>
114     </body>
115 
116 </html>

以下是css

bottom.css

 1 * {
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 
 6 #global {
 7     width: 980px;
 8     height: 900px;
 9     margin: auto;
10     font: normal 12px Tahoma, 宋体;
11 }
12 
13 
14 /*底部样式*/
15 
16 #global #bottom {
17     width: 980px;
18     height: 140px;
19     text-align: center;
20     line-height: 20px;
21     clear: both;
22     float: left;
23 }
24 #global #bottom a{
25     color: black;
26     text-decoration: none;
27 }
28 #global #bottom a:hover{
29     color: red;
30 }

center.css

  1 * {
  2     margin: 0px;
  3     padding: 0px;
  4 }
  5 
  6 #global {
  7     width: 980px;
  8     height: 900px;
  9     margin: auto;
 10     font: normal 12px Tahoma, 宋体;
 11 }
 12 
 13 
 14 /*中间样式*/
 15 
 16 #global #center {
 17     width: 980px;
 18     height: 630px;
 19     background: url(../img/bg.gif) no-repeat;
 20 }
 21 
 22 #global #center #index_left {
 23     width: 200px;
 24     height: 620px;
 25     float: left;
 26     margin-top: 30px;
 27 }
 28 
 29 #global #center #index_left #index_left_jydq {
 30     margin-top: 19px;
 31     margin-left: 15px;
 32     color: coral;
 33     float: left;
 34     width: 225px;
 35 }
 36 
 37 #global #center #index_left ul li {
 38     list-style: none;
 39     float: left;
 40     width: 60px;
 41     margin-top: 8px;
 42     margin-left: 2px;
 43 }
 44 
 45 #global #center #index_left ul li a {
 46     text-decoration: none;
 47     color: black;
 48 }
 49 
 50 #global #center #index_center {
 51     width: 543px;
 52     height: 630px;
 53     float: left;
 54 }
 55 
 56 #global #center #index_center #index_center_top {
 57     width: 540px;
 58     height: 200px;
 59     margin-left: 12px;
 60 }
 61 
 62 #global #center #index_center #index_center_bot {
 63     width: 543px;
 64     height: 400px;
 65     float: left;
 66     margin-top: 33px;
 67     margin-left: 30px;
 68 }
 69 
 70 #global #center #index_center #index_center_bot #index_center_promotion {
 71     width: 160px;
 72     height: 80px;
 73     float: left;
 74     background-repeat: no-repeat;
 75     text-align: center;
 76     line-height: 80px;
 77     margin-top: 25px;
 78 }
 79 
 80 #global #center #index_center #index_center_bot #index_center_promotion_explain {
 81     float: left;
 82     width: 160px;
 83     height: 22px;
 84     line-height: 22px;
 85     text-align: center;
 86     margin-top: 7px;
 87 }
 88 
 89 #global #center #index_center #index_center_bot #index_center_promotion_explain a {
 90     color: black;
 91     text-decoration: none;
 92 }
 93 
 94 #global #center #index_center #index_center_bot #index_center_promotion_explain a:hover {
 95     color: orange;
 96 }
 97 
 98 #global #center #index_right {
 99     width: 235px;
100     height: 620px;
101     float: right;
102 }
103 
104 #global #center #index_right #index_right_top {
105     width: 245px;
106     height: 173px;
107 }
108 
109 #global #center #index_right #index_right_cen {
110     width: 245px;
111     height: 263px;
112 }
113 
114 #global #center #index_right #index_right_cen #index_right_show {
115     background-repeat: no-repeat;
116     width: 50px;
117     height: 41px;
118     margin-left: 30px;
119     margin-top: 20px;
120     float: left;
121 }
122 
123 #global #center #index_right #index_right_cen #index_right_explain {
124     width: 157px;
125     height: 41px;
126     float: right;
127     font-size: 8px;
128     margin-top: 25px;
129     margin-left: 8px;
130 }
131 
132 #global #center #index_right #index_right_cen #index_right_explain a {
133     text-decoration: none;
134     color: black;
135 }
136 
137 #global #center #index_right #index_right_cen #index_right_explain a:hover {
138     color: orange;
139 }
140 
141 #global #center #index_right #index_right_bot {
142     width: 245px;
143     height: 195px;
144 }

head.css
  1 * {
  2     margin: 0px;
  3     padding: 0px;
  4 }
  5 
  6 #global {
  7     width: 980px;
  8     height: 900px;
  9     margin: auto;
 10     font: normal 12px Tahoma, 宋体;
 11 }
 12 
 13 
 14 /*头部样式*/
 15 
 16 #global #top {
 17     width: 980px;
 18     height: 130px;
 19     background: url(../img/h_bg.jpg) no-repeat -22px 0px;
 20 }
 21 
 22 #global #top #logo {
 23     width: 368px;
 24     height: 79px;
 25     float: left;
 26 }
 27 
 28 #global #top #rightmenu {
 29     width: 470px;
 30     height: 20px;
 31     float: right;
 32     margin-top: 12px;
 33 }
 34 
 35 #global #top #rightmenu ul li {
 36     list-style: none;
 37     width: 55px;
 38     height: 20px;
 39     float: left;
 40     text-align: center;
 41     line-height: 20px;
 42 }
 43 
 44 #global #top #rightmenu ul li a {
 45     text-decoration: none;
 46     color: black;
 47 }
 48 
 49 #global #top #rightmenu ul .pic {
 50     width: 36px;
 51     background: url(../img/icon.gif) no-repeat;
 52 }
 53 
 54 #global #top #rightmenu ul .shop {
 55     background-position: 2px -2px;
 56 }
 57 
 58 #global #top #rightmenu ul .help {
 59     background-position: -39px -2px;
 60 }
 61 
 62 #global #top #rightmenu ul .jrsc {
 63     background-position: -80px -2px;
 64 }
 65 
 66 #global #top #rightmenu ul .index {
 67     background-position: -122px -2px;
 68 }
 69 
 70 #global #top #rightmenu ul .btn {
 71     width: 48px;
 72     background-position: 0px -28px;
 73 }
 74 
 75 #global #top #welcome {
 76     width: 180px;
 77     height: 20px;
 78     margin: auto;
 79     position: relative;
 80     left: 130px;
 81     top: 2px;
 82     clear: both;
 83 }
 84 
 85 #global #top #mainmenu {
 86     width: 980px;
 87     height: 20px;
 88     clear: both;
 89 }
 90 
 91 #global #top #mainmenu ul li {
 92     list-style: none;
 93     float: left;
 94     width: 84px;
 95     height: 30px;
 96     text-align: center;
 97     line-height: 30px;
 98     position: relative;
 99 }
100 
101 #global #top #mainmenu ul li #search {
102     width: 157px;
103     height: 21px;
104     position: relative;
105     top: -3px;
106     left: 70px;
107 }
108 
109 #global #top #mainmenu ul #btn {
110     width: 69px;
111     height: 21px;
112     position: relative;
113     top: -3px;
114     left: 140px;
115     cursor: pointer;
116 }
117 
118 #global #top #mainmenu ul li a {
119     display: block;
120     font-size: 15px;
121     color: black;
122     text-decoration: none;
123 }
124 
125 #global #top #mainmenu ul li a:hover {
126     background: url(../img/nav_bg.gif) no-repeat 2px 0px;
127     display: block;
128 }

index.css

 1 * {
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 
 6 #global {
 7     width: 980px;
 8     height: 900px;
 9     margin: auto;
10     font: normal 12px Tahoma, 宋体;
11 }

 1 * {
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 
 6 #global {
 7     width: 980px;
 8     height: 900px;
 9     margin: auto;
10     font: normal 12px Tahoma, 宋体;
11 }
12 #center{
13     background: url(../img/login_bg.gif) no-repeat;
14     width: 980px;
15     height: 138px;
16 }

user_help.css

  1 #global #center {
  2     width: 980px;
  3     height: 630px;
  4     margin-bottom: -80px;
  5     margin-top: 5px;
  6 }
  7 
  8 #global #center #user_help_left {
  9     width: 196px;
 10     height: 550px;
 11     float: left;
 12     background: url(../img/help_left.jpg) no-repeat;
 13 }
 14 
 15 #global #center #user_help_left #user_help_left_top {
 16     width: 196px;
 17     height: 185px;
 18     float: left;
 19 }
 20 
 21 #global #center #user_help_left #user_help_left_bot {
 22     width: 196px;
 23     height: 365px;
 24     float: left;
 25 }
 26 
 27 #global #center #user_help_left ul {
 28     list-style: none;
 29 }
 30 
 31 #global #center #user_help_left ul li {
 32     width: 158px;
 33     height: 35px;
 34     background-position: no-repeat;
 35     margin-left: 10px;
 36     margin-top: -5px;
 37 }
 38 
 39 #global #center #user_help_left a {
 40     width: 158px;
 41     height: 35px;
 42     font-size: 15px;
 43     color: orangered;
 44     font-weight: bold;
 45     text-align: center;
 46     line-height: 30px;
 47     float: left;
 48     display: block;
 49     text-decoration: none;
 50     overflow: hidden;
 51 }
 52 
 53 #global #center #user_help_left a:hover {
 54     height: auto;
 55 }
 56 
 57 #global #center #user_help_right {
 58     width: 784px;
 59     height: 550px;
 60     float: right;
 61     overflow: hidden;
 62 }
 63 
 64 #global #center #user_help_right #regsiter,
 65 #sale,
 66 #buy,
 67 #person {
 68     width: 782px;
 69     height: 548px;
 70     border: 1px solid red;
 71 }
 72 
 73 #global #center #user_help_right #regsiterul {
 74     list-style: none;
 75 }
 76 
 77 #global #center #user_help_right .regsiter_1 {
 78     width: 782px;
 79     height: 90px;
 80     font-size: 23px;
 81     font-weight: bold;
 82     line-height: 90px;
 83     margin-left: 10px;
 84 }
 85 
 86 #global #center #user_help_right .regsiter_2 {
 87     width: 782px;
 88     height: 10px;
 89     line-height: 10px;
 90     margin-left: 10px;
 91 }
 92 
 93 #global #center #user_help_right .regsiter_3 {
 94     width: 740px;
 95     height: 60px;
 96     font-size: 16px;
 97     line-height: 20px;
 98     margin-top: 10px;
 99     margin-left: 10px;
100 }
101 
102 #global #center #user_help_right #regsiter ul .regsiter_4 {
103     width: 782px;
104     height: 60px;
105     line-height: 20px;
106     margin-top: 10px;
107     margin-left: 10px;
108 }
109 
110 #global #center #user_help_right #regsiter ul .regsiter_5 {
111     width: 740px;
112     height: 20px;
113     background: url(../img/help_right_3.jpg) no-repeat;
114     margin-left: 10px;
115 }
116 
117 #global #center #user_help_right #regsiter ul .regsiter_5 a {
118     font-size: 15px;
119     line-height: 20px;
120     margin-left: 10px;
121     text-decoration: none;
122     color: black;
123 }
124 
125 #global #center #user_help_right #regsiter ul .regsiter_5 a:hover {
126     color: orange;
127 }
128 
129 #global #center #user_help_right #buy .buy_1 {
130     width: 782px;
131     height: 20px;
132     line-height: 10px;
133     font-size: 18px;
134     font-weight: bold;
135     margin-left: 10px;
136     margin-top: -10px;
137 }
138 
139 #global #center #user_help_right #buy .buy_2 {
140     width: 782px;
141     height: 120px;
142     line-height: 120px;
143     margin-left: 10px;
144 }
145 
146 #global #center #user_help_right #person {
147     width: 782px;
148     height: 548px;
149     font-size: 25px;
150     line-height: 60px;
151 }