美文网首页
2019-04-24

2019-04-24

作者: 一只皮皮橙 | 来源:发表于2019-04-24 20:17 被阅读0次

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>图书简介</title>

    <link rel="stylesheet" href="css/bookStyle.css">

    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>

    <script type="text/javascript" src="js/index.js"></script>

</head>

<body>

<section id="book">

    <div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>

    <div class="textRight">

        <h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>

        <p class="intro">自营图书几十万畅销品种阶梯满减,抽奖赢魅蓝note3、JDRead阅读器!</p>

        <p id="author">[美] 加·泽文(Gabrielle Zevin) 著;孙仲旭,李玉瑶 译</p>

        <div class="price">

            <div id="jdPrice">京东价: <span>¥24.10</span> [6.9折] <p>[定价:<span>¥35.00</span>]</p> (降价通知)</div>

            <p id="mobilePrice">促销信息:<span>手机专享价</span> <span>¥9.90</span></p>

            <dl>

                <dt>以下促销可在购物车任选其一</dt>

                <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>

                <dd><span>满减</span> 满100.00减20.00,满200.00减60.00,满300.00减100.00</dd>

            </dl>

            <p id="ticket">领 券:<span>105-6</span>  <span>200-16</span></p>

        </div>

    </div>

</section>

</body>

</html>

body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;}

body{

    font-family: "微软雅黑";

    font-size: 12px;

    line-height: 28px;

}

#book{

    margin: 5px auto 0 auto;

    width: 650px;

    overflow: hidden;

}

.imgLeft{

    float:left;

    width: 210px;

}

.imgLeft img{width: 200px;}

.textRight{

    float: right;

    width: 440px;

}

#book h1{font-size: 16px; line-height: 50px;}

.textRight dl{padding-left: 5em;}

.textRight dl dd{display: none;}

#jdPrice p{ display:inline;}

、、

jQuery

$(document).ready(function() {

$("h1+p").css({

"color":"red"

});

$("#jdPrice span").css({

"color":"#cccccc",

"font-weight":"bord",

"text-decoration":"line-through"

});

$("#jdPrice>span").css({

"color":"red",

"font-size":"24px",

"font-weight":"bord",

"text-decoration":"none"

});

$("dl").css({

"color":"red"

});

$("dt").click(function(){

$("dd").css({

"display":"block"

});

});

$("d

d span,#ticket span").css({

"color":"white",

"background-color":"red",

"padding-top":"1px","padding-bottlm":"1px",

"padding-left":"5px","padding-right":"5px",

"margin-right":"5px"

});

});

相关文章

网友评论

      本文标题:2019-04-24

      本文链接:https://www.haomeiwen.com/subject/daungqtx.html