图文详情

Web前端开发案例教程——HTML5+CSS3+JavaScript+JQuery+Bootst

胡军、刘伯成、管春著 / 人民邮电出版社 / 2020-09 / 平装

售价 14.95 2.5折

定价￥59.80

品相 八五品

优惠

发货

承诺48小时内发货

运费

本店暂时无法向该地区发货

延迟发货说明

时间：

说明：

上书时间2025-02-07

数量: 库存3件

立即购买加入购物车收藏

卖家超过10天未登录

十年老店

清灵书阁

店铺等级

拍卖等级

资质认证

90天平均

成功完成

93.48% (47笔)

好评率

99.95%

发货时间

10.53小时

店主

清荷灵儿

联系

在线交谈离线留言

地址

河南省郑州市金水区

电话

进店逛逛收藏店铺

商品详情
店铺评价

立即购买加入购物车收藏

手机购买

微信扫码访问

图书条目信息
图书 > 教育
Web前端开发案例教程——HTML5+CSS3+JavaScript+JQuery+Bootst
作者: 胡军著；刘伯成著；管春著

出版社: 人民邮电出版社

出版时间: 2020-09

版次: 1

ISBN: 9787115536037

定价: 59.80

装帧: 平装

开本: 16开

页数: 308页

字数: 0.53千字
内容简介：

本书全面系统地介绍了网页设计、开发涉及的主要技术和技巧。主要内容包括：Web前端开发概述、HTML5基础、表格和表单、框架、CSS样式表、CSS样式表布局、HTML5、CSS3综合案例、JavaScript基础、JavaScript对象、JavaScript DOM、JQuery基础、JQuery应用、响应式布局、Bootstrap。

作者简介：

刘伯成，南昌大学软件学院副教授，发表论文：《基于多Agent智能网络教学系统设计与实现》、《掌上物流通系统的设计与实现》、《人工情感与物联网技术研究》等。

目录：

第1章 Web前端开发概述 1
1．1 Web概述 2
1．1．1 Web客户端技术 2
1．1．2 Web服务器端技术 2
1．1．3 超文本传输协议 3
1．1．4 统一资源定位符 3
1．2 HTML 3
1．2．1 HTML简介 3
1．2．2 HTML的发展 4
1．3 CSS 4
1．3．1 CSS简介 4
1．3．2 CSS的特点 5
1．4 JavaScript 5
1．4．1 JavaScript简介 5
1．4．2 JavaScript的特点 6
1．5 jQuery 6
1．6 Bootstrap 7
1．7 其他前端框架 7
1．7．1 Angular 7
1．7．2 React 7
1．7．3 Vue 7
小结 8
第2章 HTML5基础Ⅰ 9
2．1 HTML5的新特性 10
2．2 HTML5文档结构 11
2．2．1 基本结构 11
2．2．2 编辑工具 12
2．3 HTML5头部标签 13
2．3．1 标签 13<br>2．3．2 <meta>标签 14<br>2．3．3 <link>标签 14<br>2．3．4 <style>标签 14<br>2．3．5 <script>标签 15<br>2．4 块级标签 15<br>2．4．1 基本的块级标签 15<br>2．4．2 常用于布局的块级标签 17<br>2．5 行级标签 22<br>2．5．1 图像标签 22<br>2．5．2 图片列表标签<figure>和<figcaption> 23<br>2．5．3 范围标签<span> 25<br>2．5．4 换行标签<br/> 25<br>2．5．5 超链接标签<a> 26<br>2．6 W3C标准 30<br>2．6．1 W3C提倡的Web页面结构 30<br>2．6．2 HTML5的基本规范、结构元素和媒体支持 31<br>2．7 实践指导 34<br>小结 35<br>拓展训练 36<br>第3章 HTML5基础Ⅱ 37<br>3．1 表格基础 38<br>3．1．1 表格结构 39<br>3．1．2 表格标签 40<br>3．1．3 表格属性设置 41<br>3．1．4 跨行和跨列设置 42<br>3．2 表单 45<br>3．2．1 表单标签 47<br>3．2．2 表单域 47<br>3．2．3 表单按钮 53<br>3．2．4 HTML5新增的表单属性 54<br>3．2．5 HTML5新增表单标签 55<br>3．2．6 表单验证 56<br>3．3 表格布局 57<br>3．3．1 应用场景 57<br>3．3．2 图文布局 57<br>3．3．3 表单布局 59<br>3．3．4 表格的嵌套布局 61<br>3．4 <iframe>框架 63<br>3．4．1 <iframe>的用法 64<br>3．4．2 设置<iframe>常用属性 64<br>3．5 实践指导 65<br>小结 67<br>拓展训练 67<br>第4章 CSS3基础 70<br>4．1 CSS3简介 71<br>4．2 CSS3基本语法 72<br>4．2．1 CSS3基本结构 72<br>4．2．2 在HTML5中引入CSS3样式表 72<br>4．2．3 CSS3基本选择器 76<br>4．2．4 CSS层叠性、继承性和重要性 80<br>4．2．5 多选择器的常用符号及组合 82<br>4．3 CSS的常用属性 82<br>4．3．1 CSS的属性单位 82<br>4．3．2 字体属性 83<br>4．3．3 文本属性 85<br>4．3．4 背景属性 87<br>4．3．5 列表的常用属性 88<br>4．3．6 超链接伪类样式 89<br>4．4 实践指导 91<br>小结 93<br>拓展训练 94<br>第5章 CSS3布局 95<br>5．1 盒子模型及应用 96<br>5．1．1 盒子模型 96<br>5．1．2 盒子属性 96<br>5．2 DIV+CSS3布局 100<br>5．2．1 <div>标签的样式设置 100<br>5．2．2 布局页面设置 102<br>5．2．3 <div>标签的嵌套 103<br>5．2．4 display属性 104<br>5．2．5 <div>标签的浮动 106<br>5．2．6 <div>标签的定位 109<br>5．2．7 圆角边框 112<br>5．2．8 典型的DIV+CSS3整体页面布局 113<br>5．3 典型的局部布局 115<br>5．3．1 <div>-<ul>-<li>局部布局 115<br>5．3．2 <div>-<dl>-<dt>-<dd>局部布局 119<br>5．4 实践指导 121<br>小结 123<br>拓展训练 124<br>第6章网站设计 125<br>6．1 网站开发流程 126<br>6．1．1 需求分析 126<br>6．1．2 伪界面设计 127<br>6．1．3 网站制作 127<br>6．1．4 测试网页 128<br>6．1．5 发布网站 128<br>6．2 创建站点 128<br>6．3 页面布局技术 130<br>6．3．1 表格布局 130<br>6．3．2 框架布局 130<br>6．3．3 DIV+CSS3布局 131<br>6．4 网页制作 131<br>6．4．1 制作首页布局 131<br>6．4．2 制作网页模板 132<br>6．4．3 制作样式表文件和其他页面绑定 133<br>6．4．4 设置页面间的链接 135<br>6．5 测试并发布网站 135<br>6．5．1 测试内容 135<br>6．5．2 发布站点 136<br>6．6 实践指导 139<br>小结 141<br>拓展训练 141<br>第7章 JavaScript基础 142<br>7．1 JavaScript简介 143<br>7．1．1 JavaScript的基本结构 143<br>7．1．2 脚本的执行原理 145<br>7．2 JavaScript基础语法 145<br>7．2．1 变量 146<br>7．2．2 数据类型 146<br>7．2．3 注释 148<br>7．2．4 运算符 148<br>7．2．5 常用的输入/输出 148<br>7．3 流程控制 149<br>7．3．1 分支结构 149<br>7．3．2 循环结构 152<br>7．3．3 转移结构 155<br>7．4 函数 157<br>7．4．1 内置系统函数 157<br>7．4．2 自定义函数 159<br>7．5 实践指导 160<br>小结 164<br>拓展训练 164<br>第8章 JavaScript对象 165<br>8．1 JavaScript核心对象 166<br>8．1．1 数组对象 166<br>8．1．2 字符串对象 167<br>8．1．3 日期对象 170<br>8．1．4 数学对象 173<br>8．2 自定义对象 175<br>8．2．1 对象的制作和使用 175<br>8．2．2 在对象内设定方法 177<br>8．2．3 将对象作为对象属性使用 178<br>8．3 JavaScript的事件 180<br>8．4 实践指导 182<br>小结 183<br>拓展训练 183<br>第9章 JavaScript DOM 185<br>9．1 DOM概述 186<br>9．2 window对象 187<br>9．2．1 常用属性 187<br>9．2．2 常用方法 187<br>9．2．3 常用事件 189<br>9．3 document对象 191<br>9．3．1 常用属性 191<br>9．3．2 常用方法 192<br>9．4 其他对象 194<br>9．4．1 history对象 194<br>9．4．2 location对象 195<br>9．4．3 表单对象 196<br>9．5 DOM编程应用 198<br>9．5．1 元素的显示和隐藏 198<br>9．5．2 复选框全选效果 202<br>9．6 实践指导 204<br>小结 205<br>拓展训练 205<br>第10章 jQuery基础 206<br>10．1 jQuery简介 207<br>10．1．1 jQuery的使用 207<br>10．1．2 jQuery工厂函数 208<br>10．2 DOM对象与jQuery对象的相互转换 208<br>10．3 jQuery的选择器 210<br>10．3．1 基本选择器 210<br>10．3．2 层次选择器 211<br>10．3．3 过滤选择器 213<br>10．3．4 表单选择器 221<br>10．4 实践指导 223<br>小结 223<br>拓展训练 223<br>第11章 jQuery应用 224<br>11．1 jQuery的事件绑定 225<br>11．1．1 jQuery事件 225<br>11．1．2 常用的绑定方法 225<br>11．1．3 使用jQuery操作DOM 227<br>11．2 jQuery的动画函数 236<br>11．2．1 show()和hide()函数 236<br>11．2．2 fadeIn()和fadeOut()函数 237<br>11．2．3 自定义动画 238<br>11．3 jQuery的简单应用 239<br>11．3．1 功能需求 239<br>11．3．2 功能实现 240<br>11．4 实践指导 246<br>小结 246<br>拓展训练 246<br>第12章响应式布局 247<br>12．1 视口 248<br>12．1．1 PC端视口 248<br>12．1．2 移动端视口 248<br>12．2 媒体查询与百分比布局 250<br>12．2．1 媒体查询 250<br>12．2．2 百分比布局 251<br>12．3 栅格系统 254<br>12．3．1 栅格系统简介 254<br>12．3．2 栅格系统的应用 254<br>12．4 弹性盒布局 255<br>12．4．1 弹性盒布局简介 255<br>12．4．2 弹性盒布局的应用 258<br>12．5 实践指导 261<br>小结 262<br>拓展训练 262<br>第13章 Bootstrap技术 263<br>13．1 Bootstrap技术简介 264<br>13．1．1 Bootstrap技术基本介绍 264<br>13．1．2 Bootstrap技术的基本用法 264<br>13．2 栅格系统 265<br>13．3 CSS全局样式 269<br>13．3．1 基础排版 269<br>13．3．2 表单 270<br>13．3．3 按钮 273<br>13．3．4 图片 273<br>13．4 Bootstrap组件 274<br>13．4．1 图标 274<br>13．4．2 下拉菜单 276<br>13．4．3 输入框 278<br>13．4．4 导航与导航条 279<br>13．4．5 缩略图与媒体对象 286<br>13．4．6 列表组 289<br>13．5 实践指导 290<br>小结 291<br>拓展训练 291<br>第14章综合案例 292<br>14．1 网页概述 293<br>14．1．1 导航条 293<br>14．1．2 搜索栏 293<br>14．1．3 滚动式信息栏 294<br>14．1．4 其他网页元素 294<br>14．2 导航条 295<br>14．3 搜索栏 298<br>14．4 滚动式推荐栏 299<br>14．5 其他网页元素 301<br>14．5．1 用户信息栏 301<br>14．5．2 美食信息栏 302<br>14．5．3 特殊服务栏 303<br>14．5．4 外部链接栏 304<br>14．5．5 网页信息栏 305<br>14．5．6 至顶（to-top） 306<br>小结 308<br>拓展训练 308</p> </dd> </dl> </div> </div>  <p class="open-more">展开全部</p> </div>    <div class="book-itemSn"> <dl class="book-itemSn-desc"> <dt>货号：</dt> <dd> <span>9787115536037</span> </dd> </dl> </div>         <div class="dispatch-instruct"> <p class="dispatch-title">配送说明</p> <p class="dispatch-text"> ... </p> </div>     <div class="other_special"></div>  <div class="special-intro resemble_goods"> <div class="book_list_box"> <p class="book_list_title">相似商品</p> <ul class="clearfix"> </ul> </div> </div>  <div class="special-intro recommend_goods"> <div class="book_list_box"> <p class="book_list_title">为你推荐</p> <ul class="clearfix"> </ul> </div> </div> </li> <li class="shop-remark-page" style="display: none">  <div class="shop-reviews-wrap" id="shop-reviews"></div> </li> </ul> <div class="shelter-block"></div> </div>  <div class="left-block"> <div id="shortNotice"> </div> <script id="shortNotice-tpl" type="text/x-dot-template"> {{? it.content}} <div class="temporary_box"> <div class="temporary_title i_title clearfix"> <span class="pull-left">临时通知</span> </div> <div class="temporary_content"> <p> {{=it.content || ''}} </p> <div class="temporary_time"> {{=it.modifyTime || it.createTime || ''}} </div> <div class="btn-box up clearfix" style="display: none;"> <div class="open-btn btn pull-right"><span>展开全部</span><i class="iconfont icon-xiala"></i></div> <div class="close-btn btn pull-right"><span>收起</span><i class="iconfont icon-shangshou"></i></div> </div> </div> </div> {{?}} </script> <script type="application/javascript"> window.shortNoticeData = {"shopId":"168097"} || {}; </script>   <div class="CategoryBar_box"> <div class="CategoryBar_title i_title">孔网分类</div> <div class="CategoryBar_content"> <div class="CategoryBar_content_title">图书</div> <ul> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_32/" target="_blank">教材教辅考试<i>(2329)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_31/" target="_blank">计算机与互联网<i>(249)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_11/" target="_blank">工程技术<i>(234)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_4/" target="_blank">艺术<i>(229)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_7/" target="_blank">社会文化<i>(134)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_25/" target="_blank">管理<i>(114)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_13/" target="_blank">语言文字<i>(104)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_15/" target="_blank">自然科学<i>(94)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_1/" target="_blank">文学<i>(93)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_14/" target="_blank">经济<i>(85)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_44/" target="_blank">哲学心理学<i>(72)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_28/" target="_blank">教育<i>(58)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_17/" target="_blank">医药卫生<i>(47)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_12/" target="_blank">国学古籍<i>(40)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_5/" target="_blank">法律<i>(18)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_20/" target="_blank">综合性图书<i>(17)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_43/" target="_blank">小说<i>(16)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_18/" target="_blank">政治<i>(14)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_3/" target="_blank">历史<i>(13)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_26/" target="_blank">生活<i>(11)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_19/" target="_blank">体育<i>(10)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_27/" target="_blank">童书<i>(9)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/168097/cat_24/" target="_blank">军事<i>(2)</i></a></li> </ul> </div> </div> </div> </div> </div> </div>  <div class="foot-help-wrapper"></div> <div class="footer-box"> <div class="footer-wrap clearfix"> <div class="copyright-info-box">© 2002-2025 Kongfz.com 孔夫子旧书网版权所有</div> <div class="link-box"> <a class="item" target="_blank" rel="nofollow" href="https://www.kongfz.com/help/aboutus.php">关于孔网</a> <a class="item" target="_blank" rel="nofollow" href="https://www.kongfz.com/help/lianxi.html">联系我们</a> <a class="item" target="_blank" rel="nofollow" href="https://help.kongfz.com/">帮助中心</a> <a class="item" target="_blank" rel="nofollow" href="https://www.kongfz.com/help/copyright.php">版权隐私</a> <a class="item" target="_blank" rel="nofollow" href="https://www.kongfz.com/help/guanggao.php">广告业务</a> <a class="item" target="_blank" rel="nofollow" href="https://www.kongfz.com/help/zhaopin.php">工作机会</a> <a class="item" target="_blank" href="https://m.kongfz.com/">移动版</a> <a class="item" target="_blank" href="https://book.kongfz.com/">图书目录</a> <a class="item" target="_blank" href="https://bq.kongfz.com/">图书标签</a> <a class="item" target="_blank" href="https://www.kongfz.com/topic/">热搜书籍</a> <a class="item" target="_blank" href="https://www.kongfz.com/writer/">作家大全</a> </div> </div> </div>  <div class="liveroom-entry-window">  <div class="preview-entry"> <img src="../../../../img/live/close-icon.png" class="close-icon"> <img src="" class="poster" id="prepare-poster" onerror="this.src='../../../../img/live/error_image.jpg'"> <div class="info"> <h6 class="live-name">孔网啦啦啦啦啦纺织女工火锅店第三课</h6> <p class="start-time-line">开播时间：<span class="start-time">09月02日 10:30</span></p> </div> <div class="tip">即将开播，去预约</div> </div>  <div class="running-entry"> <img src="../../../../img/live/close-icon.png" class="close-icon"> <div class="video-wrap"> <video id="live-video" src="" muted loop autoplay="true"></video> <img src="" class="poster" id="running-poster" onerror="this.src='../../../../img/live/error_image.jpg'"/> </div> <div class="tip"><img src="../../../../img/live/living.gif" class="live-icon"> 直播中，去观看</div> </div> </div>  <div class="liveroom-entry-window-mini" style="bottom:260px;"> <div class="icon-wrap"> <img src="../../../../img/live/living.gif" class="live-icon"> <img src="../../../../img/live/living-static.png" class="live-icon-static"> </div> <span class="liveroom-entry-txt"></span> </div>  <script type="text/x-dot-template" id="layout-content"> {{~it.tiaojian:value:index}} <dl> <dt><i class="small-block"></i> {{? value.neirong}} {{= value.neirong}} {{?}} {{? value.delivery}} ({{= value.delivery}}) {{?}} </dt> <dt>包邮地区：</dt> <dd>{{= value.area}}</dd> </dl> {{~}} {{? it.startTime&&it.realEndTime&&it.stateText}} <p class="cross-line"></p> {{?}} {{? it.startTime&&it.realEndTime}} <dl style="margin-top: 10px"> <dt>活动时间：</dt> <dd>从{{=it.startTime}}开始,到{{=it.realEndTime}}结束</dd> </dl> {{?}} {{? it.stateText}} <dl> <dt>活动说明：</dt> <dd>{{=it.stateText}}</dd> </dl> {{?}} </script> <div id="layout-content-text" style="display: none"> </div>  <script id="exp-group" type="text/x-dot-template"> <span class="express-result"> <span class="express-val"></span> <span class="iconfont"> <i class="icon-xiala"></i> <i class="icon-shangshou"></i> </span> </span> <ul class="express-layout"> {{~it.feeInfo:value:index}} {{? index != it.key}} {{? value.shippingId == 'noLogistics' || value.shippingId == 'negotiable'}} <li index="{{= index}}">{{= value.shippingName }}</li> {{?? value.shippingId == 'group'}} <li index="{{= index}}">{{= value.shippingName }} {{= value.initialFee}}</li> {{??}} <li index="{{= index}}">{{= value.shippingName }} ￥{{= value.initialFee}}</li> {{?}} {{?}} {{~}} </ul> </script>  <script id="express-group" type="text/x-dot-template"> {{? it.other.isShowExpress}} <span class="express-box">{{= it.other.expressInfo['shippingName'] + " " + '￥' + it.other.expressInfo['initialFee'] }}</span> {{?}} {{? it.other.isShowRegisterPost}} <span class="registerPost-box">{{= it.other.registerPostInfo['shippingName'] + " " + '￥' + it.other.registerPostInfo['initialFee'] }}</span> {{?}} {{? it.other.otherInfo.length == 1}} <div class="express-result-outbox"> <span class="express-result one"> <span class="express-val"></span> </span> </div> {{?}} {{? it.other.otherInfo.length > 1}} <div class="express-result-outbox"> <span class="express-result"> <span class="express-val"></span> <span class="iconfont"> <i class="icon-xiala"></i> <i class="icon-shangshou"></i> </span> </span> <ul class="express-layout"> {{~it.other.otherInfo:value:index}} {{? index != it.key}} {{? value.shippingId == 'noLogistics' || value.shippingId == 'negotiable'}} <li index="{{= index}}">{{= value.shippingName }}</li> {{?? value.shippingId == 'group'}} <li index="{{= index}}">{{= value.shippingName }} {{= value.initialFee}}</li> {{??}} <li index="{{= index}}">{{= value.shippingName }} ￥{{= value.initialFee}}</li> {{?}} {{?}} {{~}} </ul> </div> {{?}} </script>  <script id="add-cart-layout" type="text/template"> <div class="cart-text"><p><i class="iconfont icon-gouwuche2"></i>成功加入购物车</p></div> <div class="cart-link clearfix"><a>去购物车结算</a></div>', </script>  <script id="template_notice_item" type="text/template"> <div class="win_content" id="product_change"> <ul class="bt clearfix"> <li class="part_left pull-left">商品</li> <li class="part_right pull-right">提示信息</li> </ul> <div id='book_content_box' class="book_content_box" style="height: <%= function(){ var count = 0; for (var property in item) { if (Object.prototype.hasOwnProperty.call(item, property)) { count++; } } return 66*count; }() %>px"> <% $.each(item, function(i, book){ %> <ul class="clearfix <%= ( !KFZ.itemAllFail && book.detail != 'noticeItem') ? 'bg_gray':'' %>"> <li class="part_left pull-left"> <div class="shop_name"><a><%= book.itemName %></a></div> <div class="number"> <span class="<%= book.detail == 'noticeItem' ? 'del':'' %> m_r10"> <% if(book.detail == 'noticeItem' || book.detail == 'invalidItem'){ %> ¥<%= (+book.originPrice).toFixed(2) %> ×<%= book.originStock %> <% }else{ %> ¥<%= (+book.price).toFixed(2) %> ×<%= book.numbers %> <% } %> </span> <% if(book.detail == 'noticeItem'){ %> <% if(book.currentPrice){ %> <span class="red">¥<%= (+book.currentPrice).toFixed(2) %> ×<%= book.currentStock || book.originStock %></span> <% }else{ %> <span class="red">¥<%= (+book.originPrice).toFixed(2) %> ×<%= book.currentStock || book.originStock %></span> <% } %> <% } %> </div> </li> <li class="part_right pull-right"><%= book.desc %></li> </ul> <% }); %> </div> </script>  <script id="shop-reviews-nav" type="text/x-dot-template"> <div class="shop-reviews"> <div class="shop-reviews-label clear-fix"> <div class="shop-reviews-rate"> <div class="shop-reviews-rate-text">好评率</div> <div class="shop-reviews-rate-socre"><span class="shop-reviews-rate-nu">{{=it.goodReviewRate}}</span><span class="shop-reviews-rate-perc">%</span></div> </div> <div class="shop-reviews-label-itemW"> <div class="shop-reviews-label-wrapper"> {{ for(var prop in it.reviewCusTag) { }} <span class="shop-reviews-label-item" data-rate="{{= it.reviewCusTag[prop].rating}}">{{= it.reviewCusTag[prop].tagName }}({{= it.reviewCusTag[prop].num}})</span> {{ } }} <div class="shop-reviews-emptyLabel">此店铺暂时还没有买家印象哦~</div> </div> </div> </div> <div class="filter-area clear-fix"> <ul class="review-filter clear-fix"> <li class="selected" data-lev="{{=it.reviewPlainTag[0].rating}}"> <div class="iconfont-box"> <i class="iconfont icon-yuanxuankuang"></i> <i class="iconfont icon-yuangouxuan"></i> </div> {{=it.reviewPlainTag[0].tagName}} <span class="total-count">{{=it.reviewPlainTag[0].num}}</span> </li> <li class="" data-lev="{{=it.reviewPlainTag[1].rating}}"> <div class="iconfont-box"> <i class="iconfont icon-yuanxuankuang"></i> <i class="iconfont icon-yuangouxuan"></i> </div> {{=it.reviewPlainTag[1].tagName}} <span class="good-count">{{=it.reviewPlainTag[1].num}}</span> </li> <li class="" data-lev="{{=it.reviewPlainTag[2].rating}}"> <div class="iconfont-box"> <i class="iconfont icon-yuanxuankuang"></i> <i class="iconfont icon-yuangouxuan"></i> </div> {{=it.reviewPlainTag[2].tagName}} <span class="good-count">{{=it.reviewPlainTag[2].num}}</span> </li> <li class="" data-lev="{{=it.reviewPlainTag[3].rating}}"> <div class="iconfont-box"> <i class="iconfont icon-yuanxuankuang"></i> <i class="iconfont icon-yuangouxuan"></i> </div> {{=it.reviewPlainTag[3].tagName}} <span class="common-count">{{=it.reviewPlainTag[3].num}}</span> </li> <li class="" data-lev="{{=it.reviewPlainTag[4].rating}}"> <div class="iconfont-box"> <i class="iconfont icon-yuanxuankuang"></i> <i class="iconfont icon-yuangouxuan"></i> </div> {{=it.reviewPlainTag[4].tagName}} <span class="bad-count">{{=it.reviewPlainTag[4].num}}</span> </li> </ul> {{? it.onlyItem != 0}} <div class="filter-current"> <div class="iconfont-box"> <i class="iconfont icon-fangxuankuang"></i> <i class="iconfont icon-fanggouxuan"></i> </div> <span>只看当前商品评价</span> </div> {{?}} </div> <div class="shop-reviews-container"> <div class="review-container-inner"> </div> </div> <div class="review-hide-content"> <div class="review-hide-content-auto"></div> <div class="review-hide-content-noHelp">已折叠对您购买参考帮助不大的评价 <span class="review-hide-content-click">查看</span></div> </div> <div class="pager-wrapper clearfix"> </div> </div> </script> <script id="shop-reviews-content" type="text/x-dot-template"> {{~it:reviewItem:reviewIndex}} <div class="review-content clear-fix"> <div class="review-user-pic"><img src="{{=reviewItem.userPic || '/img/pc/default_avator.jpg'}}" onerror="javascript:this.src='/img/pc/default_avator.jpg';" alt=""></div> <div class="review-content-block"> <div class="review-content-userInfo"> <span class="review-content-userName">{{=reviewItem.appraiserNickname}}</span> <span class="marker-rank rank-style-{{=reviewItem.buyerClass}}"></span> </div> <div class="review-content-shopName">{{=reviewItem.itemName}}</div> <div class="review-content-mainTxt">{{=reviewItem.content}}</div> {{if (reviewItem["reviewPic"].length > 0) {}} <div class="review-content-imageWrapper"> <div class="review-content-imageWrapper-small clear-fix"> {{~reviewItem.reviewPic:picItem:reviewImgIndex}} <div class="review-content-imageItem" data-index="{{= reviewIndex}}-{{= reviewImgIndex}}"><img src="{{= picItem.small.imgUrl}}" alt=""> {{? reviewItem.contentType == 1}} {{? picItem.big.width > picItem.big.height}} <img class="hover-big-img" style="width: 209px;height: {{= picItem.big.height * 209 / picItem.big.width + 'px' }}" src="{{= picItem.big.imgUrl}}" alt=""> {{??}} <img class="hover-big-img" style="height: 228px;width: {{= picItem.big.width * 228 / picItem.big.height + 'px' }}" src="{{= picItem.big.imgUrl}}" alt=""> {{?}} {{?}} </div> {{~}} </div> <div class="review-content-bigImg empty_height" id="bigImg{{=reviewIndex}}"> <div class="review-content-bigImg-close"><img src="/img/pc/icon/close.png" alt=""></div> <div class="review-content-bigImg-slideLeft"><img class="slideImg" src="/img/pc/slide-left.png" alt=""></div> <img src="" alt=""> <div class="review-content-bigImg-slideRight"><img class="slideImg" src="/img/pc/slide-right.png" alt=""></div> </div> </div> {{ } }} {{? reviewItem.reviewTag.length > 0 }} <div class="review-item-tagWrapper clear-fix"> {{~reviewItem.reviewTag:value}} <span class="review-item-tagWrapper-span">{{=value.tagName}}</span> {{~}} </div> {{?}} {{? reviewItem.recontent}} <div class="review-owner-reply"><span class="review-owner-reply-label">店主回复：</span><span class="review-owner-reply-content">{{= reviewItem.recontent}}</span></div> {{?}} <div class="review-content-time">{{=reviewItem.reviewTime}}</div> </div> {{? reviewIndex + 1 < it.length}} <div class="review-review-divid"></div> {{?}} </div> {{~}} </script>  <script id="other_special" type="text/x-dot-template"> {{?it.specialThemeExist==='true'}} <div class="other_special_title">本店其他专题</div> {{??}} <div class="other_special_title">本店专题</div> {{?}} <ul class="other_special_list clearfix"> {{~it.otherThemeList:value:index}} <li><a href="{{=value.specialHref}}" target="_blank">{{=value.specialName}}</a></li> {{~}} </ul> </script> <script type="text/javascript"> window.DETAIL || (window.DETAIL = {}); DETAIL.shopInfo = {}; DETAIL.itemInfo = {}; DETAIL.shopId = 168097; DETAIL.shopKeeperId = 4763085; DETAIL.isShopKeepper = 0; DETAIL.isAdmin = 0; DETAIL.shopInfo = {"shopId":168097,"shopName":"\u6e05\u7075\u4e66\u9601","nickname":"\u6e05\u8377\u7075\u513f","userId":4763085}; DETAIL.itemInfo = {"itemId":7290286747,"bizType":1,"catId":28000000000000000,"itemName":"Web\u524d\u7aef\u5f00\u53d1\u6848\u4f8b\u6559\u7a0b\u2014\u2014HTML5+CSS3+JavaScript+JQuery+Bootst","price":14.95,"number":3,"oriPrice":59.8,"booklibId":5413979,"bearShipping":"buyer","isUseMould":1,"mouldId":19631,"weight":0,"weightPiece":0,"productAreaAddress":{"provId":"1000000000","provName":"\u5317\u4eac\u5e02","cityId":1005000000,"cityName":"\u6d77\u6dc0\u533a"},"shippingMould":[]}; DETAIL.isbn = "9787115536037"; </script> <script src="//res2.kongfz.com/mobile/js/track.js?2019070314"></script> <script> var status = 1; window.onload=function () { var id= DETAIL.shopInfo.shopId; var itemname= DETAIL.itemInfo.itemName; var itemid= DETAIL.itemInfo.itemId; var shopid= DETAIL.shopInfo.shopId; var quality="八五品"; track.send('v_bkdetail',{shopid: parseInt(id),shopname:DETAIL.shopInfo.shopName,itemid:itemid,itemname:itemname,shopid:shopid,quality:quality,status:status,isbn:DETAIL.isbn,catnum:DETAIL.itemInfo.catId}); } </script> <script type="text/javascript"> if (!Array.prototype.filter) { Array.prototype.filter = function (fun /*, thisArg */) { "use strict"; if (this === void 0 || this === null) throw new TypeError(); var t = Object(this); var len = t.length >>> 0; if (typeof fun !== "function") throw new TypeError(); var res = []; var thisArg = arguments.length >= 2 ? arguments[1] : void 0; for (var i = 0; i < len; i++) { if (i in t) { var val = t[i]; if (fun.call(thisArg, val, i, t)) res.push(val); } } return res; }; } function openBigImg(e) { e = e || window.event; if (e.preventDefault) { e.preventDefault(); e.stopPropagation(); } else { e.cancelBubble = true; e.returnValue = false; } var target = e.currentTarget || e.srcElement; if (target.tagName.toLowerCase() !== 'a') { target = target.parentNode } var index = target.getAttribute('data-index'), pathArr = location.pathname.split("/").filter(function (item) { return item !== "" }), shopId = pathArr[0], itemId = pathArr[1]; window.open(KFZ.site.book + "item_pic.do?shopId=" + shopId + "&itemId=" + itemId + "&imgId=" + index, "_blank"); return false } if (typeof JSON !== 'object') { JSON = {}; } (function () { 'use strict'; function f(n) { // Format integers to have at least two digits. return n < 10 ? '0' + n : n; } if (typeof Date.prototype.toJSON !== 'function') { Date.prototype.toJSON = function () { return isFinite(this.valueOf()) ? this.getUTCFullYear() + '-' + f(this.getUTCMonth() + 1) + '-' + f(this.getUTCDate()) + 'T' + f(this.getUTCHours()) + ':' + f(this.getUTCMinutes()) + ':' + f(this.getUTCSeconds()) + 'Z' : null; }; String.prototype.toJSON = Number.prototype.toJSON = Boolean.prototype.toJSON = function () { return this.valueOf(); }; } var cx, escapable, gap, indent, meta, rep; function quote(string) { escapable.lastIndex = 0; return escapable.test(string) ? '"' + string.replace(escapable, function (a) { var c = meta[a]; return typeof c === 'string' ? c : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); }) + '"' : '"' + string + '"'; } function str(key, holder) { var i, // The loop counter. k, // The member key. v, // The member value. length, mind = gap, partial, value = holder[key]; if (value && typeof value === 'object' && typeof value.toJSON === 'function') { value = value.toJSON(key); } if (typeof rep === 'function') { value = rep.call(holder, key, value); } switch (typeof value) { case 'string': return quote(value); case 'number': return isFinite(value) ? String(value) : 'null'; case 'boolean': case 'null': return String(value); case 'object': if (!value) { return 'null'; } gap += indent; partial = []; if (Object.prototype.toString.apply(value) === '[object Array]') { length = value.length; for (i = 0; i < length; i += 1) { partial[i] = str(i, value) || 'null'; } v = partial.length === 0 ? '[]' : gap ? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']' : '[' + partial.join(',') + ']'; gap = mind; return v; } if (rep && typeof rep === 'object') { length = rep.length; for (i = 0; i < length; i += 1) { if (typeof rep[i] === 'string') { k = rep[i]; v = str(k, value); if (v) { partial.push(quote(k) + (gap ? ': ' : ':') + v); } } } } else { for (k in value) { if (Object.prototype.hasOwnProperty.call(value, k)) { v = str(k, value); if (v) { partial.push(quote(k) + (gap ? ': ' : ':') + v); } } } } v = partial.length === 0 ? '{}' : gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}' : '{' + partial.join(',') + '}'; gap = mind; return v; } } if (typeof JSON.stringify !== 'function') { escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; meta = { // table of character substitutions '\b': '\\b', '\t': '\\t', '\n': '\\n', '\f': '\\f', '\r': '\\r', '"': '\\"', '\\': '\\\\' }; JSON.stringify = function (value, replacer, space) { var i; gap = ''; indent = ''; if (typeof space === 'number') { for (i = 0; i < space; i += 1) { indent += ' '; } } else if (typeof space === 'string') { indent = space; } rep = replacer; if (replacer && typeof replacer !== 'function' && (typeof replacer !== 'object' || typeof replacer.length !== 'number')) { throw new Error('JSON.stringify'); } return str('', {'': value}); }; } if (typeof JSON.parse !== 'function') { cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; JSON.parse = function (text, reviver) { var j; function walk(holder, key) { var k, v, value = holder[key]; if (value && typeof value === 'object') { for (k in value) { if (Object.prototype.hasOwnProperty.call(value, k)) { v = walk(value, k); if (v !== undefined) { value[k] = v; } else { delete value[k]; } } } } return reviver.call(holder, key, value); } text = String(text); cx.lastIndex = 0; if (cx.test(text)) { text = text.replace(cx, function (a) { return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); }); } if (/^[\],:{}\s]*$/ .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@') .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']') .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) { j = eval('(' + text + ')'); return typeof reviver === 'function' ? walk({'': j}, '') : j; } throw new SyntaxError('JSON.parse'); }; } }()); </script> <script src="/js/Pc_detail_index_page-526aee37a2.js"></script>  <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script>  <link rel="stylesheet" href="//res2.kongfz.com/libs/viewerjs/detail-viewer.css?v=8" > <script src="//res2.kongfz.com/libs/viewerjs/detail-viewer.js?v=9"></script>  <link rel="stylesheet" href="//res2.kongfz.com/libs/image-viewer/index.css?v=2@2" > <script src="//res2.kongfz.com/libs/image-viewer/index.js?v=2@2"></script> <link href="//res2.kongfz.com/libs/tcplayer/tcplayer.min.css?v=1" rel="stylesheet" /> <script src="//res2.kongfz.com/libs/tcplayer/flv.min.js"></script> <script src="//res2.kongfz.com/libs/tcplayer/hls.min.js"></script> <script src="//res2.kongfz.com/libs/tcplayer/tcplayer.min.js"></script> <script> var __pageName = 'detail'; </script> <script type="text/javascript" src="//res.kongfz.com/browserCollect/browserCollect.js?v=1.0.2"></script> </body> </html>

图书

Web前端开发案例教程——HTML5+CSS3+JavaScript+JQuery+Bootst