你的位置:首页 > ASP.net教程

[ASP.net教程]新做的H5页面


主要代码

<div class="top" id="headTab">    <div id="photo"><a href="#" class="active">图文简介</a></div>    <div id="parameter"><a href="#" class="">产品参数</a></div>    <div id="system"><a href="#" class="">系统推荐</a></div>  </div>  <div class="content">    <div id="photo1" class="show">      <!--我是商品的图片简介-->      <img src="~/Content/Images/bg13.jpg" />    </div>    <div id="parameter1" class="hidden">      <ul class="nvlist">        <li>          <div>****:</div>          <div>*****************</div>        </li>        <li>          <div>****:</div>          <div>***********************</div>        </li>        <li>          <div>****:</div>          <div>****************************</div>        </li>        <li>          <div>****:</div>          <div>***************************</div>        </li>        <li>          <div>****:</div>          <div>*****************************************</div>        </li>        <li>          <div>****:</div>          <div>****************</div>        </li>        <li>          <div>****:</div>          <div>*********</div>        </li>        <li>          <div>****:</div>          <div>*******************************</div>        </li>        <li>          <div>****:</div>          <div>**********</div>        </li>        <li>&nbsp;</li>      </ul>    </div>    <div id="system1" class="hidden">      <div class="bordersty" onclick="redirecter.goCategory(123456)">        <img src="~/Content/Images/bg10.jpg" />        <div class="title">          *****        </div>        <div class="selling">          <span>¥130.00          </span>          <span>520人购买          </span>        </div>      </div>      <div class="bordersty">        <img src="~/Content/Images/bg10.jpg" />        <div class="title">          *****        </div>        <div class="selling">          <span>¥130.00          </span>          <span>520人购买          </span>        </div>      </div>      <div class="bordersty">        <img src="~/Content/Images/bg10.jpg" />        <div class="title">          *****        </div>        <div class="selling">          <span>¥130.00          </span>          <span>520人购买          </span>        </div>      </div>      <div class="bordersty">        <img src="~/Content/Images/bg10.jpg" />        <div class="title">          *****        </div>        <div class="selling">          <span>¥130.00          </span>          <span>520人购买          </span>        </div>      </div>      <div class="bordersty">        <img src="~/Content/Images/bg10.jpg" />        <div class="title">          *****        </div>        <div class="selling">          <span>¥130.00          </span>          <span>520人购买          </span>        </div>      </div>      <div class="bordersty">        <img src="~/Content/Images/bg10.jpg" />        <div class="title">          *****        </div>        <div class="selling">          <span>¥130.00          </span>          <span>520人购买          </span>        </div>      </div>      <div class="bordersty">        <img src="~/Content/Images/bg10.jpg" />        <div class="title">          *****        </div>        <div class="selling">          <span>¥130.00          </span>          <span>520人购买          </span>        </div>      </div>      <div class="bordersty">        <img src="~/Content/Images/bg10.jpg" />        <div class="title">          *****        </div>        <div class="selling">          <span>¥130.00          </span>          <span>520人购买          </span>        </div>      </div>      <div class="bordersty">        <img src="~/Content/Images/bg10.jpg" />        <div class="title">          *****        </div>        <div class="selling">          <span>¥130.00          </span>          <span>520人购买          </span>        </div>      </div>      <div class="bordersty">        <img src="~/Content/Images/bg10.jpg" />        <div class="title">          *****        </div>        <div class="selling">          <span>¥130.00          </span>          <span>520人购买          </span>        </div>      </div>    </div>  </div>

js代码——切换选项卡

<script type="text/javascript">  $(function () {    $("#headTab div a").click(function () {      var id = $(this).parent().attr("id");      $(this).attr("class", "active").parent().siblings().find("a").attr("class", "");      $("#" + id + "1").attr("class", "show").siblings().attr("class", "hidden");  })})</script>

Css样式(百分比布局)

body {  background-color: lightgray;  font-family: 微软雅黑;}.top {  height: 60px;  border-bottom: 1px solid gray;  width: 100%;  background-color: white;  position: fixed;  top: 0px;  left: 0px;  right: 0px;}  .top div {    float: left;    width: 33.3%;    text-align: center;    height: 40px;  }a {  border: 0px solid red;  height: 36px;  display: inline-block;  width: 80px;  padding-top: 20px;  font-family: 微软雅黑;  color: black;  text-decoration: none;}  a:hover {    color: #E74E40;    border-bottom: 4px solid #E74E40;    font-size: 17px;  }.active {  color: #E74E40;  border-bottom: 4px solid #E74E40;  font-size: 17px;  font-family: 微软雅黑;}.content {  margin-top: 70px;}.show {  display: block;}.hidden {  display: none;}#photo1 img {  width: 100%;  display: block;}.nvlist {  list-style: outside none none;  border: 1px solid gray;  background-color: white;  padding-left: 15px;  padding-right: 15px;}  .nvlist li {    line-height: 25px;    border-bottom: 1px solid gray;    margin: 0px 0px -1px;    padding-left: 15px;    font-size: 12px;  }    .nvlist li div:first-child {      float: left;      width: 25%;      border: 0px solid red;    }    .nvlist li div:last-child {      width: 65%;      border: 0px solid blue;      margin-left: 30%;      border: 0px solid red;    }/*        .nvlist li:hover {          background-color: #DDDDDD;          cursor: pointer;        }        .nvlist li:last-child:hover {          background-color: white;          cursor: default;        }*/.bordersty {  width: 48%;  float: left;  margin-left: 1%;  margin-top: 1%;  background-color: white;  border: 1px solid gray;}  .bordersty img {    width: 90%;    margin-left: 5%;    margin-top: 5%;    display: block;  }.title {  margin-left: 5%;  line-height: 20px;  border: 0px solid red;  width: 80%;  font-size: 14px;  padding-top: 10px;  font-family: 微软雅黑;}.selling {  margin-left: 5%;  line-height: 20px;  border: 0px solid red;  width: 95%;  float: left;  font-size: 12px;}  .selling span:first-child {    float: left;  }  .selling span:last-child {    float: right;    margin-right: 20%;    margin-bottom: 10px;  }