使用jQuery制作图书简介

html5代码如下：

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8" /><title>图书简介</title><link rel="stylesheet" href="css/bookStyle.css" /><script src="lib/jquery-3.6.0.js"></script></head><body><section id="book"><div class="imgLeft"><img src="data: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 class="red">￥24.10</span> [6.9折]<p class="dd">[定价：<span>￥35.00</span>]</p>(降价通知)</div><p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p><dl><dt>以下促销可在购物车任选其一</dt><dd><span class="fff">加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd><dd><span class="fff">满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd></dl><p id="ticket">领 券：<span class="fff">105-6</span> <span class="fff">200-16</span></p></div></div></section><script src="js/index.js"></script></body>
</html>

css3代码如下：

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

js代码如下：

$(document).ready(function () {$(".intro").css("color", "red");$(".red").css({ color: "red", fontSize: "20px", fontWeight: "700" });$(".dd").css({ color: "#ccc" });$(".dd span").css({ textDecoration: "line-through" });$("dl dt,dd").css({ color: "red" });$(".fff").css({ color: "#fff", backgroundColor: "red", padding: "2px", border: "1px solid red" });$("dl dt").click(function () {$(".textRight dl dd").css({ display: "block" });});
});

使用jQuery制作图书简介相关推荐

JQuery制作图书简介页面
第二章 JQuery选择器练习1:制作图书简介页面 <!DOCTYPE html> <html> <head lang="en">< ...
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基础--制作图书简介页面
需求: 实现代码:
用bookdown制作图书
介绍 R的bookdown 扩展包是继knitr和rmarkdown扩展包之后, markdown格式的另一种扩展, 使得Rmd格式可以支持公式.定理.图表自动编号和引用.链接, 文献引用和链接等适用 ...
转载：JQuery制作的选项卡改进版
JQuery制作的选项卡改进版记得去年刚开始在博客园写日志第一篇文章就是关于选项卡的,题目叫<JQuery制作的选项卡,重点体现在JS与HTML的分离>.最近做项目的时候,再回头看这段代 ...
使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
安徽理工学校计算机,安徽理工学校专业设置之计算机动漫与游戏制作专业简介...
动漫与游戏制作专业简介如需了解安徽理工学校更多专业请点击[安徽理工学校] 培养目标面向动漫游戏.动画制作行业各类企业,培养具有基本的科学文化素养,良好的职业道德,较强的就业能力和一定创业能力,从事 ...

使用jQuery制作图书简介

使用jQuery制作图书简介

html5代码如下：

css3代码如下：

js代码如下：

使用jQuery制作图书简介相关推荐

最新文章

热门文章