HTML+CSS+JavaScript网页设计教程
1星价
¥31.2
(8.0折)
2星价￥31.2
定价￥39.0
暂无评论
图文详情
- ISBN：9787560655864
- 装帧：平装-胶订
- 册数：暂无
- 重量：暂无
- 开本：26cm
- 页数：271页
- 出版时间：2020-03-01
- 条形码：9787560655864 ; 978-7-5606-5586-4
本书特色
本书是作者根据多年的教学和网站设计经验，按照学习网页设计技术的规律，精心设计而成。书中代码均符合*的Web开发规范。由浅入深、完整而详细地介绍了HTML、CSS和JavaScript这三种网页设计技术，在讲解基本规范同时，精心设计了实用性强的案例，可以使读者掌握规范、实用的网页设计技术。
本书内容系统、全面，案例丰富实用，可以作为本科、专科（高职）院校相关专业的教材，也可以作为网页设计爱好者的自学或者参考用书。
内容简介
本书是作者根据多年的教学和网站设计经验，按照学习网页设计技术的规律，精心设计而成。书中代码均符合新Web开发规范。由浅入深、完整而详细地介绍了HTML、CSS和JavaScript这三种网页设计技术，在讲解基本规范同时，精心设计了实用性强的案例，可以使读者掌握规范、实用的网页设计技术。 本书内容系统、全面，案例丰富实用，可以作为本科、专科（高职）院校相关专业的教材，也可以作为网页设计爱好者的自学或者参考用书。
目录
第1章 网页设计综述 1
1.1 Web起源 1
1.2 Web工作原理 1
1.3 浏览器 2
1.4 网页开发工具 3
1.5 基本概念 3
1.6 网页开发技术简介 5
1.6.1 HTML简介 5
1.6.2 CSS简介 6
1.6.3 JavaScript简介 8
1.7 一个简单的网页 9
1.7.1 准备工作 9
1.7.2 编写HTML代码 10
1.7.3 设计CSS样式 11
1.7.4 添加CSS样式后网页的
显示效果 12
练习与实践 12
第2章 HTML 14
2.1 HTML基本语法 14
2.1.1 双标签 14
2.1.2 单标签 14
2.1.3 属性 15
2.1.4 注释 15
2.2 HTML文档基本结构 16
2.3 HTML文档头部相关标签 17
2.3.1 页面标题标签 17
2.3.2 元信息标签<meta> 17
2.3.3 其他标签 18
2.4 段落与文本格式化 19
2.4.1 <font>标签 19
2.4.2 样式标签 20
2.4.3 段落标签<p> 21
2.4.4 换行标签<br/> 22
2.4.5 水平分割线标签<hr> 22
2.4.6 内容居中标签<center> 23
2.4.7 预格式化标签<pre> 23
2.4.8 标题标签<h1>～<h6> 25
2.4.9 <div>和<span>标签 25
2.5 列表 26
2.5.1 无序列表标签<ul> 26
2.5.2 有序列表标签<ol> 27
2.5.3 自定义列表标签<dl> 29
2.6 超链接 30
2.6.1 超链接标签<a> 30
2.6.2 路径的表示方法 30
2.6.3 网页内跳转 31
2.7 图像与多媒体 32
2.7.1 图像 32
2.7.2 图像映射 32
2.7.3 音频和视频 35
2.7.4 插入Flash文件 37
2.8 表单 37
2.8.1 表单标签<form> 37
2.8.2 信息输入标签<input> 38
2.8.3 HTML 5.0新增的表单输入类型 40
2.8.4 下拉列表标签<select> 43
2.8.5 多行文本输入标签<textarea> 45
2.8.6 域和域标题 45
2.9 表格 46
2.9.1 表格标签 46
2.9.2 行标签<tr> 49
2.9.3 单元格标签<td> 50
2.10 框架 51
2.10.1 框架集标签<frameset> 52
2.10.2 框架定义标签<frame> 52
2.10.3 浮动框架标签<iframe> 54
2.11 HTML 5.0结构元素 56
练习与实践 58
第3章 CSS 62
3.1 CSS基础 62
3.2 引用CSS样式 63
3.2.1 行内样式 63
3.2.2 内部样式 63
3.2.3 外部样式 65
3.3 CSS选择器 66
3.3.1 标签选择器 66
3.3.2 id选择器 67
3.3.3 类选择器 68
3.3.4 属性选择器 70
3.3.5 后代选择器 72
3.3.6 关系选择器 73
3.3.7 普通兄弟选择器(~) 74
3.3.8 相邻兄弟选择器(+) 75
3.3.9 结构性伪类选择器 76
3.3.10 伪类选择器 79
3.3.11 通配符选择器 81
3.3.12 并集选择器 81
3.4 CSS文本样式 82
3.4.1 字体样式属性：font-family 82
3.4.2 字号属性：font-size 83
3.4.3 字体粗细属性：font-weight 86
3.4.4 字体风格属性：font-style 88
3.4.5 综合字体样式属性：font 88
3.4.6 其他常用的文本样式属性 89
3.5 盒子模型 93
3.5.1 盒子模型概述 94
3.5.2 盒子模型的相关属性 95
3.5.3 盒子的内边距 98
3.5.4 盒子的外边距 100
3.6 背景属性 101
3.6.1 设置背景颜色 102
3.6.2 设置背景图片 103
3.6.3 综合设置背景图片 105
3.7 继承、层叠和优先级 106
3.7.1 继承 106
3.7.2 层叠和优先级 107
3.8 浮动与定位 110
3.8.1 浮动(float) 110
3.8.2 定位 116
3.9 案例：腾讯网首页搜索框布局 121
3.9.1 左、中、右三栏居中布局 122
3.9.2 左侧的腾讯Logo图片 124
3.9.3 中间的搜索框 124
3.9.4 右侧的三个按钮 128
练习与实践 129
第4章 JavaScript 133
4.1 JavaScript概述 133
4.1.1 使用<script>标签直接嵌入
JavaScript代码 133
4.1.2 引入外部JavaScript代码 134
4.2 标识符、变量和数据类型 135
4.2.1 标识符 135
4.2.2 变量 136
4.2.3 基本数据类型 136
4.2.4 复合数据类型：数组 139
4.2.5 JavaScript对象和this关键字 141
4.3 运算符与表达式 143
4.3.1 赋值运算符 143
4.3.2 算术运算符 143
4.3.3 位运算符 144
4.3.4 比较运算符 144
4.3.5 逻辑运算符 145
4.3.6 条件运算符(三元运算符) 145
4.4 流程控制 146
4.4.1 顺序结构 146
4.4.2 分支结构 146
4.4.3 循环结构 151
4.5 函数 156
4.5.1 定义函数 157
4.5.2 调用函数 157
4.6 事件 159
4.6.1 表单事件 161
4.6.2 鼠标事件 165
4.6.3 键盘事件 167
4.7 DOM 168
4.7.1 获取HTML元素 169
4.7.2 读取或修改HTML元素的属性 170
4.8 BOM 175
4.8.1 history对象 176
4.8.2 navigator对象 178
4.8.3 screen对象 179
4.8.4定时器 180
4.9 案例：腾讯网首页搜索框下拉菜单 185
4.9.1 获取指定的HTML元素对象 186
4.9.2 设置HTML对象的响应事件 186
4.9.3 实现下拉菜单的鼠标移入移出
效果 187
4.9.4 实现下拉菜单的鼠标点击效果 187
练习与实践 188
第5章 网页设计综合案例 192
5.1 网站介绍及定位 192
5.2 准备工作 192
5.2.1 建立站点 192
5.2.2 素材准备 194
5.3 网页布局分析 195
5.3.1 网页整体布局 196
5.3.2 标签页图标和文字显示 197
5.3.3 定义公共样式 197
5.3.4 定义页面大小 198
5.3.5 浮动效果的实现 198
5.4 头部分析与实现 198
5.4.1 效果图分析 198
5.4.2 头部布局分析 199
5.4.3 左侧的腾讯Logo图片 199
5.4.4 中间的搜索框代码实现 200
5.4.5 右侧三个QQ功能按钮的实现 207
5.5 导航部分分析与实现 209
5.5.1 效果图分析 209
5.5.2 导航部分布局整体设计 209
5.5.3 导航部分的CSS样式分析与
设计 213
5.6 广告部分分析与实现 217
5.6.1 效果图分析 217
5.6.2 广告部分布局分析与实现 217
5.6.3 广告部分样式分析与实现 218
5.6.4 广告部分动态效果实现 219
5.7 主体部分分析与实现 221
5.7.1 效果图分析 221
5.7.2 要闻部分和今日话题部分的
分析与实现 222
5.7.3 右侧快速链接部分的分析与
实现 225
练习与实践 230
第6章 拓展知识 231
6.1 网页配色 231
6.1.1 色彩概述 231
6.1.2 色彩的基本特性 232
6.1.3 网页配色的基本概念 234
6.1.4 网页配色技巧 242
6.1.5 网页色彩搭配的原则 245
6.2 网页版式设计 245
6.2.1 网页元素的组成 246
6.2.2 网页设计的构成要素 246
6.2.3 网页版式设计的布局分类 249
6.3 切片工具 257
6.3.1 切片的属性设置 257
6.3.2 切片工具的使用 258
6.4 案例：本源食品有限公司网站页面的
设计与制作 264
6.4.1 网站定位 264
6.4.2 搜集资料 264
6.4.3 网站规划 265
6.4.4 设计网站 266
6.4.5 网站制作 270
6.4.6 网站发布 271
</div>
</div>
<div class="switch"><span id="openCatalog">展开全部<i class="icon"></i></span></div>
</div>
</div>
<div class="relativeBook">
<!--本类五星书-->
<div class="bookList">
<div class="fiveStartBook">
<div class="tit">
本类五星书
</div>
<div class="fiveStartList">
<ul>
<li>
<a href="/8474819.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="全国计算机等级考试最新真考题库模拟考场及详解·二级MSOffice高级应用" class="lazyImg" data-original="//image12.bookschina.com/2021/20210111/1/s8474819.jpg" />
</div>
<p class="name">全国计算机等级考试最新真考题库模拟考场及详解·二级MSOffice高级应用</p>
<p class="author">零壹快学计算机等级考试研究院</p>
<div class="priceWrap"><span class="price">¥10.4</span><span class="original">¥45.0</span></div>
</div>
</a>
</li>
<li>
<a href="/8472395.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="决战行测5000题(言语理解与表达)" class="lazyImg" data-original="//image12.bookschina.com/2021/20210108/1/s8472395.jpg" />
</div>
<p class="name">决战行测5000题(言语理解与表达)</p>
<p class="author">粉笔公考编著</p>
<div class="priceWrap"><span class="price">¥28.2</span><span class="original">¥88.0</span></div>
</div>
</a>
</li>
<li>
<a href="/8356746.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="软件性能测试.分析与调优实践之路" class="lazyImg" data-original="//image12.bookschina.com/2020/20200902/1/s8356746.jpg" />
</div>
<p class="name">软件性能测试.分析与调优实践之路</p>
<p class="author">张永清</p>
<div class="priceWrap"><span class="price">¥41.4</span><span class="original">¥69.0</span></div>
</div>
</a>
</li>
<li>
<a href="/8281690.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="第一行代码Android" class="lazyImg" data-original="//image12.bookschina.com/2020/20200604/1/s8281690.jpg" />
</div>
<p class="name">第一行代码Android</p>
<p class="author">郭霖</p>
<div class="priceWrap"><span class="price">¥57.4</span><span class="original">¥99.0</span></div>
</div>
</a>
</li>
<li>
<a href="/8197559.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="JAVA持续交付" class="lazyImg" data-original="//image12.bookschina.com/2019/20191113/3/s8197559.jpg" />
</div>
<p class="name">JAVA持续交付</p>
<p class="author">美）DanielBryant（丹尼尔·</p>
<div class="priceWrap"><span class="price">¥66.6</span><span class="original">¥119.0</span></div>
</div>
</a>
</li>
<li>
<a href="/8096654.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="EXCEL最强教科书(完全版)(全彩印刷)" class="lazyImg" data-original="//image12.bookschina.com/2019/20190720/1/s8096654.jpg" />
</div>
<p class="name">EXCEL最强教科书(完全版)(全彩印刷)</p>
<p class="author">（日）藤井直弥，（日）大山啓介/著</p>
<div class="priceWrap"><span class="price">¥36.4</span><span class="original">¥69.9</span></div>
</div>
</a>
</li>
</ul>
</div>
<div class="fiveStartMoreLink ">
<a href="/books/fivestar?flh=27">更多>></a>
</div>
</div>
<div class="historyBook">
<div class="tit" style="margin-top:0">
浏览历史
</div>
<div class="historyList">
<ul>
<li>
<a href="/8296274.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="HTML+CSS+JavaScript网页设计教程" class="lazyImg" data-original="//image12.bookschina.com/2020/20200707/2/s8296274.jpg" />
</div>
<p class="name">HTML+CSS+JavaScript网页设计教程</p>
<p class="author">孟宪宁</p>
<div class="priceWrap"><span class="price">¥31.2</span><span class="original">¥39.0</span></div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="hotSaleBook">
<div class="tit" data-flh="27170000" data-size="20">
本类畅销
</div>
<div class="fiveStartList">
<ul>
<li>
<a href="/8084128.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="有限与无限的游戏:一个哲学家眼中的竞技世界" class="lazyImg" data-original="//image12.bookschina.com/2019/20190530/2/s8084128.jpg" />
</div>
<p class="name">有限与无限的游戏:一个哲学家眼中的竞技世界</p>
<div class="priceWrap"><span class="price">¥37.4</span><span class="original">¥68.0</span></div>
</div>
</a>
</li>
<li>
<a href="/8807264.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="全图解零基础word excel ppt 应用教程" class="lazyImg" data-original="//image12.bookschina.com/2022/20221122/1/s8807264.jpg" />
</div>
<p class="name">全图解零基础word excel ppt 应用教程</p>
<div class="priceWrap"><span class="price">¥12.0</span><span class="original">¥48.0</span></div>
</div>
</a>
</li>
<li>
<a href="/8464836.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="机器学习" class="lazyImg" data-original="//image12.bookschina.com/2021/20210110/1/s8464836.jpg" />
</div>
<p class="name">机器学习</p>
<div class="priceWrap"><span class="price">¥59.4</span><span class="original">¥108.0</span></div>
</div>
</a>
</li>
<li>
<a href="/8082483.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="深度学习的数学" class="lazyImg" data-original="//image12.bookschina.com/2019/20190530/3/s8082483.jpg" />
</div>
<p class="name">深度学习的数学</p>
<div class="priceWrap"><span class="price">¥43.5</span><span class="original">¥69.0</span></div>
</div>
</a>
</li>
<li>
<a href="/8054865.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="智能硬件项目教程:基于ARDUINO(第2版)" class="lazyImg" data-original="//image12.bookschina.com/2019/20190603/6/s8054865.jpg" />
</div>
<p class="name">智能硬件项目教程:基于ARDUINO(第2版)</p>
<div class="priceWrap"><span class="price">¥37.7</span><span class="original">¥65.0</span></div>
</div>
</a>
</li>
<li>
<a href="/6724579.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="硅谷之火-人与计算机的未来" class="lazyImg" data-original="//image12.bookschina.com/2015/20150220/s6724579.jpg" />
</div>
<p class="name">硅谷之火-人与计算机的未来</p>
<div class="priceWrap"><span class="price">¥14.3</span><span class="original">¥39.8</span></div>
</div>
</a>
</li>
<li>
<a href="/9397346.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="元启发式算法与背包问题研究" class="lazyImg" data-original="//image12.bookschina.com/2024/20240919/1/s9397346.jpg" />
</div>
<p class="name">元启发式算法与背包问题研究</p>
<div class="priceWrap"><span class="price">¥38.2</span><span class="original">¥49.0</span></div>
</div>
</a>
</li>
<li>
<a href="/9361781.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="AI虚拟数字人:商业模式+形象创建+视频直播+案例应用" class="lazyImg" data-original="//image12.bookschina.com/2024/20240723/1/s9361781.jpg" />
</div>
<p class="name">AI虚拟数字人:商业模式+形象创建+视频直播+案例应用</p>
<div class="priceWrap"><span class="price">¥62.9</span><span class="original">¥89.8</span></div>
</div>
</a>
</li>
<li>
<a href="/9351885.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="UNIX环境高级编程(第3版)" class="lazyImg" data-original="//image12.bookschina.com/2024/20240708/1/s9351885.jpg" />
</div>
<p class="name">UNIX环境高级编程(第3版)</p>
<div class="priceWrap"><span class="price">¥164.9</span><span class="original">¥229.0</span></div>
</div>
</a>
</li>
<li>
<a href="/9344598.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="剪映AI" class="lazyImg" data-original="//image12.bookschina.com/2024/20240711/1/s9344598.jpg" />
</div>
<p class="name">剪映AI</p>
<div class="priceWrap"><span class="price">¥52.8</span><span class="original">¥88.0</span></div>
</div>
</a>
</li>
<li>
<a href="/9339012.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="深度学习高手笔记 卷2:经典应用" class="lazyImg" data-original="//image12.bookschina.com/2024/20240607/12/s9339012.jpg" />
</div>
<p class="name">深度学习高手笔记 卷2:经典应用</p>
<div class="priceWrap"><span class="price">¥90.9</span><span class="original">¥129.8</span></div>
</div>
</a>
</li>
<li>
<a href="/9317174.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="纹样之美:中国传统经典纹样速查手册" class="lazyImg" data-original="//image12.bookschina.com/2024/20240601/1/s9317174.jpg" />
</div>
<p class="name">纹样之美:中国传统经典纹样速查手册</p>
<div class="priceWrap"><span class="price">¥77.4</span><span class="original">¥109.0</span></div>
</div>
</a>
</li>
<li>
<a href="/9299996.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="UG NX 12.0数控编程" class="lazyImg" data-original="//image12.bookschina.com/2024/20241009/10/s9299996.jpg" />
</div>
<p class="name">UG NX 12.0数控编程</p>
<div class="priceWrap"><span class="price">¥24.8</span><span class="original">¥45.0</span></div>
</div>
</a>
</li>
<li>
<a href="/9295259.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="MATLAB计算机视觉与深度学习实战(第2版)" class="lazyImg" data-original="//image12.bookschina.com/2024/20240428/1/s9295259.jpg" />
</div>
<p class="name">MATLAB计算机视觉与深度学习实战(第2版)</p>
<div class="priceWrap"><span class="price">¥90.9</span><span class="original">¥128.0</span></div>
</div>
</a>
</li>
<li>
<a href="/9282656.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="界面交互设计理论研究" class="lazyImg" data-original="//image12.bookschina.com/2024/20240608/6/s9282656.jpg" />
</div>
<p class="name">界面交互设计理论研究</p>
<div class="priceWrap"><span class="price">¥30.8</span><span class="original">¥56.0</span></div>
</div>
</a>
</li>
<li>
<a href="/9276230.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="UN NX 12.0多轴数控编程案例教程" class="lazyImg" data-original="" />
</div>
<p class="name">UN NX 12.0多轴数控编程案例教程</p>
<div class="priceWrap"><span class="price">¥25.8</span><span class="original">¥38.0</span></div>
</div>
</a>
</li>
<li>
<a href="/9260212.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="微机组装与系统维护技术教程(第二版)" class="lazyImg" data-original="//image12.bookschina.com/2024/20240227/1/s9260212.jpg" />
</div>
<p class="name">微机组装与系统维护技术教程(第二版)</p>
<div class="priceWrap"><span class="price">¥37.8</span><span class="original">¥43.0</span></div>
</div>
</a>
</li>
<li>
<a href="/9249911.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="明解C语言:实践篇" class="lazyImg" data-original="//image12.bookschina.com/2024/20240203/2/s9249911.jpg" />
</div>
<p class="name">明解C语言:实践篇</p>
<div class="priceWrap"><span class="price">¥62.9</span><span class="original">¥89.8</span></div>
</div>
</a>
</li>
<li>
<a href="/9244777.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="Linux服务器架设实战(Linux典藏大系)" class="lazyImg" data-original="//image12.bookschina.com/2024/20240220/28/s9244777.jpg" />
</div>
<p class="name">Linux服务器架设实战(Linux典藏大系)</p>
<div class="priceWrap"><span class="price">¥84.5</span><span class="original">¥119.0</span></div>
</div>
</a>
</li>
<li>
<a href="/9214522.htm">
<div class="bookWrap">
<div class="cover">
<img src="/Content/images/nopic.jpg" alt="PREMIERE PRO 2023全面精通:视频剪辑+颜色调整+转场特效+字幕制作+案例实战" class="lazyImg" data-original="//image12.bookschina.com/2024/20240118/1/s9214522.jpg" />
</div>
<p class="name">PREMIERE PRO 2023全面精通:视频剪辑+颜色调整+转场特效+字幕制作+案例实战</p>
<div class="priceWrap"><span class="price">¥69.3</span><span class="original">¥99.0</span></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--预估到手价提示-->
<div class="popMask"></div>
<div class="EstimateTip">
<h4 class="clearfix"><span>预估到手价</span> <strong>×</strong></h4>
<p>预估到手价是按参与促销活动、以最优惠的购买方案计算出的价格（不含优惠券部分），仅供参考，未必等同于实际到手价。</p>
<a href="javascript:void(0);">确定</a>
</div>
<!--预估到手价提示 END-->
<div class="footer" style="">
<div class="footerInner">
<div class="btn_bar">
<div class="iconBtn" id="customerService">
<div class="iconBtnInner">
<i class="icon"></i>
<span class="txt">客服</span>
</div>
</div>
<div class="iconBtn" id="collection" data-bookid="8296274">
<div class="iconBtnInner">
<i class="icon"></i>
<span class="txt">收藏</span>
</div>
</div>
<div class="iconBtn" id="gotoCart" onclick="window.location = '/shopcar'">
<div class="iconBtnInner" style="border:none">
<span class="add_num" id="popone" style="display:none;"></span>
<i class="icon"></i>
<span class="txt">购物车</span>
</div>
</div>
</div>
<div class="btn_group">
<div class="de_row">
<div class="btn btn_red" id="addCart" data-bookid="8296274">
<span class="txt">加入购物车</span>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" id="hidShareShuXinKaParam" value="" />
<input type="hidden" id="hidShareShuXinKaWxParam" value="" />
<input type="hidden" id="hidShareLink" value="http://m.bookschina.com/8296274.htm" />
<div class="backTop"><a href="javascript:scrollTo(0,0)"></a></div>
<div class="sidebarNav">
<dl>
<dt><span>快速<br />导航</span></dt>
<dd>
<ul>
<li><a href="/"><span class="sideIcon"><img src="/Content/images/sidebarnav1.png" alt="首页" /></span><b>首页</b></a></li>
<li><a href="//t.bookschina.com/"><span class="sideIcon"><img src="/Content/images/sidebarnav2.png" alt="淘书团" /></span><b>淘书团</b></a></li>
<li><a href="/books/kindlist"><span class="sideIcon"><img src="/Content/images/sidebarnav3.png" alt="分类搜索" /></span><b>分类搜索</b></a></li>
<li><a href="/shopcar"><span class="sideIcon"><img src="/Content/images/sidebarnav5.png" alt="购物车" /></span><b>购物车</b></a></li>
<li><a href="/usercenter/myhome"><span class="sideIcon"><img src="/Content/images/sidebarnav6.png" alt="我的账户" /></span><b>我的账户</b></a></li>
</ul>
</dd>
</dl>
</div>
<script src="/Content/js/common/layer.js?v=7459" type="text/javascript"></script>
<script src="/Content/js/common/jquery.scrollLoading.js?v=7419" type="text/javascript"></script>
<script src="/Content/js/common/iscroll.js?v=7319" type="text/javascript"></script>
<script src="/Content/js/common/share.js?v=5865" t type="text/javascript"></script>
<script src="/Content/js/common/nav.js?v=7489" type="text/javascript"></script>
<script src="/Content/js/common/jquery.fly.min.js?v=7399" type="text/javascript"></script>
<script src="/Content/js/common/swiper.min.js" type="text/javascript"></script>
<script src="/Content/js/bookdetail.js?v=5055" type="text/javascript" defer></script>
<script src="/Content/js/HeavenRed.js?v=6990" type="text/javascript"></script>
<script type="text/javascript" defer>
//轮播特效
$(".swiper-ads").each(function () {
var $this = $(this);
if ($this.find(".swiper-slide").length > 1) {
var mySwiper = new Swiper($this, {
autoplay: true,
autoplay: {
delay: 5000,
},
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination'
},
})
}
})
var newImg;
var clientH = $(window).height();
var clientW = $(window).width();
var w, h;
$(document).ready(function () {
$("#imgBook").bind("click", function () {
$(".bg").show();
if ($(this)[0].naturalWidth > clientW) {
h = "100%";
w = clientW * .98;
$('.bgImg').css({ 'width': w + "px", 'height': "auto", 'top': "0px", 'left': "0px", 'bottom': "0px", 'right': "0px", 'z-index': 1101, 'margin': 'auto' });
} else {
h = $(this)[0].naturalHeight;
w = $(this)[0].naturalWidth;
$('.bgImg').css({ 'width': w + "px", 'height': h + "px", 'top': (clientH - h) / 2 + "px", 'left': (clientW - w) / 2 + "px", 'z-index': 1101 });
}
newImg = $(this)[0].src;
$("body").append('<div class="fillbg"></div>');
$(".fillbg").addClass("fillbg-active");
$('.bgImg').attr("src", newImg);
});
$(".bgImg,.bg h5").bind("click", function (event) {
event.stopPropagation();
$(".bg").hide();
$(".fill-input").removeClass("fill-input-active");
setTimeout(function () {
$(".fillbg-active").removeClass("fillbg-active");
$(".fillbg").remove();
}, 300);
$('.bgImg').css({ 'width': '0px', 'height': '0px' });
$('.bgImg').attr("src", '');
});
});
</script>
</body>
</html>