仿製的京東界面

時間 2020-06-29

標籤仿製京東界面简体版

原文原文鏈接

用html css 以及 javascript仿製的京東頁面。javascript

html.css和js代碼在如下連接中。css

https://pan.baidu.com/s/11p-kEUt_P-vhedNvvzTXJw 　　密碼：j171html

如下爲html頁面代碼java

  1 <!DOCTYPE html>
  2 <head>
  3 <meta charset="utf-8">
  4 <link rel="stylesheet" type="text/css" href="JingDong\JingDong.css">
  5 <style>
  6 
  7 </style>
  8 </head>
  9 <body>
 10 <div class="header">
 11     <div class="nav">
 12         <img id="hicon1" src="JingDong\img\hicon1.png"><!--這裏也放進一個div可能會比較好-->
 13         <div class="left_nav">京東首頁</div>
 14         <div class="right_nav">
 15             <ul>
 16                 <li><a href="#">你好，請登陸</a> <a href="#" id="register">免費註冊</a></li>
 17                 <li><img src="JingDong\img\sep.png"></li><!--若是在Li中插入一個圖片，那麼最好將兩個div放入一個li中，以避免受到li自己的外邊框的影響-->
 18                 <li>個人訂單</li>
 19                 <li><img src="JingDong\img\sep.png"></li>
 20                 <li>個人京東</li>
 21                 <li><img src="JingDong\img\sep.png"></li>
 22                 <li>京東會員</li>
 23                 <li><img src="JingDong\img\sep.png"></li>
 24                 <li>企業採購</li>
 25                 <li><img src="JingDong\img\sep.png"></li>
 26                 <li>客戶服務</li>
 27                 <li><img src="JingDong\img\sep.png"></li>
 28                 <li>網站導航</li>
 29                 <li><img src="JingDong\img\sep.png"></li>
 30                 <li>手機京東</li>
 31             </ul>
 32         </div>
 33     </div>
 34 </div>
 35 <div id="logo">
 36     <div id="logoImg" class="logoCon">
 37         <img src="JingDong\img\logo.png">
 38         <p style="float:right;font-size:18px;color:#666;margin-top:35px;margin-right:150px">全球售</p>
 39     </div>
 40     <div id="logoSear" class="logoCon">
 41         <div class="form">
 42             <div id="input">
 43                 <div id="infra"><form name="search" action="#"><input type="text" style="width:500px;height:30px;border:none;font-size:16px;"></form></div>
 44                 <div id="searIcon"><img src="JingDong\img\searIcon.png" width="75px" height="30px"></div>
 45             </div>
 46         </div>
 47         <div id="seLabel"><!--也能夠用一排span來實現，span是inline元素，不須要float-->
 48             <ul>
 49                 <li>本命年</li>
 50                 <li>行車記錄儀</li>
 51                 <li>羽絨服</li>
 52                 <li>新年禮物</li>
 53                 <li>華爲</li>
 54                 <li>小家電</li>
 55             </ul>
 56         </div>
 57     </div>
 58     <div id="logoCart" class="logoCon">
 59         <div id="mycart">
 60             <div id="cartCount"><img src="JingDong\img\cartCount.png" width="15px" height="15px"></div>
 61             <span>個人購物車</span>
 62             <img src="JingDong\img\cart.png" width="15px" height="15px">
 63         </div>
 64         <div id="mycartCon">
 65             很抱歉，購物車中什麼都沒有。
 66         </div>
 67     </div>
 68 </div>
 69 <div id="mainNavHead">
 70     <!--<img src="JingDong\img\NavBack.jpg" height="442px" width="100%">-->
 71     <div id="cateTi">
 72         <div class="menuIcon"></div>
 73         <div id="mainNavHeadTxt">商品分類</div>
 74     </div>
 75     <div id="navLabel">
 76         <ul>
 77             <li>匠心中國</li>
 78             <li>男士優選</li>
 79             <li>中國質造</li>
 80             <li>新年禮品</li>
 81             <li>智能生活</li>
 82             <li>兒童專區</li>
 83         </ul>
 84     </div>
 85 </div>
 86 <div id="mainNavBody">
 87     <div id="cateCon">
 88         <ul>
 89             <li>家用電器</li>
 90             <li>手機通信</li>
 91             <li>數碼影音</li>
 92             <li>電腦辦公</li>
 93             <li>居家生活/家裝建材</li>
 94             <li>男裝/女裝/童裝/內衣</li>
 95             <li>男鞋/女鞋/鐘錶/珠寶</li>
 96             <li>運動戶外</li>
 97             <li>汽車用品</li>
 98             <li>母嬰/玩具樂器</li>
 99             <li>禮品箱包/計生保健</li>
100             <li>圖書</li>
101         </ul>
102     </div>
103     <div id="intro">
104         <div id="login_img"><img src="JingDong\img\login_icon.jpg"></div>
105         <div id="welcome">HI，歡迎來到京東</div>
106         <div id="login_op"><a href="#">登陸</a> | <a href="#">註冊</a></div>
107         <div id="guide_new">新人指南</div>
108         <div id="pay_info"><img src="JingDong\img\pay_info.png"></div>
109         <div id="payTxt"><div id="payTxtTi">京東全球售 一站通全球</div><div id="payTxtCon">輕鬆直郵全球200+國家和地區，爲全世界的華人，挑選優質的京東好店、提供精選的京東自營商品。</div></div>
110     </div>
111 </div>
112 <div id="mainContent">
113     <div id="seckill">
114         <div id="seckillTime">
115             <div id="seckillTimeIcon"><img src="JingDong\img\alarm.png" height="40px" width="40px"></div><div id="seckillTimeTxt">京東秒殺</div>
116             <div id="seckillTimeRemind">距離本場結束還有</div>
117             <div id="seckillTimeAlarm">
118                 <ul>
119                     <li class="num" style="margin-right:5px;">1</li>
120                     <li class="num">1</li>
121                     <li class="colon">:</li>
122                     <li class="num" style="margin-right:5px;">1</li>
123                     <li class="num">1</li>
124                     <li class="colon">:</li>
125                     <li class="num" style="margin-right:5px;">1</li>
126                     <li class="num">1</li>
127                 </ul>
128             </div>
129         </div>
130         <div id="seckillCon">
131             <div class="con">
132                 <div class="pic"><img class="pic_con" src="JingDong\img\con1.jpg" width="105px" height="105px"></div>
133                 <div class="txt">三星(SAMSUNG) 960 EVO 250G M.2 NVMe 固態硬盤</div>
134                 <div class="price"><span style="font-size:24px;color:#ff0000;">&yen;799</span><span style="float:right;color:#666;text-decoration:line-through">&yen;969</span></div>
135             </div>
136             <div class="con">
137                 <div class="pic"><img class="pic_con" src="JingDong\img\con2.jpg" width="105px" height="105px"></div>
138                 <div class="txt">三星(SAMSUNG) 960 EVO 250G M.2 NVMe 固態硬盤</div>
139                 <div class="price"><span style="font-size:24px;color:#ff0000;">&yen;799</span><span style="float:right;color:#666;text-decoration:line-through">&yen;969</span></div>
140             </div>
141             <div class="con">
142                 <div class="pic"><img class="pic_con" src="JingDong\img\con3.jpg" width="105px" height="105px"></div>
143                 <div class="txt">三星(SAMSUNG) 960 EVO 250G M.2 NVMe 固態硬盤</div>
144                 <div class="price"><span style="font-size:24px;color:#ff0000;">&yen;799</span><span style="float:right;color:#666;text-decoration:line-through">&yen;969</span></div>
145             </div>
146             <div class="con">
147                 <div class="pic"><img class="pic_con" src="JingDong\img\con4.jpg" width="105px" height="105px"></div>
148                 <div class="txt">三星(SAMSUNG) 960 EVO 250G M.2 NVMe 固態硬盤</div>
149                 <div class="price"><span style="font-size:24px;color:#ff0000;">&yen;799</span><span style="float:right;color:#666;text-decoration:line-through">&yen;969</span></div>
150             </div>
151             <div class="con">
152                 <div class="pic"><img class="pic_con" src="JingDong\img\con5.jpg" width="105px" height="105px"></div>
153                 <div class="txt">三星(SAMSUNG) 960 EVO 250G M.2 NVMe 固態硬盤</div>
154                 <div class="price"><span style="font-size:24px;color:#ff0000;">&yen;799</span><span style="float:right;color:#666;text-decoration:line-through">&yen;969</span></div>
155             </div>
156             <div class="more">
157                 <div><img src="JingDong\img\con6.webp.jpg"></div>
158             </div>
159         </div>
160     </div>
161     <div id="mainMol1">
162         <div id="Mol1_ti"><b style="font-size:24px;">本週大牌</b> 品牌好物一站購</div>
163         <div id="Mol1_con">
164             <div class="con1"><img src="JingDong\img\mol1_con1.jpg" width="407px" height="480px"></div>
165             <div class="con2"><img src="JingDong\img\mol1_con2.jpg"></div>
166             <div class="con3"><img src="JingDong\img\mol1_con3.jpg"></div>
167             <div class="con4"><img src="JingDong\img\mol1_con4.jpg"></div>
168             <div class="con5"><img src="JingDong\img\mol1_con5.jpg"></div>
169             <div class="con6"><img src="JingDong\img\mol1_con6.jpg"></div>
170         </div>
171     </div>
172 </div>
173 <div id="pageFoot">
174     <div id="Trait">
175         <div id="T_td1">
176             <div class="img"><img src="JingDong\img\fcon1.png"></div>
177             <div class="text">品類齊全，輕鬆購物</div>
178         </div>
179         <div id="T_td2">
180             <div class="img"><img src="JingDong\img\fcon2.png"></div>
181             <div class="text">多倉直髮，極速配送</div>
182         </div>
183         <div id="T_td3">
184             <div class="img"><img src="JingDong\img\fcon3.png"></div>
185             <div class="text">正品行貨，精緻服務</div>
186         </div>
187         <div id="T_td4">
188             <div class="img"><img src="JingDong\img\fcon4.png"></div>
189             <div class="text">每天低價，暢選無憂</div>
190         </div>
191     </div>
192     <div id="Service">
193         <div id="S_td1">
194             <div class="title">購物指南</div>
195             <div class="con">
196                 <ul>
197                     <li>購物流程</li>
198                     <li>會員介紹</li>
199                     <li>生活旅行/團購</li>
200                     <li>常見問題</li>
201                     <li>你們電</li>
202                     <li>聯繫客服</li>
203                 </ul>
204             </div>
205         </div>
206         <div id="S_td2">
207             <div class="title">配送方式</div>
208             <div class="con">
209                 <ul>
210                     <li>上門自提</li>
211                     <li>211限時達</li>
212                     <li>配送服務查詢</li>
213                     <li>配送費收取標準</li>
214                     <li>海外配送</li>
215                 </ul>
216             </div>
217         </div>
218         <div id="S_td3">
219             <div class="title">支付方式</div>
220             <div class="con">
221                 <ul>
222                     <li>貨到付款</li>
223                     <li>在線支付</li>
224                     <li>分期付款</li>
225                     <li>郵局匯款</li>
226                     <li>公司轉帳</li>
227                 </ul>
228             </div>
229         </div>
230         <div id="S_td4">
231             <div class="title">售後服務</div>
232             <div class="con">
233                 <ul>
234                     <li>售後政策</li>
235                     <li>價格保護</li>
236                     <li>退款說明</li>
237                     <li>返修/退換貨</li>
238                     <li>取消訂單</li>
239                 </ul>
240             </div>
241         </div>
242         <div id="S_td5">
243             <div class="title">特點服務</div>
244             <div class="con">
245                 <ul>
246                     <li>奪寶島</li>
247                     <li>DIY裝機</li>
248                     <li>延保服務</li>
249                     <li>京東E卡</li>
250                     <li>京東通訊</li>
251                     <li>京東JD+</li>
252                 </ul>
253             </div>
254         </div>
255     </div>
256     <div id="footMess">
257     </div>
258 </div>
259 
260 
261 <script src="JingDong/myJingDong.js"></script>
262 </body>
263 <html>

如下爲css樣式代碼web

  1 /*京東頁面練習的樣式*/
  2 *{
  3     margin:0;
  4     padding:0;
  5     font-size:12px;
  6 
  7 }
  8 
  9 div#mainContent{
 10     width:100%;
 11     background-color:#f7f7f7;
 12     min-width:1920px;
 13     padding-bottom:10px;
 14 }
 15 li{
 16     border:0px solid;
 17 }
 18 
 19 div.header{
 20     width:100%;
 21     min-width:1920px;    /*重要，保證瀏覽器窗口縮小時，div不隨着界面一同縮小，可是這個分辨率會超過一些瀏覽器默認的分辨率*/
 22     height:30px;
 23     background-image:url(img/headerback.png);
 24     background-size:100%;
 25 }
 26 .header .nav{
 27     height:30px;
 28     width:1220px;
 29     margin-left:auto;
 30     margin-right:auto;
 31 }
 32 .header .nav .left_nav{
 33     float:left;
 34     font-size:14px;
 35     text-align:center;
 36     line-height:30px;    /*使文本內容的行高和div的高度一致，實現垂直方向的居中*/
 37     color:#666;
 38     width:80px;
 39     height:30px;
 40 }
 41 .header .nav #hicon1{
 42     display:block;
 43     margin-top:7px;
 44     float:left;
 45 }
 46 .header .nav .right_nav{
 47     float:right;
 48     line-height:30px;
 49     width:800px;
 50     height:30px;
 51 }
 52 .header .nav .right_nav ul{
 53     list-style-type:none;
 54 }
 55 .header .nav .right_nav li{
 56     float:left;
 57     margin:0px 5px;
 58     font-size:14px;
 59     color:#666;
 60 }
 61 .header .nav .right_nav a{
 62     font-size:14px;
 63     color:#666;
 64     text-decoration:none;
 65 }
 66 .header .nav .right_nav #register{
 67     color:#ff0000;
 68 }
 69 /*--------------------------------------------------------------------------------*/
 70 div#logo{
 71     border:0px solid #ff0000;
 72     width:1220px;
 73     height:100px;
 74     margin-left:345px;/*這裏不採起自動居中，防止隨着頁面的放大縮小而致使div模塊的移動*/
 75 }
 76 #logo .logoCon{
 77     height:100px;
 78     float:left;
 79 }
 80 #logo #logoImg{
 81     width:400px;
 82 }
 83 #logo #logoSear{
 84     width:500px;
 85 }
 86 #logo #logoSear #input{
 87     float:left;
 88     border:2px solid #c91623;
 89     width:500px;
 90     height:30px;
 91     margin-top:23px;
 92 }
 93 #logo #logoSear #input #searIcon{
 94     float:left;
 95     width:75px;
 96     height:30px;    
 97 }
 98 #logo #logoSear #input #infra{
 99     width:425px;
100     height:30px;
101     float:left;
102 }
103 #logo #logoSear #seLabel{
104     float:left;
105     width:450px;
106     margin-top:5px;
107 }
108 #logo #logoSear #seLabel ul{
109     list-style-type:none;
110 }
111 #logo #logoSear #seLabel li{
112     float:left;
113     font-size:12px;
114     color:#666;
115     margin-right:10px;
116 }
117 #logo #logoCart{
118 }
119 #logo #logoCart #mycart{
120     border:1px solid #dedede;
121     height:30px;
122     width:140px;
123     margin-top:25px;
124     margin-left:75px;
125     background-color:#f9f9f9;
126     text-align:center;
127     line-height:30px;
128     position:relative;
129 }
130 #logo #logoCart #mycartCon{
131     margin-left:75px;
132     width:140px;
133     height:60px;
134     line-height:30px;
135     text-align:center;
136     border:1px solid #dedede;
137     background-color:#f9f9f9;
138     border-top:none;
139     display:none;
140 }
141 #logo #logoCart #mycart #cartCount{
142     position:absolute;
143     left:108px;
144 }
145 /*--------------------------------------------------------------------------------*/
146 div#mainNavHead{
147     position:relative;
148     width:100%;
149     height:30px;
150 }
151 
152 #mainNavHead #cateTi{
153     border:0px solid #ff0000;
154     float:left;
155     width:210px;
156     height:30px;
157     margin-left:345px;
158     background-color:#c91623;
159 }
160 /*用css繪製三條橫槓線，自行體會*/
161 #mainNavHead #cateTi .menuIcon{
162     width: 10px;
163     height: 0.5px;
164     border-top: 1px solid #ffffff;
165     border-bottom:1px solid #ffffff;
166     background-color: #ffffff;
167     padding: 3px 0px;
168     margin:9px;
169     background-clip:content-box;
170     float:left;
171 }
172 #mainNavHead #cateTi #mainNavHeadTxt{
173     float:left;
174     color:#ffffff;
175     line-height:30px;
176 }
177 #mainNavHead #navLabel{
178     position:absolute;    /*這裏用FLOAT不知爲什麼窗口縮小時會自動換行*/
179     top:0px;
180     left:555px;
181     width:785px;
182     height:30px;
183     
184 }
185 #mainNavHead #navLabel ul{
186     padding-left:20px;
187     margin-top:9px;
188     list-style-type:none;
189 }
190 #mainNavHead #navLabel li{
191     margin-right:40px;
192     float:left;
193 }
194 /*--------------------------------------------------------------------------------*/
195 div#mainNavBody{
196     border:0px solid #ff0000;
197     width:100%;
198     height:444px;
199     background-image:url(img/NavBack.jpg);
200     min-width:1920px;    
201     z-index:0;
202     position:relative;
203 }
204 /*
205 #mainNavBody #backImg{
206     border:1px solid #ff0000;
207     width:100%;
208     height:442px;
209 }
210 */
211 #mainNavBody #cateCon{
212     border:0px solid #ff0000;
213     float:left;
214     width:210px;
215     height:444px;
216     margin-left:345px;
217     z-index:1;
218     background-color:#fcfdfd;
219     opacity:0.9;
220 
221 }
222 #mainNavBody #cateCon ul{
223     list-style-type:none;
224     width:170px;
225     margin-left:20px;
226 }
227 #mainNavBody #cateCon li{
228     border-bottom:1px dotted #808080;
229     height:36px;
230     width:170px;
231     line-height:36px;
232 }
233 #mainNavBody #intro{
234     float:right;
235     width:210px;
236     height:444px;
237     z-index:0;
238     background-color:#ffffff;
239     position:relative;
240     right:345px;
241 }
242 #mainNavBody #intro #login_img{
243     width:50px;
244     height:50px;
245     margin:20px auto 0px;
246 }
247 #mainNavBody #intro #welcome{
248     font-size:14px;
249     font-weight:600;
250     text-align:center;
251     margin:10px 0px;
252 }
253 #mainNavBody #intro #login_op{
254     text-align:center;
255     color:#666;
256     margin:10px 0px;
257 }
258 #mainNavBody #intro #login_op a{
259     text-decoration:none;
260     color:#666;
261 }
262 #mainNavBody #intro #guide_new{
263     border:2px solid #c91623;
264     width:64px;
265     margin:10px auto;
266     text-align:center;
267     padding:5px;
268     color:#c91623;
269 }
270 #mainNavBody #intro #pay_info{
271     width:202px;
272     margin:15px auto;
273     
274 }
275 #mainNavBody #intro #payTxt{
276     width:170px;
277     margin:0 auto;
278 }
279 #mainNavBody #intro #payTxt #payTxtTi{
280     text-align:center;
281     margin:10px 0;
282     color:#666;
283     font-weight:600;
284 }
285 #mainNavBody #intro #payTxt #payTxtCon{
286     color:#999999;
287     line-height:20px;
288 }
289 /*--------------------------------------------------------------------------------*/
290 div#seckill{
291     border:0px solid #ff0000;
292     height:335px;
293     width:1230px;
294     margin-left:345px;
295     background-color:#ffffff;
296 }
297 #seckill #seckillTime{
298     border:0px solid #ff0000;
299     height:80px;
300     width:1230px;
301     background-color:#e8e2dd;
302 }
303 #seckill #seckillTime #seckillTimeIcon{
304     border:0px solid #ff0000;
305     height:45px;
306     width:50px;
307     margin-top:25px;
308     padding-left:5px;
309     padding-top:5px;
310     float:left;
311 }
312 #seckill #seckillTime #seckillTimeTxt{
313     border:0px solid #ff0000;
314     height:50px;
315     width:150px;
316     margin-top:25px;
317     float:left;
318     font-size:30px;
319     font-weight:bold;
320     line-height:50px;    
321     text-shadow:rgba(0,0,0,0.5) 1px 1px 2px; /*給文字設置拖影，重要！記住！*/
322 }
323 #seckill #seckillTime #seckillTimeRemind{
324     border:0px solid #ff0000;
325     height:50px;
326     width:160px;
327     margin-top:25px;
328     float:left;
329     font-size:18px;
330     color:#808080;
331     line-height:50px;    
332 }
333 #seckill #seckillTime #seckillTimeAlarm{
334     border:0px solid #ff0000;
335     float:left;
336     height:50px;
337     width:600px;
338     margin-top:25px;
339 }
340 #seckill #seckillTime #seckillTimeAlarm ul{
341     list-style-type:none;
342 }
343 #seckill #seckillTime #seckillTimeAlarm li{
344     float:left;
345 }
346 #seckill #seckillTime #seckillTimeAlarm .num{
347     border:0px solid #ff0000;
348     height:40px;
349     width:25px;
350     margin-top:5px;
351     font-size:18px;
352     font-weight:bold;
353     color:#c91623;
354     line-height:40px;    
355     text-align:center;
356     background-color:#ffffff;
357     text-shadow:rgba(0,0,0,0.5) 2px 2px 4px;
358 }
359 #seckill #seckillTime #seckillTimeAlarm .colon{
360     border:0px solid #ff0000;
361     height:40px;
362     width:10px;
363     margin-top:5px;
364     font-size:18px;
365     font-weight:bold;
366     color:#000000;
367     line-height:40px;    
368     text-align:center;
369 }
370 #seckill #seckillCon{
371     border:0px solid #ff0000;
372     height:255px;
373     width:1230px;
374 }
375 #seckill #seckillCon .con{
376     border-right:1px solid #e8e2dd;
377     height:255px;
378     width:204px;
379     float:left;
380     
381 }
382 #seckill #seckillCon .con .pic{
383     border:0px solid #ff0000;
384     height:155px;
385     width:205px;
386     text-align:center;
387 }
388 #seckill #seckillCon .con .pic .pic_con{
389     margin-top:25px;
390 }
391 #seckill #seckillCon .con .txt{
392     border:0px solid #ff0000;
393     height:50px;
394     width:155px;
395     margin:0 25px;
396     text-align:center;
397 }
398 #seckill #seckillCon .con .price{
399     border:0px solid #ff0000;
400     height:50px;
401     width:165;
402     line-height:50px;
403     margin:0 20px;
404 }
405 
406 /*--------------------------------------------------------------------------------*/
407 #mainMol1{
408     border:0px solid #ff0000;
409     width:1230px;
410     height:530px;
411     margin:0 auto;
412 }
413 #mainMol1 #Mol1_ti{
414     border:0px solid #ff0000;
415     width:1230px;
416     height:50px;
417     line-height:50px;
418     font-size:16px;
419 }
420 #mainMol1 #Mol1_con{
421     border:0px solid #ff0000;
422     width:1230px;
423     height:480px;
424 }
425 #mainMol1 #Mol1_con .con1{
426     border:0px solid #ff0000;
427     width:407px;
428     height:480px;
429     margin-right:10px;
430     float:left;
431 }
432 #mainMol1 #Mol1_con .con2{
433     border:0px solid #ff0000;
434     width:264px;
435     height:235px;
436     margin-right:10px;
437     margin-bottom:10px;
438     float:left;
439 }
440 #mainMol1 #Mol1_con .con3{
441     border:0px solid #ff0000;
442     width:264px;
443     height:235px;
444     margin-right:10px;
445     margin-bottom:10px;
446     float:left;
447 }
448 #mainMol1 #Mol1_con .con4{
449     border:0px solid #ff0000;
450     width:264px;
451     height:235px;
452 
453     float:left;
454 }#mainMol1 #Mol1_con .con5{
455     border:0px solid #ff0000;
456     width:264px;
457     height:235px;
458     margin-right:10px;
459     float:left;
460     
461 }#mainMol1 #Mol1_con .con6{
462     border:0px solid #ff0000;
463     width:264px;
464     height:235px;
465     float:left;
466 }
467 /*--------------------------------------------------------------------------------*/
468 #pageFoot{
469     width:100%;
470     min-width:1920px;
471     height:520px;
472     background-color:#eaeaea;
473 }
474 #pageFoot #Trait{
475     border-bottom:1px dotted #808080;
476     height:100px;
477     width:100%;
478     position:relative;
479 }
480 #pageFoot #Trait .img{
481     width:60px;
482     height:100px;
483     float:left;
484     text-align:center;
485     padding-top:30px;
486 }
487 #pageFoot #Trait .text{
488     width:240px;
489     height:100px;
490     font-size:20px;
491     font-weight:600;
492     line-height:100px;
493     float:left;
494 }
495 #pageFoot #Trait #T_td1{
496     position:absolute;
497     left:365px;
498     border:0px solid #ff0000;
499     width:300px;
500     height:100px;
501 }
502 
503 #pageFoot #Trait #T_td2{
504     position:absolute;
505     left:665px;
506     border:0px solid #ff0000;
507     width:600px;
508     height:100px;
509 }
510 #pageFoot #Trait #T_td3{
511     position:absolute;
512     left:965px;
513     border:0px solid #ff0000;
514     width:300px;
515     height:100px;
516 }
517 #pageFoot #Trait #T_td4{
518     position:absolute;
519     left:1265px;
520     border:0px solid #ff0000;
521     width:300px;
522     height:100px;
523 }
524 /*--------------------------------------------------------------------------------*/
525 #pageFoot #Service{
526     border-bottom:1px dotted #808080;
527     height:200px;
528     width:100%;
529     position:relative;
530 }
531 #pageFoot #Service .title{
532     height:50px;
533     width:240px;
534     font-size:16px;
535     font-weight:600;
536     line-height:50px;
537     color:#666;
538 }
539 #pageFoot #Service .con{
540     height:150px;
541     width:240px;
542     color:#666;
543 }
544 #pageFoot #Service ul{
545     list-style-type:none;
546 }
547 #pageFoot #Service li{
548     width:240px;
549     height:20px;
550 }
551 #pageFoot #Service #S_td1{
552     position:absolute;
553     left:405px;
554     border:0px solid #ff0000;
555     width:240px;
556     height:200px;
557 }
558 #pageFoot #Service #S_td2{
559     position:absolute;
560     left:645px;
561     border:0px solid #ff0000;
562     width:240px;
563     height:200px;
564 }
565 #pageFoot #Service #S_td3{
566     position:absolute;
567     left:885px;
568     border:0px solid #ff0000;
569     width:240px;
570     height:200px;
571 }
572 #pageFoot #Service #S_td4{
573     position:absolute;
574     left:1125px;
575     border:0px solid #ff0000;
576     width:240px;
577     height:200px;
578 }
579 #pageFoot #Service #S_td5{
580     position:absolute;
581     left:1365px;
582     border:0px solid #ff0000;
583     width:240px;
584     height:200px;
585 }

如下爲Js代碼瀏覽器

 1 var myCart = document.getElementById("mycart"),
 2     myCartCon = document.getElementById("mycartCon");
 3 
 4 myCart.onmouseover = function(){
 5     this.style.borderBottom = "none";
 6     myCartCon.style.display = "block";
 7 }
 8 myCartCon.onmouseover = function(){
 9     myCart.style.borderBottom = "none";
10     this.style.display = "block";
11 }
12 myCartCon.onmouseout = function(){
13     myCart.style.borderBottom = "1px solid #dedede";
14     this.style.display = "none";
15 }
16 myCart.onmouseout = function(){
17     this.style.borderBottom = "1px solid #dedede";
18     myCartCon.style.display = "none";
19 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。