JavaScript第6章上机练习1(制作图书简介页面)

思卿不见

已于 2022-05-25 16:09:10 修改

阅读量8.8k

点赞数 10

文章标签： javascript

于 2019-07-14 16:06:24 首次发布

本文链接：https://blog.csdn.net/weixin_44100210/article/details/95890548

版权

ps：首先是链接外部的文件：

img {
    width: 230px;
    height: 300px;
}

.textRight {
    float:left ;
}

.imgLeft {
    float:left ;
    margin-right: 10px;
}

* {
    font-size: 13px;
}


p:nth-child(1) {
    font-size: 17px;
    font-weight: bold;
}

其次是主体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作图书简介页面</title>
    <script src="../js/jquery-1.12.4.js"></script>      //导入的js文件地址因你们而已嘞
    <link rel="stylesheet" href="../style/six.css">     //这个是外部链接样式啊，眼生的小伙伴门去温习下HTML就知道了啦。
</head>
<body>
<div class="title">
    <div class="imgLeft"><img src="../image/store.jpg" alt=""></div>
    <div class="textRight">
        <p>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</p>
        <p class="a">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
        <p class="b">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
        <p class="c">京东价：<span> ￥24.10 </span>[6.9折]<span class="s"> [定价：￥35.00]</span> (降价通知)</p>
        <p class="d">促销信息：手机专享价￥9.90</p>
        <dl>
            <dd id="d">以下促销可在购物车任选其一</dd>
            <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>领 券：<span>105-5 </span><span> 200-16</span></p>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".title span").css("color","red");
        $(".a").css("color","red");
        $("dl>dd").css("color","red");
        $(".c span").css({"font-size":"24px","color":"red","font-wight":"bold"});
        $(".s").css({"color":"#cccccc","text-decoration":"line-through","font-size":"13px"});
        $("#d~dd").css("display","none");
        $("#d").click(function () {
            $("dd").css("display","block");
            $("dl").css("line-height","25px");
        })
        $("dd span").css({"color":"white","background":"red","padding":"1px 5px","margin-right":"5px"});
        $("p:nth-last-child(1) span").css({"color":"white","background":"red","padding":"1px 5px","margin-right":"5px"});
    })
</script>
</body>
</html>

最后是效果图：
在这里插入图片描述
然后是点击后的效果：

ps：最后的最后，我想说，写代码的时候，隔段时间我就会被浏览器坑一次，其实有很多时候我的思路和代码都没有问题，但是浏览器最后显示出来的效果却不是我想要的，等我过段时间再去重新用浏览器打开的时候，又是我想要的效果页面了。果然的果然，这次我又入坑了，好在我被坑的有经验了，这次爬坑的方法更简单也更快了哈哈哈哈哈哈哈哈

今天的你们，也要加油哦~

俗话说的好 “入坑容易，出坑难 ” 但是在我看来，学编程的时候，是入坑难啊，出坑更难！！！嘻嘻嘻。

我知道我这篇代码，有很多地方写的很累赘，你们自己看着办就好了。

思卿不见

关注

10
点赞
踩
34

收藏

觉得还不错? 一键收藏
打赏
4
评论
JavaScript第6章上机练习1(制作图书简介页面)

ps：首先是链接外部的文件：img { width: 230px; height: 300px;}.textRight { float:left ;}.imgLeft { float:left ; margin-right: 10px;}* { font-size: 13px;}p:nth-child(1) { f...
复制链接

扫一扫