仿制的京东界面
用html css 以及 javascript仿制的京东页面。
html.css和js代码在以下链接中。
https://pan.baidu.com/s/11p-kEUt_P-vhedNvvzTXJw 密码：j171
以下为html页面代码
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;">¥799</span><span style="float:right;color:#666;text-decoration:line-through">¥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;">¥799</span><span style="float:right;color:#666;text-decoration:line-through">¥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;">¥799</span><span style="float:right;color:#666;text-decoration:line-through">¥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;">¥799</span><span style="float:right;color:#666;text-decoration:line-through">¥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;">¥799</span><span style="float:right;color:#666;text-decoration:line-through">¥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样式代码
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 }
