第1章 HTML5基础
1.1 HTML概述
1.1.1 什么是HTML
1.1.2 HTML的发展历程
1.2 HTML5文件的基本结构
1.2.1 认识标记
1.2.2 认识元素
1.2.3 HTML文件结构
1.3 HTML5的基本标记
1.3.1 文件类型说明
1.3.2 文件开始标记
1.3.3 文件头部标记
1.3.4 文件标题标记
<br/> 1.3.5 元信息标记<meta><br/> 1.3.6 网页主体标记<body><br/> 1.3.7 页面注释标记<!-- --><br/> 1.4 编写我的第一个HTML文件<br/> 1.4.1 使用“记事本”编写<br/> 1.4.2 使用WebStorm工具编写<br/> 1.5 新手疑难问题解答<br/> 1.6 实战训练<br/>第2章 网页中的文本<br/> 2.1 设置标题格式<br/> 2.1.1 标题标记<br/> 2.1.2 标题对齐方式<br/> 2.2 设置文字格式<br/> 2.2.1 文字的字体、大小和颜色<br/> 2.2.2 文字的斜体、下画线和删除线<br/> 2.2.3 公式的上标和下标<br/> 2.3 设置段落格式<br/> 2.3.1 段落标记<br/> 2.3.2 段落换行标记<br/> 2.3.3 段落原格式标记<br/> 2.4 网页的水平线<br/> 2.4.1 添加水平线<br/> 2.4.2 设置水平线的样式<br/> 2.5 新手疑难问题解答<br/> 2.6 实战训练<br/>第3章 图像和超链接<br/> 3.1 添加图像<br/> 3.1.1 了解图像格式<br/> 3.1.2 图像中的路径<br/> 3.1.3 插入图像<br/> 3.2 设置图像属性<br/> 3.2.1 图像的大小与边框<br/> 3.2.2 图像间距和对齐方式<br/> 3.2.3 替换文本与提示文字<br/> 3.3 网页中的超链接<br/> 3.3.1 文本链接<br/> 3.3.2 下载链接<br/> 3.3.3 书签链接<br/> 3.3.4 电子邮件链接<br/> 3.4 图像的超链接<br/> 3.4.1 创建图片链接<br/> 3.4.2 图像热点链接<br/> 3.5 新手疑难问题解答<br/> 3.6 实战训练<br/>第4章 CSS3基础入门<br/> 4.1 CSS概述<br/> 4.1.1 CSS发展历史<br/> 4.1.2 CSS语法规则<br/> 4.1.3 CSS注释方式<br/> 4.2 HTML5中调用CSS的方法<br/> 4.2.1 行内样式<br/> 4.2.2 内嵌样式<br/> 4.2.3 链接样式<br/> 4.2.4 导入样式<br/> 4.3 CSS3中的选择器<br/> 4.3.1 标记选择器<br/> 4.3.2 全局选择器<br/> 4.3.3 类与ID选择器<br/> 4.3.4 组合选择器<br/> 4.3.5 属性选择器<br/> 4.3.6 伪类选择器<br/> 4.3.7 结构伪类选择器<br/> 4.3.8 UI元素状态伪类选择器<br/> 4.4 新手疑难问题解答<br/> 4.5 实战训练<br/>第5章 CSS3常用属性<br/> 5.1 文本相关属性<br/> 5.1.1 定义字体类型<br/> 5.1.2 定义字体大小<br/> 5.1.3 定义文字的颜色<br/> 5.1.4 定义文本的水平对齐方式<br/> 5.2 图片相关属性<br/> 5.2.1 定义文字环绕图片的样式<br/> 5.2.2 定义图片与文字的间距<br/> 5.3 边框相关属性<br/> 5.3.1 边框样式<br/> 5.3.2 边框颜色<br/> 5.3.3 边框线宽<br/> 5.3.4 边框半径<br/> 5.4 背景相关属性<br/> 5.4.1 设置背景颜色<br/> 5.4.2 设置背景图像<br/> 5.4.3 平铺背景图像<br/> 5.4.4 定位背景图像<br/> 5.4.5 设置背景图像大小<br/> 5.5 新手疑难问题解答<br/> 5.6 实战训练<br/>第6章 CSS3的高级应用<br/> 6.1 盒子模型<br/> 6.1.1 盒子模型的外边距<br/> 6.1.2 盒子模型的边框<br/> 6.1.3 盒子模型的内边距<br/> 6.1.4 盒子模型的高度和宽度<br/> 6.1.5 盒子模型的相关属性<br/> 6.2 动画与特效<br/> 6.2.1 变换动画效果<br/> 6.2.2 过渡动画效果<br/> 6.2.3 帧动画效果<br/> 6.3 新手疑难问题解答<br/> 6.4 实战训练<br/>第7章 设计列表与菜单<br/> 7.1 认识列表标记<br/> 7.1.1 无序列表标记<br/> 7.1.2 有序列表标记<br/> 7.1.3 自定义列表标记<br/> 7.1.4 列表的嵌套<br/> 7.2 使用CSS设计列表样式<br/> 7.2.1 无序项目列表<br/> 7.2.2 有序项目列表<br/> 7.2.3 图片列表样式<br/> 7.2.4 列表复合属性<br/> 7.3 使用CSS设计菜单样式<br/> 7.3.1 制作动态导航菜单<br/> 7.3.2 制作水平方向菜单<br/> 7.3.3 制作多级菜单列表<br/> 7.4 新手疑难问题解答<br/> 7.5 实战训练<br/>第8章 表格与<div>标记<br/> 8.1 简单表格<br/> 8.1.1 创建简单表格<br/> 8.1.2 表格的表头<br/> 8.2 表格的高级应用<br/> 8.2.1 表格的样式<br/> 8.2.2 表格的合并<br/> 8.2.3 表格的分组<br/> 8.3 使用CSS3设计表格样式<br/> 8.3.1 设置表格颜色<br/> 8.3.2 设置表格边框<br/> 8.3.3 表格标题位置<br/> 8.3.4 隐藏空单元格<br/> 8.3.5 单元格的边距<br/> 8.4 <div>与<span>标记<br/> 8.5 新手疑难问题解答<br/> 8.6 实战训练<br/>第9章 网页中的表单<br/> 9.1 表单概述<br/> 9.1.1 表单定义<br/> 9.1.2 表单标记<form><br/> 9.2 输入标记<br/> 9.2.1 文本框<br/> 9.2.2 单选按钮和复选框<br/> 9.2.3 按钮<br/> 9.2.4 图像域和文件域<br/> 9.3 文本域与列表<br/> 9.3.1 文本域<br/> 9.3.2 列表/菜单<br/> 9.4 使用CSS3设计表单样式<br/> 9.4.1 表单字体样式<br/> 9.4.2 表单边框样式<br/> 9.4.3 表单背景样式<br/> 9.4.4 表单按钮样式<br/> 9.4.5</div>
<div class="showMore"><i class="bShowIcon"></i><span class="showText">展开</span></div>
</div>
</div>
</div>
</div>
</div>
<!--加入我的书架成功弹框-->
<div class="joinArea">
<div class="cgPopupMask"></div>
<div class="joinCon">
<img src="/tcshop/resource/front-resource/images/info07.png" alt="" />
<div class="joinText">
加入书架成功！
</div>
<div class="fn-clear">
<a class="goOnBuy fn-left" href="javascript:;" onclick="continueSee()">继续借书</a>
<a class="goAccount fn-left" href="/tcshop/1111/cart/cart.html">去结算</a>
</div>
</div>
</div>
<!--收藏图书弹框-->
<div class="delColArea">
<div class="cgPopupMask"></div>
<div class="colCon">
<div class="cgPopupConTop">
<div class="hisPopTit">
收藏图书成功！
</div>
<div class="iKnow">
我知道了(<span class="iKnowTime">3</span>)
</div>
</div>
</div>
</div>
<!-- 评论弹窗 -->
<div class="delColArea" id="comment_view">
<div class="cgPopupMask"></div>
<div class="commont_div">
<div style="margin-top:10px;margin-bottom:10px;margin-left:-10px;">
发表书评
</div>
<div style="border:2px solid #DDD; padding: 5px;" >
<textarea style="width:100%;height:150px;resize:none;" id="comment">
</textarea>
</div>
<div style="text-align:right;margin-top:5px;">
<button onclick="hideComment()" style="padding:4px;background:#888888;color:#FFFFFF;margin-right:10px;border-radius:2px;cursor:pointer">
取消
</button>
<button onclick="sendComment()" style="padding:4px;background:#dc281c;color:#FFFFFF;border-radius:2px;cursor:pointer">
发表
</button>
</div>
</div>
</div>
<!--登录弹框-->
<div class="cgPopupArea" id="loginArea">
<div class="cgPopupMask"></div>
<div class="cgPopupCon">
<div class="cgPopupConTop">
<i class="cloLogin cloPop"></i>
<div class="readLogin">读者登录</div>
<!--手机注册的图书馆code字符串 例如：1039,1096-->
<p class="warmPrompt">
请选择您读者所在的图书馆
</p>
<div class="loginWrap">
<div class="loginRoom loginSel fn-clear">
<div class="loginIcon loginRoomIcon fn-left">
</div>
<font class="roomName fn-left" id="pLib">选择图书馆</font>
<select id="unitLibCode" class="selDown " onChange="changeLib(this)">
<option selected="selected" value="lib_zjlib">省本级</option>
<option value="lib_330400000">嘉兴市</option>
<option value="lib_330500000">湖州市</option>
<option value="lib_330700000">金华市</option>
<option value="lib_331100000">丽水市</option>
<option value="lib_331000000">台州市</option>
<option value="lib_zslib">舟山市</option>
<option value="lib_qzlib">衢州市</option>
<option value="lib_wzlib">温州市</option>
<option value="lib_hzlib">杭州市</option>
<option value="lib_nblib">宁波市</option>
<option value="lib_sxlib">绍兴市</option>
</select>
<div class="flag03">
</div>
</div>
<div class="loginError">
</div>
</div>
<div class="loginWrap" id="cUnionWrap" >
<div class="loginRoom loginSel fn-clear">
<div class="loginIcon loginRoomIcon fn-left">
</div>
<font class="roomName fn-left" id="cLib">浙江图书馆</font>
<select id="cLibSelect" class="selDown" onChange="changeCLib()">
<option value="330000000,zjlib">浙江图书馆</option>
</select>
<div class="flag03">
</div>
</div>
<div class="loginError">
</div>
</div>
<div class="loginWrap">
<div class="loginSel fn-clear">
<div class="loginIcon loginHead fn-left">
</div>
<input class="userID fn-left" type="text" name="username"
id="username" value="" placeholder="请输入身份证号" onblur="accCheck('acc')"/>
</div>
<div class="loginError" id="accMsg">
</div>
</div>
<div class="loginWrap">
<div class="loginSel fn-clear">
<div class="loginIcon loginPass fn-left ">
</div>
<input class="userPass fn-left " type="password" name="password"
id="password" value="" placeholder="请输入读者密码" onblur="accCheck('pwd')"/>
</div>
<div class="loginError" id="pwdMsg">
</div>
</div>
<div class="loginWrap">
<div class="fn-clear">
<div class="loginSel loginCode fn-left codeWrap">
<div class="loginIcon loginCode fn-left ">
</div>
<input class="codeInput fn-left" type="text" name="vcode" id="vcode" value="" placeholder="验证码" />
</div>
<div class="codeImg fn-left">
<img src="/tcshop/ValidateImage.do"
id="codeImg"
alt="点击获取验证码"
title="点击获取验证码"
onclick="this.src='/tcshop/ValidateImage.do?t='+new Date().getTime();"/>
</div>
</div>
</div>
<div class="clickLogin" id='readerLogin'>
登录
</div>
<div style="float:right">
没有读者证？<a href="/tcshop/1111/help/168.html" style="color: #175199;">在线办证</a>
</div>
</div>
</div>
</div>
<style>
.commont_div {
width: 350px;
height: 250px;
margin-left: -185px;
padding: 0 30px;
background: #fff;
position: fixed;
left: 50%;
top: 35%;
z-index: 3;
border-radius: 5px;
font-size: 16px;
}
</style>
<script type="text/javascript">
$(function(){
loadBookcovers();
loadBookInfo("TC_TEST_OPCS",'9787302590200','1111');
})
//init the value
var seller="XHSD";
var isbn="9787302590200";
var isOverHoldingCount="0";
var isNotUnitCatalog="0";
var status="2";
var productId="18469848";
var incart="";
var opacUrl="";
var orglib="330000000";
var jdcatalog2="";
var jdcatalog3="";
var seller="XHSD";
var jdSkuId="4MNTUTAxNA==";
var stock = "-1";
var pUnit = "";
var packnum = "0";
var libsellerTag="false";
var bookloginType="0";
var libunion="1";
var unitcode = "1111";
$(function(){
console.log(unitcode);
if(unitcode == "1212" || unitcode == "1039"){
$("#comment").val("");
loadComment();
}
});
// 加载 用户评论
function loadComment(){
$.ajax({
url: "/tcshop/1111/comment/findBookComment?productID="+productId,
data: {offset: 0, pageSize: 10},
success: function(res){
console.log(">>>>>>>获取的评论res");
console.log(res);
// 是否获取成功
if(res.result == "false"){
$("#comment_content").append("<div style='text-align:center;'>暂时没有评论哦~！</div>");
return ;
}
// 评论内容 list
var commentList = res.data.list;
if(commentList.length == 0){
$("#comment_content").append("<div style='text-align:center;'>暂时没有评论哦！</div>");
return ;
}
// 遍历
var c_div = "";
var nickname = ""; // 昵称
var date = ""; // 日期
for(var i = 0 ; i < commentList.length ; i++){
// 昵称 部分隐藏
nickname = commentList[i].nickname;
if(nickname == null || nickname == ""){
nickname = "默**";
}else{
nickname = nickname.substr(0,1)+"**";
}
date = commentList[i].createdate.split(" ")[0];
c_div = '<div style="margin-bottom:8px;"><div style="color: #AAA;">';
c_div += '<span style="margin-right:2px;">'+nickname+'</span>';
c_div += '<span style="font-size: 12px;">'+date+'</span></div>';
c_div += '<div style="padding-left:15px;">'+commentList[i].content+'</div></div>';
$("#comment_content").append(c_div);
}
},
error: function(err){
console.error(err);
$("#comment_content").append("<div style='text-align:center;'>暂时没有评论哦!!!</div>");
return ;
}
});
}
// 显示发表书评
function showComment(){
// 未登录，显示 登录框
dialogMsg("请您先登录！")
showLoginView();
}
// 隐藏发表书评
function hideComment(){
$("#comment_view").hide(500);
}
// 发表书评
function sendComment(){
var content = $("#comment").val()+"";
content = content.replace(/(^\s*)|(\s*$)/g, "");
if(content == ""){
dialogMsg("内容不能为空哦 ！");
return;
}
loading("提交中...")
$.ajax({
url: "/tcshop/1111/comment/releaseComment",
data: {productID: productId, content: content, status: 'n'},
success: function(res){
console.log(">>>>>>>发表的评论结果res");
console.log(res);
closeLoading();
// 显示消息
dialogMsg(res.msg);
// 是否获取成功
if(res.result == "false"){
if(res.msg.indexOf("请先登录") != -1){
showLoginView();
hideComment();
}
return ;
}
dialogMsg("提交成功！");
$("#comment").val("");
hideComment();
},
error: function(err){
closeLoading();
console.error(err);
dialogMsg("评论失败哦！！！");
return ;
}
});
}
</script>
<!--放大镜-->
<script src="/tcshop/resource/front-resource/js/jquery.jqzoom.js"></script>
<script src="/tcshop/resource/front-resource/js/jquery-labelauty.js"></script>
<script src="/tcshop/resource/front-resource/js/lanrenzhijia.js"></script>
<script type="text/javascript" src="/tcshop/resource/js/UnionLib.js?version=20220601"></script>
<script src="/tcshop/resource/front-resource/js/acc.js?version=20220601"></script>
<script src="/tcshop/resource/front-resource/js/product.js?version=20220601"></script>
<div class="footWrap">
<div class="linkWrap">
<div class="linkContent">
<!--修改start-->
<div class="fn-clear">
<ul class="linkList fn-left">
<li class="linkTit">新手上路</li>
<li>
<a href="/tcshop/1111/help/54.html" target="_blank">
快速入门
</a>
</li>
</ul>
<ul class="linkList fn-left">
<li class="linkTit">购物指南</li>
<li>
<a href="/tcshop/1111/help/72.html" target="_blank">
常见问题
</a>
</li>
</ul>
<ul class="linkList fn-left">
<li class="linkTit">支付方式</li>
<li>
<a href="/tcshop/1111/help/56.html" target="_blank">
支付方式
</a>
</li>
</ul>
<ul class="linkList fn-left">
<li class="linkTit">配送方式</li>
<li>
<a href="/tcshop/1111/help/73.html" target="_blank">
快递送货
</a>
</li>
</ul>
<ul class="linkList fn-left">
<li class="linkTit">关于我们</li>
<li>
<a href="/tcshop/1111/help/58.html" target="_blank">
关于我们
</a>
</li>
</ul>
<ul class="linkList fn-left">
<li class="linkTit">特色服务</li>
<li>
<a href="/tcshop/1111/help/81.html" target="_blank">
在线办证
</a>
</li>
</ul>
</div>
<!--修改end-->
</div>
</div>
<!--页尾-->
<div class="footer">
©广州图创计算机软件开发有限公司
</div>
</div>
</body>
</html>
