前台子页的简单代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>品牌专区</title> <style type="text/css"> <!-- *{ padding:0px; margin:0px; } html,body{ height:100%; background-image:url(image/beijing.jpg); background-repeat: repeat-x; } .body { 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; 460px; padding-top:10px; padding-left:5px; float:left; position: absolute; left: 95px; top: 1px; } .body .box .top .top1-r { 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; 70px; } .body .box .top .logo { height: 130px; 355px; position: absolute; left: 95px; top: 43px; } .STYLE5 { font-size: 36px; font-weight: bold; } .STYLE7 {font-size: 18px} .sousuo { height: 31px; 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; 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; 130px; } .body .box .daohang .yibai { height: 30px; 182px; position: absolute; left: 973px; top: -4px; } .body .box .main .main-l { background-image: url(image/chanpinliebiao.png); background-repeat: no-repeat; 197px; height:380px; position: absolute; left: 96px; top: 194px; } .body .box .main .main-l ul { 100px list-style-type: none; margin-top:50px; } .body .box .main .main-l li { 100px; list-style-type: none; margin:auto; line-height:35px;

} .body .box .main .main-m { position: absolute; height: 375px; 764px; left: 291px; top: 196px; overflow:hidden; } .body .box .xianshiqinaggou { height: 381px; 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; 150px; } .body .box .miaobao { font-size: 14px; color: #333333; height: 20px; 300px; position: absolute; left: 94px; top: 584px; } .body .box .ss { background-image: url(image/s.jpg); background-repeat: no-repeat; 1011px; height:50px; border: 1px solid #CCCCCC; position:absolute; left: 98px; top: 618px; font-size: 14px; font-weight: bold; color: #000000; padding-left:150px; padding-top:20px; } .body .box .sss { height: 20px; 1164px; position: absolute; left: 99px; top: 695px; } .body .box .xiaoshou { background-image: url(image/sss.jpg); background-repeat: repeat-x; height: 55px; 1165px; position: absolute; left: 97px; top: 748px; } .body .box .xiaoshou ul { float: left; height: 20px; 400px; padding-top:30px; padding-left:20px; } .body .box .xiaoshou li { float: left; height: 20px; 130px; list-style-type:none; font-size:14px; color:#333333; } .body .box #box1 { 1169px; height:100%; position:relative; left: 97px; top: 820px; } #div0 { display: block; 1169px; height:300px; margin-top: 10px; position:absolute; top: 2px; left: -2px; } #div1 { display: block; 1172px; height:300px; margin-top: 10px; position:absolute; left: -1px; top: 1696px; } #div2 { display: block; 1174px; height:300px; margin-top: 10px; position:absolute; left: -3px; top: 1269px; } #div3 { display: block; 1173px; height:300px; margin-top: 10px; position:absolute; left: -3px; top: 844px; } #div4 { display: block; 1170px; height:300px; margin-top: 10px; position:absolute; left: -2px; top: 421px; } #box1 #div0 .box-contentul { list-style-type:none; float: left; 100%; padding-top: 10px; } #box1 #div0 .box-contentul li { float: left; 220px; padding-left:10px; } #box1 #div1 .box-contentul { list-style-type:none; float: left; 100%; padding-top: 10px; } #box1 #div1 .box-contentul li { float: left; 220px; padding-left:10px; } #box1 #div2 .box-contentul { list-style-type:none; float: left; 100%; padding-top: 10px;

} #box1 #div2 .box-contentul li { float: left; 220px; padding-left:10px; } #box1 #div3 .box-contentul { list-style-type:none; float: left; 100%; padding-top: 10px;

} #box1 #div3 .box-contentul li { float: left; 220px; padding-left:10px; } #box1 #div4 .box-contentul { list-style-type:none; float: left; 100%; padding-top: 10px;

} #box1 #div4 .box-contentul li { float: left; 220px; padding-left:10px; } #box1 img{ padding:5px 10px; } #box1 p{ 138px; font-size:12px; padding:4px 8px; line-height:20px; text-align:center; } .price{ color:#FF0000; } .body .box #box1 .hx1 { height: 20px; 1171px; position: absolute; left: -24px; top: 396px; } .body .box #box1 .hx2 { height: 20px; 1170px; position: absolute; left: -1px; top: 817px; } .body .box #box1 .hx3 { height: 20px; 1167px; position: absolute; left: -2px; top: 2092px; } .body .box #box1 .hx4 { height: 20px; 1174px; position: absolute; left: -2px; top: 1664px; } .body .box #box1 .hx5 { height: 20px; 1176px; position: absolute; left: -2px; top: 1241px; } .body .box .foo { background-image: url(image/footer.jpg); background-repeat: repeat-x; height: 360px; 1321px; position: absolute; left: -5px; top: 2950px; }

--> </style> <link type="text/css" rel="stylesheet" href="style.css"/> <script type="text/javascript" src="untitled.js"></script>

<body> <div class="body"> <div class="box"> <div class="top"> <div class="top1">您好，欢迎您来到步行街网上商城购物！</div> <div class="top1-r"> <ul> <li>免费注册 | </li> <li>登录 | </li> <li>购物车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">步行街网上商城 </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="请搜索" onclick="sousuo1(this)" onblur="sousuo2(this)"/> <script type="text/javascript"> function sousuo1(a){ a.value=""; } function sousuo2(a){ a.value="请搜索"; a.style.color="#ccc"; } </script> </div> <div class="daohang"> <ul> <li> 首页 </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" />彩妆护肤</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" />手机数码</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> <div class="miaobao">首页> 品牌专区> 思蓓儿 </div> <div class="ss">思蓓儿</div> <div class="sss"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="1%" height="42" background="image/ss.jpg"> </td> <td width="90%" background="image/ss.jpg"><span class="STYLE10">共有25件相关商品</span></td> <td width="9%" align="center" bgcolor="#333333"><span class="STYLE9">回到首页</span></td> </tr> </table> </div> <div class="xiaoshou"> <ul> <li>销量从高到底<img src="image/g.jpg" /></li> <li>销量<img src="image/gg.jpg" /></li> <li>价格<img src="image/ggg.jpg" /></li> </ul> </div> <div id="box1"> <div id="div0"> <ul class="box-contentul"> <li> <img src="image/a0.jpg" /> <p>思蓓儿女款黄色配皮带格子半身长裙黄色 3XGQ00741<br><span class="price">￥128 </span></p></li> <li><img src="image/a1.jpg" /><p>思蓓儿女款浅蓝色牛仔碎花长款半身裙浅蓝色 3XGQ00661<br><span class="price">￥228.00</span></p></li> <li><img src="image/a2.jpg" /><p>思蓓儿短袖T恤灰色 3XGT0120642<br><span class="price">￥240.00</span></p></li> <li><img src="image/a3.jpg" /><p>思蓓儿短袖T恤白色 3XGT0120140<br><span class="price">￥2999.00</span></p></li> <li><img src="image/a4.jpg" /><p>思蓓儿时尚修身短袖T恤黑色 3XGT0118042<br><span class="price">￥1899.00</span></p></li> </ul> </div> <div class="hx1"><img src="image/hh.jpg" width="1169" /></div> <div id="div1"> <ul class="box-contentul"> <li> <img src="image/a5.jpg" /><p>思蓓儿女款黄色配皮带格子半身长裙黄色 3XGQ00741<br><span class="price">￥128 </span></p></li> <li><img src="image/a6.jpg" /><p>思蓓儿女款浅蓝色牛仔碎花长款半身裙浅蓝色 3XGQ00661<br><span class="price">￥228.00</span></p></li> <li><img src="image/a7.jpg" /><p>思蓓儿短袖T恤灰色 3XGT0120642<br><span class="price">￥240.00</span></p></li> <li><img src="image/a8.jpg" /><p>思蓓儿短袖T恤白色 3XGT0120140<br><span class="price">￥2999.00</span></p></li> <li><img src="image/a9.jpg" /><p>思蓓儿时尚修身短袖T恤黑色 3XGT0118042<br><span class="price">￥1899.00</span></p></li> </ul> </div> <div class="hx2"><img src="image/hh.jpg" width="1153" /></div> <div id="div2"> <ul class="box-contentul"> <li> <img src="image/a11.jpg" /><p>思蓓儿女款黄色配皮带格子半身长裙黄色 3XGQ00741<br><span class="price">￥128 </span></p></li> <li><img src="image/a12.jpg" /><p>思蓓儿女款浅蓝色牛仔碎花长款半身裙浅蓝色 3XGQ00661<br><span class="price">￥228.00</span></p></li> <li><img src="image/a13.jpg" /><p>思蓓儿短袖T恤灰色 3XGT0120642<br><span class="price">￥240.00</span></p></li> <li><img src="image/a14.jpg" /><p>思蓓儿短袖T恤白色 3XGT0120140<br><span class="price">￥2999.00</span></p></li> <li><img src="image/af.jpg" /><p>思蓓儿时尚修身短袖T恤黑色 3XGT0118042<br><span class="price">￥1899.00</span></p></li> </ul> </div> <div class="hx3"><img src="image/hh.jpg" width="1137" /></div> <div id="div3"> <ul class="box-contentul"> <li> <img src="image/a16.jpg" /><p>思蓓儿女款黄色配皮带格子半身长裙黄色 3XGQ00741<br><span class="price">￥128 </span></p></li> <li><img src="image/a17.jpg" /><p>思蓓儿女款浅蓝色牛仔碎花长款半身裙浅蓝色 3XGQ00661<br><span class="price">￥228.00</span></p></li> <li><img src="image/a18.jpg" /><p>思蓓儿短袖T恤灰色 3XGT0120642<br><span class="price">￥240.00</span></p></li> <li><img src="image/a19.jpg" /><p>思蓓儿短袖T恤白色 3XGT0120140<br><span class="price">￥2999.00</span></p></li> <li><img src="image/a23.jpg" /><p>思蓓儿时尚修身短袖T恤黑色 3XGT0118042<br><span class="price">￥1899.00</span></p></li> </ul> </div> <div class="hx4"><img src="image/hh.jpg" width="1151" /></div> <div id="div4"> <ul class="box-contentul"> <li> <img src="image/aa.jpg" /><p>思蓓儿女款黄色配皮带格子半身长裙黄色 3XGQ00741<br><span class="price">￥128 </span></p></li> <li><img src="image/ab.jpg" /><p>思蓓儿女款浅蓝色牛仔碎花长款半身裙浅蓝色 3XGQ00661<br><span class="price">￥228.00</span></p></li> <li><img src="image/ac.jpg" /><p>思蓓儿短袖T恤灰色 3XGT0120642<br><span class="price">￥240.00</span></p></li> <li><img src="image/ad.jpg" /><p>思蓓儿短袖T恤白色 3XGT0120140<br><span class="price">￥2999.00</span></p></li> <li><img src="image/ae.jpg" /><p>思蓓儿时尚修身短袖T恤黑色 3XGT0118042<br><span class="price">￥1899.00</span></p></li> </ul> </div> <div class="hx5"><img src="image/hh.jpg" width="1153" /></div> </div> <div class="foo"></div> </div> </div> </body> </html>

相关阅读:
开发servlet三种方式
puppet 启动失败
linux 内核中链表list
software level
ubuntu 使用 root “sudo /bin/bash”
linux 内存管理
linux kernel "current" macro
hello.hs haskell
ubuntu samba
微信小程序中使用 npm包管理（保姆式教程）

原文地址：https://www.cnblogs.com/F-lower/p/3344898.html