新做的H5页面（具体应该说是百分比页面）

2019-11-14 14:10:31

字体：大中小

来源：转载

供稿：网友

主要代码

<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;    }