zoukankan      html  css  js  c++  java
  • 前台子页的简单代码

    <!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>

    <style type="text/css"> <!-- .STYLE9 {  font-size: 16px;  font-weight: bold;  color: #FFFFFF; } .STYLE10 {  font-size: 14px;  color: #000000; } --> </style> </head>

    <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">&nbsp;</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">&nbsp;</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>

  • 相关阅读:
    搭建DHCP服务
    sshd免密登陆
    加密类型以及数据加密解密过程
    搭建私有CA并实现证书颁发
    CentOS 7 启动流程
    Linux命令:tcpdump命令
    Linux命令:ping命令
    Linux命令:ss命令
    Linux命令:ip命令
    Linux命令:netstat命令
  • 原文地址:https://www.cnblogs.com/F-lower/p/3344898.html
Copyright © 2011-2022 走看看