JQuery制作图书简介页面

第二章 JQuery选择器

练习1：制作图书简介页面

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>图书简介</title><link rel="stylesheet" href="css/bookStyle.css">
</head>
<body>
<section id="book"><div class="imgLeft"><img src="img/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>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/book.js"></script>
</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;
}

$(function(){$('.intro,dt,#jdPrice span,#jdPrice p,#jdPrice p span,#ticket span').show(function(){$('.intro,dt,#jdPrice span,#ticket span').css('color','red');$('#jdPrice span').css('font-size','20px');$('#jdPrice p').css('color','darkgrey');$('#jdPrice p span').css({'font-size':'12px','color':'darkgrey'});})
})

JQuery制作图书简介页面相关推荐

使用jQuery制作图书简介
使用jQuery制作图书简介 html5代码如下: <!DOCTYPE html> <html><head lang="en"><meta ...
JavaScript第6章上机练习1(制作图书简介页面)
ps:首先是链接外部的文件: img {width: 230px;height: 300px; }.textRight {float:left ; }.imgLeft {float:left ;mar ...
制作图书简介页面（JavaScript）
1. 任务要求 1)熟悉jQuery的选择器: 2)掌握jQuery的基本选择器: 3)掌握jQuery对象的click()方法: 4)掌握jQuery对象的css()方法: 2. 需求说明使用基本 ...
jQuery基础--制作图书简介页面
需求: 实现代码:
Bootstrap JQuery 制作一个登录页面
使用Bootstrap和 JQuery 制作一个简单登录页面: 链接:https://pan.baidu.com/s/1wJyL1rdVST0cVPfcbuIQlw 提取码:6666 1. 实现图片的 ...
用jquery制作凡客诚品帮助中心页面
左导航,当前二级菜单项展开时,其余导航项关闭帮助中心,文本框获得焦点时,默认文字消失,失去焦点时,再次显示文字购物流程,鼠标指针移过时,当前项高亮显示,鼠标指针移至父元素或祖先元素时,依旧高亮,只 ...
jQuery第5章简答题4(使用css()方法添加图片边框)5(制作林徽因简介页面)
ps:简答题4(使用css()方法添加图片边框) 代码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
DW静态网页设计与制作 JavaScript大作业 HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
HTML静态网页作业--海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
Django(part39)--制作图书管理系统
学习笔记,仅供参考,有错必究文章目录制作图书管理系统第一步第二步第三步制作图书管理系统我们基于上一个博客Django(part38)–制作登录界面的mywebsite_bookstore ...

JQuery制作图书简介页面

第二章 JQuery选择器

JQuery制作图书简介页面相关推荐

最新文章

热门文章