基本页面首页代码
?<html xmlns="http://www.jiashiye.com/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>步行街網(wǎng)上商城</title> <style type="text/css"> <!-- *{ padding:0px; margin:0px; } html,body{ ?height:100%; ?background-image:url(image/beijing.jpg); ?background-repeat: repeat-x;? } .body { ?width: 100%; } .box { ?margin:auto; } .body .box .top { ?margin:auto; ?height: 161px; ?font-size:12px; ?color:#FFFFFF; ?float:left; } .body .box .top img { ?padding-top: 10px; } .body .box .top .top1 { ?height: 25px; ?width:460px; ?padding-top:10px; ?padding-left:5px; ?float:left; ?position: absolute; ?left: 95px; ?top: 1px; } .body .box .top .top1-r { ?width:480px; ?height:40px; ?float: left; ?position: absolute; ?left: 760px; ?top: 9px; } .body .box .top .top1-r ul { ?float: left; ?list-style-type: none; } .body .box .top .top1-r li { ?float: left; ?width: 70px; } .body .box .top .logo { ?height: 130px; ?width: 355px; ?position: absolute; ?left: 95px; ?top: 43px; } .STYLE5 { ?font-size: 36px; ?font-weight: bold; } .STYLE7 {font-size: 18px} .sousuo { ?height: 31px; ?width: 500px; ?position: absolute; ?left: 611px; ?top: 105px; ?background-image:url(image/sousuo.jpg); ?background-repeat: no-repeat; ?padding-left:30px; ?line-height:30px; ?font-size:12px; ?border:0px; } .body .box .daohang { ?float: left; ?height: 26px; ?width: 1154px; ?position: absolute; ?left: 95px; ?top: 166px; ?font-size:20px; ?color:#FFFFFF; } .body .box .daohang ul { ?float:left; ?list-style-type: none; } .body .box .daohang li { ?float: left; ?width: 130px; } .body .box .daohang .yibai { ?height: 30px; ?width: 182px; ?position: absolute; ?left: 973px; ?top: -4px; } .body .box .main .main-l { ?background-image: url(image/chanpinliebiao.png); ?background-repeat: no-repeat; ?width:197px; ?height:380px; ?position: absolute; ?left: 96px; ?top: 194px; } .body .box .main .main-l ul { ??? width:100px ?list-style-type: none; ?margin-top:50px; } .body .box .main .main-l li { ?width:100px; ?list-style-type: none; ?margin:auto; ?line-height:35px;
} .body .box .main .main-m { ?position: absolute; ?height: 375px; ?width: 764px; ?left: 291px; ?top: 196px; ?overflow:hidden; } .body .box .xianshiqinaggou { ?height: 381px; ?width: 196px; ?position: absolute; ?left: 1059px; ?top: 193px; ?background-image: url(image/chanpinliebiao2.png); ?background-repeat: no-repeat; } .body .box .main .xianshiqinaggou img{ ?padding-top:70px; ?padding-left:25px; ?height:280px; ?width: 150px; } .body .box .jiaju { ?position: absolute; ?left: 104px; ?top: 1955px; ?height: 163px; ?width: 1162px; } .body .box .meirong { ?height: 300px; ?width: 978px; ?position: absolute; ?left: 98px; ?top: 1426px; } .body .box .pinpaizhuangmai { ?height: 173px; ?width: 201px; ?position: absolute; ?left: 63px; ?top: 597px; }
.body .box .fuzhuang { ?height: 300px; ?width: 1157px; ?position: absolute; ?left: 98px; ?top: 896px; } .body .box .footer .tupian ul { ?position:absolute; ?float: left; ?width: 1020px; ?list-style-type: none; ?left: 80px; ?top: 7px; } .body .box .footer .tupian { ?position:absolute; ?left: 105px; ?top: 2471px; ?width:1165px; ?height:257px; } .body .box .footer .tupian ul li { ?float: left; ?height: 100px; ?width: 180px; ?list-style-type: none; ?padding:23px 10px; } .body .box .footer .footer-x ul { ?font-size:14px; ?color:#FF9933; ?float:left; ?list-style-type: none; } .body .box .footer .footer-x ul li { ?float: left; ?width:80px; } .body .box .footer .footer-x { ?height: 30px; ?width: 457px; ?position: absolute; ?left: 441px; ?top: 2664px; } .body .box .footer .footer-x .footer-xx { ?font-size:14px; ?height: 26px; ?width: 650px; ?position: absolute; ?left: -68px; ?top: 36px; }
.body .box .main .chanpin .zhutiluntan { ?height: 305px; ?width: 180px; ?position: absolute; ?left: 967px; ?top: 2px; ?border: 1px solid #3E3E3E;
} .body .box .main .chanpin { ?height: 322px; ?width: 1158px; ?position: absolute; ?left: 97px; ?top: 577px; }
#div0 { ?display: block; ?width: 950px; ?height:300px; ?margin-top: 10px; } #div1 { ?display: none; ?width: 950px; ?height:300px; ?margin-top: 10px; } #div2 { ?display: none; ?width: 950px; ?height:300px; ?margin-top: 10px; } #div3 { ?display: none; ?width: 950px; ?height:300px; ?margin-top: 10px; } #div4 { ?display: none; ?width: 950px; ?height:300px; ?margin-top: 10px; } #box1 { ?width: 950px; ?border: 1px solid #3E3E3E; ?
} #box1 ul{ ?list-style-type:none; ?width:950px; ?float:left; ?padding-left:10px; } #box1 ul .red{ ?width:175px; ?height:30px; ?line-height:5px; ?padding:15px 0px; ?border-bottom:3px solid #f00; ?float:left; ?text-align:center; } #box1 #div0 .box-contentul { ?float: left; ?width: 950px; ?padding-top: 10px; } #box1 #div0 .box-contentul li { ?float: left; ?width: 175px; ? } #box1 #div1 .box-contentul { ?float: left; ?width: 950px; ?padding-top:10px; } #box1 #div1 .box-contentul li { ?float: left; ?width: 175px; ? } #box1 #div2 .box-contentul { ?float: left; ?width: 950px; ?padding-top: 10px; } #box1 #div2 .box-contentul li { ?float: left; ?width: 175px; ? } #box1 #div3 .box-contentul { ?float: left; ?width: 950px; ?padding-top: 10px; } #box1 #div3 .box-contentul li { ?float: left; ?width: 175px; ? } #box1 #div4 .box-contentul { ?float: left; ?width: 950px; ?padding-top: 10px; } #box1 #div4 .box-contentul li { ?float: left; ?width: 175px; ? } #box1 img{ padding:5px 15px; } #box1 p{ width:138px; font-size:12px; padding:4px 8px; } .price{ color:#FF0000; } #box1 ul .normal{ ?width:175px; ?height:30px; ?line-height:10px; ?padding:15px 0; ?border-bottom:3px solid #282828; ?float:left; ?text-align:center; } #box1 ul a{ ?color:#393939; } #box1 ul .red a{ ?color:#F00; } #box1 ul .normal a{ ?color:#393939; } .STYLE12 { ?font-size: 24px; ?font-weight: bold; } .body .box .main .chanpin .zt-l ul { ?font-size: 14px; ?color:#333333; ?list-style-type: none; ?position:absolute; ?left:977px; ?top:36px; ?height: 258px; ?width: 165px; }
--> </style> <link type="text/css" rel="stylesheet" href="style.css"/> <script type="text/javascript" src="untitled.js"></script> </head>
<body> <div class="body"> ? <div class="box"> ?? <div class="top"> ? <div class="top1">您好，歡迎您來到步行街網(wǎng)上商城購(gòu)物！</div> ? <div class="top1-r"> ? ?<ul> ???<li>免費(fèi)注冊(cè) | </li> ???<li>登錄 | </li> ???<li>購(gòu)物車0件 | </li> ???<li>我的賬戶 | </li> ???<li>收藏夾 | </li> ???<li>幫助中心</li> ??</ul> ? </div> ? <div class="logo"> ??? <table width="389" border="0" cellspacing="0" cellpadding="0"> ???????? <tr> ?????????? <td width="80" rowspan="2"><img src="image/logo.png" /></td> ?????????? <td height="74" colspan="2" valign="bottom"><span class="STYLE5">步行街網(wǎng)上商城 </span></td> ???????? </tr> ???????? <tr> ?????????? <td width="247" align="center"><span class="STYLE7">www.buxingjiewssc.com </span></td> ?????????? <td width="62" align="center"> </td> ???????? </tr> ?????? </table> ? </div> ? <input type="text" class="sousuo" value="請(qǐng)搜索" οnclick="sousuo1(this)" οnblur="sousuo2(this)"/> ? <script type="text/javascript"> ? function sousuo1(a){ ? ???a.value=""; ?} ?function sousuo2(a){ ????a.value="請(qǐng)搜索"; ????a.style.color="#ccc"; ?} ?</script> ??? </div> ? <div class="daohang"> ??<ul> ???<li>?? 首頁(yè)???? </li> ???<li>品牌專賣? </li> ???<li>家具專賣? </li> ???<li>熱門推薦? </li> ???<li>商城論壇?? </li> ??</ul> ?<div class="yibai"><img src="image/menuBarRight.png" width="184" height="31" /></div> ?</div> ?? <div class="main"> ?? <div class="main-l"> ??<ul> ???<li><img src="image/fuzhuangyonghu.jpg" />服裝戶外</li> ???<li><img src="image/caizhuanghufu.jpg" />彩妝護(hù)膚</li> ???<li><img src="image/shipinjiushui.jpg" />食品酒水</li> ???<li><img src="image/jiajujiaju.jpg" />家具家居</li> ???<li><img src="image/shoushibaozhuang.jpg" />首飾包表</li> ???<li><img src="image/wenhuashenghuo.jpg" />文化生活</li> ???<li><img src="image/shoujishuma.jpg" />手機(jī)數(shù)碼</li> ???<li><img src="image/muyingyongpin.jpg" />母嬰用品</li> ???<li><img src="image/shechipinzhuanqu.jpg" />奢侈品裝飾</li> ??</ul> ?? </div> ?? <div class="main-m"> ?? ?<div id="pic"> ???<ul> ???<li><img src="image/banner_1.jpg" width="802" height="372" /></li> ???<li><img src="image/banner_1(1).jpg" width="802" height="372"/></li> ???<li><img src="image/banner_2.jpg" width="802" height="372"/></li> ???<li><img src="image/banner_2(1).jpg" width="802" height="372"/></li> ???<li><img src="image/banner_3.jpg" width="802" height="372"/></li> ???</ul> ??</div> ??<div id="tip"> ??<span>1</span> ??<span>2</span> ??<span>3</span> ??<span>4</span> ??<span>5</span>? ??</div> ?? </div> ?? <script type="text/javascript"> ?? ?changePic(802,0,5); ?? </script> ??? <div class="xianshiqinaggou"> ????? <img src="image/meizhouqianggoy.jpg" width="138" height="306" /></div> <div class="chanpin"> ?<div id="box1"> ? <ul> ??? ?<li class="red" οnmοuseοver="over(this,0)"><a href="#"><h2>瘋狂搶購(gòu)</h2></a></li> ??????? <li class="normal" οnmοuseοver="over(this,1)"><a href="#"><h2>熱賣商品</h2></a></li> ??????? <li class="normal" οnmοuseοver="over(this,2)"><a href="#"><h2>熱評(píng)商品</h2></a></li> ??????? <li class="normal" οnmοuseοver="over(this,3)"><a href="#"><h2>新品上架</h2></a></li> ??????? <li class="normal" οnmοuseοver="over(this,4)"><a href="#"><h2>猜您喜歡</h2></a></li> ? </ul> ? <div id="div0"> ??? <ul class="box-contentul"> ????? <li><img src="image/0a45ab09fe8f4a32a2044c2f630bb88b_P125.jpg" /><p>好主人好主狗糧</p><p>給寵物最好的關(guān)愛<br><span class="price">￥15.00</span></p></li> ????? <li><img src="image/2c7f2516d9f141ef8ad47cedef6614fc_P125.jpg" /><p>駱駝牌登山運(yùn)動(dòng)鞋</p><p>戶外運(yùn)動(dòng)者的最愛<br><span class="price">￥228.00</span></p></li> ????? <li><img src="image/1b64f149182a4ccba191b30135d1cfca_P125.jpg" /><p>格力士空調(diào)</p><p>空調(diào)中的引領(lǐng)者<br><span class="price">￥240.00</span></p></li> ????? <li><img src="image/1c081eef4f3648abaa7a942dde8cd96d_P125.jpg" /><p>佳能單反相機(jī)</p><p>攝影愛好者的必備物品<br><span class="price">￥2999.00</span></p></li> ????? <li><img src="image/04d6f4938121496cb8ed3f3efaa7432b_P125.jpg" /><p>聯(lián)想樂phono智能手機(jī)</p><p>智能機(jī)的引領(lǐng)者<br><span class="price">￥1899.00</span></p></li> ??? </ul> ? </div> ? <div id="div1"> ? <ul class="box-contentul"> ????? <li><img src="image/0f65d5ba66a7413cbc2fa5beb9b0a682_P125.jpg" /><p>海爾變頻單開門冰箱</p><p>無氟無害<br><span class="price">￥3655.00</span></p></li> ????? <li><img src="image/3c155af25ae54910a454641226e1a065_P125.jpg" /><p>美膚寶雪白滋潤(rùn)霜</p><p>讓你的肌膚亮白無暇<br><span class="price">108.00</span></p></li> ????? <li><img src="image/03c92012167f47f79a93f1f5cf6fd3c2_P125.jpg" /><p>TCL液晶彩電</p><p>液晶彩電優(yōu)惠促銷<br><span class="price">￥1815.00</span></p></li> ????? <li><img src="image/5c47dd4d63254a4a9bdef319ea13dfad_P125.jpg" /><p>sony智能手機(jī)</p><p>32g超大內(nèi)存<br><span class="price">￥4525.00</span></p></li> ????? <li><img src="image/3ab20e423fe3479c9aa3bc99e1b9613a_P125.jpg" /><p>sony單反相機(jī)</p><p>攝影必備，熱銷產(chǎn)品<br><span class="price">￥6999.00</span></p></li> ??? </ul> ?</div> ? <div id="div2"> ? <ul class="box-contentul"> ????? <li><img src="image/5bfbf38ec6bb46858da9d4eb09268dc8_P125.jpg" /><p>韓版淑女鞋</p><p>超低價(jià)格發(fā)派送<br><span class="price">￥15.00</span></p></li> ????? <li><img src="image/37427352d48244eb9d07c6608c7935fb_P125.jpg" /><p>媽咪寶貝兒童尿不濕</p><p>給寶貝最好的呵護(hù)<br><span class="price">￥65.00</span></p></li> ????? <li><img src="image/8a9ae49a528e42109b29d94085fb2cbf_P125.jpg" /><p>海爾變頻空調(diào)</p><p>家一樣的溫暖<br><span class="price">￥2589.00</span></p></li> ????? <li><img src="image/25eb8e96b08f47dc9cced1e8e01182b6_P125.jpg" /><p>明朝那些事</p><p>小說集合<br><span class="price">￥135.00</span></p></li> ????? <li><img src="image/571e19566d9f433fbc6cfe24e11d82c6_P125.jpg" /><p>聯(lián)想筆記本</p><p>雙核超大內(nèi)存<br><span class="price">￥4589.00</span></p></li> ??? </ul> ?</div> <div id="div3"> <ul class="box-contentul"> ????? <li><img src="image/bbe5ef7e9a614c8c8cbce332c54cc830_P125.jpg" /><p>紅豆襯衫</p><p>保暖潮流<br><span class="price">￥505.00</span></p></li> ????? <li><img src="image/0c04956665ea4589a72362b8123a7ad2_P125.jpg" /><p>康佳彩電</p><p>家電王牌琴<br><span class="price">￥1999.00</span></p></li> ????? <li><img src="image/1fa489da879c46479b545ebb70ab0e49_P125.jpg" /><p>天王表</p><p>男士品牌表<br><span class="price">￥5751.00</span></p></li> ????? <li><img src="image/2a23a595cb1c4d2eab8f640fe62a3e3f_P125.jpg" /><p>韓國(guó)明星海報(bào)</p><p>韓國(guó)組合<br><span class="price">￥15.00</span></p></li> ????? <li><img src="image/6e602dcdae4748f8b890770f87b69afd_P125.jpg" /><p>索尼數(shù)碼相機(jī)</p><p>五色可選琴<br><span class="price">￥2895.00</span></p></li> ??? </ul> ?</div> ?<div id="div4"> ?<ul class="box-contentul"> ????? <li><img src="image/50cbd240b4f0430e86ced32c1a811ffe_P125.jpg" /><p>康佳彩電</p><p>家電王牌<br><span class="price">￥1999.00</span></p></li> ????? <li><img src="image/9d98629f5c744af3bbc6948d269e7f01_P125.jpg" /><p>嬰兒尿不濕</p><p>全新的呵護(hù)<br><span class="price">￥65.00</span></p></li> ????? <li><img src="image/6d9062b9a853485d921c792dfd41a740_P125.jpg" /><p></p><p>公牛電器插座<br><span class="price">￥45.00</span></p></li> ????? <li><img src="image/d67b1896c6a041158578374a487deb21_P125.jpg" /><p>戴爾筆記本電腦</p><p>全新產(chǎn)品<br><span class="price">￥3998.00</span></p></li> ????? <li><img src="image/12f7d5f5925c45f29f6c00851ecdf940_P125.jpg" /><p>小巧折疊吹風(fēng)機(jī)</p><p>出門旅行便捷產(chǎn)品<br><span class="price">￥35.00</span></p></li> ??? </ul> ?</div> </div> <script type="text/javascript"> function over(x,n){ ?var lis=document.getElementById("box1").getElementsByTagName("ul")[0].getElementsByTagName("li"); ? for (var i=0;i<lis.length;i++){ ?? if (i==n){ ??? x.className="red"; ??? document.getElementById("div"+i).style.display="block"; ??????? } ?? else{ ??? lis[i].className="normal"; ??? document.getElementById("div"+i).style.display="none"; ???? ???? } ??? ???? }? ?? } ? </script>
? ?<div class="zhutiluntan STYLE12"> ?? <div align="center" class="price">主題論壇 </div> </div> ?? <div class="zt-l"> ?? ?<ul> ???<li><img src="image/hot.png" />六月“門店購(gòu)物送貨上門”......</li> ???<li>父親節(jié)甄選好禮送家中......</li> ???<li>端午好禮為你一站備齊！</li> ???<li>母親節(jié)優(yōu)選禮物，為媽媽準(zhǔn)備的......</li> ???<li><img src="image/hot.png" />五月“門店購(gòu)物送貨上門”......</li> ???<li>T.EN天恩夏裝大促，全場(chǎng)1折......</li> ???<li><img src="image/hot.png" />"你買我就送"服飾類滿300反50......</li> ???<li>MLB美職棒潮新品，3折起！......</li> ???<li></li> ???<li>更多......</li> ??</ul> ? ?</div> ?</div> ?? ??? <div class="fuzhuang"><img src="image/fuzhuang.jpg" width="1161" /></div> ??? <div class="meirong"><img src="image/xiangbao1.jpg" width="1163" /></div> ??? <div class="jiaju"><img src="image/jiaju1.jpg" width="1156" /></div> ? </div> ? <div class="footer"> ? ?<div class="tupian"> ???? ?<ul> ??????? ?<li><img src="image/foot_buy1.png" width="161" height="190" /></li> ??????? ?<li><img src="image/foot_pay1.png" width="161" height="190" /></li> ??????????? <li><img src="image/foot_send1.png" width="161" height="190" /></li> ??????????? <li><img src="image/foot_service2.png" width="161" height="190" /></li> ??????????? <li><img src="image/foot_speciel2.png" width="162" height="190" /></li> ??????? </ul> ??? </div> ??? <div class="footer-x"> ?? ?? <ul> ???<li>?? 首頁(yè)??? </li> ???<li>關(guān)于我們? </li> ???<li>友情鏈接? </li> ???<li>供應(yīng)商專區(qū) </li> ???<li>法律聲明?? </li> ??</ul> ??<div class="footer-xx">Copyright 2000-2011 All Right Reserved 長(zhǎng)春家視野家居商城?| 聯(lián)系我們：0431-63513679</div> ??? </div> ?</div> ? </div> </div> </body> </html>
轉(zhuǎn)載于:https://www.cnblogs.com/F-lower/p/3344894.html
總結(jié)
- 上一篇： Linux下查杀病毒
- 下一篇： 大端和小端，字节对齐