总结《茶韵》中踩的坑（已解决）
一.index页面
1.基于jquery的三级导航菜单。
①先实现二级普通下拉菜单，动态下拉菜单实现步骤：
（1）利用jquery的ready()函数来实现在页面整体加载完成后执行特殊效果。
（2）在function()内部实现主菜单的鼠标进入事件，所有的下拉效果都在这个事件中。
（3）先停止播放所有特效动画并隐藏下级菜单。
（4）获取下级菜单对象，重新设定下级菜单位置。
（5）停止下级菜单其他动画并使其下拉。
（6）添加下级菜单的鼠标移出事件，让下级菜单向上收起。
应用到的jquery函数有：ready()、mouseenter()、stop()、hide()、parent（）、next()、css()、offset()、height()、slideDown()、slideUp()、mouseleave().
②在原有下拉菜单的基础上添加第二级子菜单，第二级子菜单横向显示。与①类似：获取到顶层菜单后模拟顶层菜单的鼠标悬停与离开事件，并设置下层菜单的可见状态，多级下拉菜单实现步骤：
（1）将所有子菜单隐藏。
（2）设定主菜单项及各级子菜单项的模仿悬停事件。
（3）在模仿悬停事件中设定鼠标悬停则显示下级菜单，如果鼠标离开则收回菜单。
应用到的jquery函数有：ready（）、css()、hover()、find()、show()、jquery属性first.
美观的css样式如ul、ul li、ul li a省略，只记录下主体部分。
（一）无序列表作为菜单主体
<ul id="mainmanu">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript</a></li>
<ul>
<li><a href="#">3.1 jquery</a>
<ul>
<li><a href="#">3.1.1 Download</a></li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
</ul>
（二）引入jquery库(最新版jquery库是3.4.1版本的，但我为了兼容低版本ie所以用了2版本以下的，可自行去jquery官网下载）
<script src="js/jquery-3.4.1.min.js" type="text/javascript“></script>
（三）添加js代码
<script type="text/javascript">
$(document).ready(function(){
$(" # mainmanu ul ").css({display: "none"});
$(" # mainmanu li").hover(function(){
$(this).find('ul:first').css({visibility: "visible"})
.show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
});
</script>
（四）考虑了性能，所以我加了一个ready的预加载js代码。
2.后来由于界面需求，所以要把导航条随屏幕滚动始终固定在页面最上方。
本来考虑用js，后来想了想css也能做到，而且不用加载脚本。
（一）html
<div id="daohang">导航所在的div容器内容</div>
(二）css
#daohang{
position:fixed;
top:0;
left:0;
width:100%;
height:25px;
z-index:99;
}
3.分屏实现。本来也是考虑用js，后来复习了下html5，发现可以用锚点实现，于是采用这种方法。
①如定义了<div id="firstContent”></div>,要点击一个图片跳转到下一屏怎么办？对了点击的必须是图片即image,后缀是png,jpg等的。我试过用svg绘图，.svg的跳转功能在其它浏览器不起作用，只在ie浏览器才起作用，所以全部做完以后换成了.png的图片。
记录一下做的无用功svg图，在html中<embed src="svg/arrow.svg" type="image/svg+xml">
arrow.svg内容如下：
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "
http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd
">
<svg width="40" height="40" version="1.1" fill="none" stroke="#CCCCCC" stroke-width="3">
<path d="M0 1L19 21L39 0" fill="none" fill-opacity="0" stroke="#999999" stroke-width="3" />
<path d="M5 25L18 38L32 25" fill="none" fill-opacity="0" stroke="#CCCCCC" stroke-width="3" />
</svg>
即这个图片
②在图片前加上链接即可<a href="#secondContent"><img src="./images/008.png"></a>
注意链接一定得加#，则可以跳转到第二屏。
4.文字竖排显示分别采用了两种方法实现。
①因为文字较少，14字短诗，所以直接用了css的line-height属性，直接设置它为24px;再把font-size属性设为1.5em;
em和px可以相互转换，1em=16px;
②解决大段文字竖排， 采用了css3的writing-mode属性，考虑兼容性所以还要写个加-webkit-前缀的writing-mode属性。如：
.intro{-webkit-writing-mode:vertical-rl;writing-mode:tb-rl;}这里采用float浮动+margin百分比定位。
同理，行高line-height也要设置，这里采用margin-left定位。
段落宽高自行添加吧。
5.橙色书签。
①过渡动画采用了css3的transition:height 4s；考虑兼容性加-webkit-前缀。
②css3的圆角border-radius属性。
③高度最终鼠标悬停变化设置div:hover{height:130px;};
6.文章标题背景框放置，如图
踩的坑是我把它定位写成了margin:20% 15%;postion:absolute;
最后看整体时整个页面最底部留白溢出了，因为父元素宽度我设成了100%，那么子元素margin就会留白溢出。
margin存在溢出问题！！！查了下资料，试过的方法都不起作用，比如：before伪类，
#header:before{
content:".";
display:block;
height:0;
visibility:hidden;
}//按理说这个css应该有作用的，就是在header开头插入一个字符，设置为块级元素并且高度为0和让其不见，就可以让header自动撑高了，但不知道为什么在我这里不起作用。
添加padding-top或在头部加一个 的空格等~
最后误打误撞重新设置了margin值，解决了o(*￣︶￣*)o
重新设置margin值，设4个即可，即margin:20% 0 0 15%;
7.图片设置。
①定位还是用margin
②大小设置background-size:100% 100%;即可，自动填满设置的宽高，图片可以不用重新制作分辨率，自适应大小了。
（我觉得首页最难的是分屏的实现，当时给了效果图，我直接说不会，试了很多种js编写，总有各种问题出现，最后还是在看完了书才想到可以这样做。）
二.origin页面
1.轮播图
我之前用原生js写了一个，这次用的是基于jquery写的，觉得jquery的属性选择器$真的是好用，只用敲一点点代码就OK了，34行代码不贴。
2.蜂巢结构图文放置
用css3写的，一些效果，比如transition,opacity，hyphens，text-transform,z-index;css3的一些选择器，如::before,:after,:nth-child(n)，＞，考虑兼容性用到了-moz-前缀，-webkit-前缀，还有一个bug没解决，在ie浏览器上蜂巢效果显示的是正方形，不过没关系，其余效果一样,css3蜂巢路径绘制clip-path。为了响应式屏幕，所以用了display:flex流式布局蜂巢，最后用了@media媒体查询了屏幕大小，压缩了代码，不贴。
(我觉得文化起源这个页面rgba（0，0，0，0）的颜色比color:#000000好用些，因为可以直接设置透明度呀）
三.craft页面
1.鼠标滑轮滚动
采用js写的，也是分屏缓慢滑动页面。js部分不贴，html部分设置右边三个小点点贴一下：
<div id="radiodiv" class="radiodiv">
<input type="radio" id="radio1" onmouseenter="showScreen(1);" name="radio" value="1" checked="checked" />
<br/><br/><input type="radio" id="radio2" onmouseenter="showScreen(2)" name="radio" value="2" />
<br/><br/><input type="radio" id="radio3" onmouseenter="showScreen(3)" name="radio" value="3" />
<br/><br/><div id="informationdiv"></div>
</div>
2. 文章标题
本来用css3写的棕色圆形边框类似这种①②③，感觉太突兀了，效果不好，于是直接采用文字的一二三。
棕色圆形边框css
.bianKuang{
border-radius:25px;
border:2.5px solid #dba072;
height:30px;
width:30px;
float:left;
margin:0.5% 0;
text-align:center;
}
四.health页面
1.做完这个页面后我考虑了下页脚位置，后来发现不用考虑，效果还是一样的，所以直接把这一段css删了。
2.可能设置的图片宽度太宽，所以浏览器出现了水平滚动条，于是我在css里加了overflow-x:hidden;隐藏了水平滚动条。
这里的父背景定位position:relative,填充背景图一样用的如上的百分比大小;子文章定位我直接用了top:百分比值，left:百分比值，position:absolute;没有用margin.
五.teaism页面
1.动态半圆形菜单
①css部分绘制半圆，也是:nth-child(n)选择器。②js不贴
2.下面的文章部分响应式，用了@media.文章点击进去的详情页面，我懒，所以内容部分就直接摆放的图片。
3.由半圆形菜单点进去的书籍页面，也可以导航条点茶道茶德的茶道之书，最难做。
①3个css，分别控制右侧滑动条，翻页样式，整体样式。用了！important覆盖css样式，ie6有css hack，因此又加了一条css代码如下：
* html .jspCorner {
margin: 0 -3px 0 0;
}
css3的选择器>,transform,backface,transition,cursor,font-smoothing,渐变色linear-gradient,层叠优先样式z-index;box-shadow;text-shadow用的居多，前缀要加-webkit-,-moz-,-o-,-ms-。也用了@media媒体查询了屏幕大小。
②jquery采用的版本是1.9.1，基于它写了6个js，分别是css样式，右侧鼠标滑动，菜单点击滑动，图标隐藏显示相关菜单找到相应文章，手机端手势翻页，存储当前页内容，总体实现了所有功能。有个小bug未解决，如果翻页那0.1s盯着看，会看到快要翻过去的那一面是反的字，只有中文会出现这个bug,英文没有。别和我说加什么书本翻页柔和动画，我不会，有大佬会数学函数的可以教我吗，那是又要编写1至2个js了。
六.留言页面
实现了留言的添加，删除，展示部分。
相应本地时间可以显示，头像可以替换，名字与内容可以验证。
1.写了一个js实现以上所有功能。大致思路：
①获取id, class, tagName。
②事件绑定, 删除。
③设置css样式 ，读取css样式。
④禁止表单提交，按钮绑定发送事件，Ctrl+Enter快捷键绑定发送事件，发送事件。
⑤重置表单，判断字符输入事件绑定，输入字符限制，输入框获取焦点样式，鼠标滑过按钮样式，将表单展示的元素高度保存。
⑦删除功能，格式化时间，头像。
2.css部分用了zoom,overflow,word-wrap,repeat-x,cursor
透明度opacity:0.5; filter:alpha(opacity=50);
