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:最后的最后,我想说,写代码的时候,隔段时间我就会被浏览器坑一次,其实有很多时候我的思路和代码都没有问题,但是浏览器最后显示出来的效果却不是我想要的,等我过段时间再去重新用浏览器打开的时候,又是我想要的效果页面了。果然的果然,这次我又入坑了,好在我被坑的有经验了,这次爬坑的方法更简单也更快了 哈哈哈哈哈哈哈哈
今天的你们,也要加油哦~
俗话说的好 “入坑容易,出坑难 ” 但是在我看来,学编程的时候,是入坑难啊,出坑更难! ! !嘻嘻嘻。
我知道我这篇代码,有很多地方写的很累赘,你们自己看着办就好了。