学习一个京东项目喜迎双十一 ——2018.11.11
在本地端测试，chrome、opera和firefox支持通过<link>标签添加ico，但IE和safari不支持。
margin:0 auto;之前，需给定宽度。
行内元素如a，只有左右方向有效，可以直接设置。
.wrapper>p; ：直接后代p ; .wrapper p; :所有的后代p
ul是有内外边距的，需消除。
给行内元素绝对定位后就转化为行内块了，行内元素相对定位后不会转化为行内块。
绝对定位不占据空间位置。
找图标： https://icomoon.io/app/#/select
使用京东字体图标：在网上找到图标→保持压缩文件夹中的fonts→引用压缩文件夹中的styl.css的声明字体，并更改路径（@。。）→font-family:"icomoon";
消除权重不够产生的影响：!important
<ul class="fl city"> <!--这里表示2个类，一个fl,另一个city-->
<li><a href="#" class="mobile">手机京东<img src="images/59a51bf6Nb8e478cc.png" height="60" width="60" alt=""></a></li>
固定logo写法：<div class="logo"><h1><a href="#"></a></h1></div>
设置了position: absolute的元素和float会宽度塌陷，自适应于内部元素的宽度。 而relative不会。（待确定？）
因为CSS注释用错了符号，导致了很多报错！
行内元素可以用margin-left等调距离
行高：一行文字+间距 line-height
行内块元素可以用text-align:center; 来实现居中 -->display:inline-block;
中间栏的.col1，左右内边距不要给li。因为点击进去显示的背景色是一整块li。
给img设置display:block,这样图片和块的间隙就会消失。或者给img设置vertical-align:top;
transform: https://segmentfault.com/q/1010000005151903
中间居中： position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
CSS pointer属性：光标呈现为指示链接的指针（一只手）
设置: z-index:999;
.login-t{
width:95px;
font-size:12px;
white-space:nowrap; /* 强制一行内显示*/
overflow:hidden; /*溢出隐藏*/
text-overflow:ellipsis; /*超出部分显示省略号...*/
}
.user-info{
width:50px;
height:50px;
position:absolute;
left:0;
top:0;
}
.user-info img{
width:100%; /*因为图片是100*100，设置了尺寸是50*50，为了让图片全部显示*/
}制作头像外边框 2-09
CSS3 :nth-of-type() 选择器
怎么让点击效果缓慢显示，动画效果
设置完浮动后，a可以直接设置宽度、高度了吗？（待确定）
js：让news-t div的小盒子移动
量坐标：鼠标放在图片左上角
.expand li i{
background:url(../images/sprite.service.png) no-repeat;
margin:0 auto;
display:block;
margin-bottom:10px;
}
.expand li:first-child i{
width:24px;
height:25px;
background-position:0 -41px;
}鼠标滑过生成图片：原来设为width:0px; a:hover里头再给定width的值
CSS的transition属性
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div style="width:500px;overflow:hidden;_zoom:1;">
<div style="float:left;width:100px;">头像</div>
<p style="float:left;clear:left;">姓名</p>
<div style="margin-left:106px;">自我描述</div>
</div>
实现下拉菜单的方法: （拓展：手风琴下拉菜单）
参考网站：https://www.jb51.net/article/113680.htm
https://www.cnblogs.com/fenzhen/p/7194453.html
jQuery.on+mouseenter+mouseleave
:hover()+slidToggle()
只用CSS实现
/*二级菜单： display:none;*/
$(function() {
$(".nav .nav-main").hover(function(){
$(this).children("ul").stop().slideToggle()
});
});
data-*是自定义数据，用于存储页面或应用程序的私有自定义数据，赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
jQuery 事件 - pageX 属性：pageX() 属性是鼠标指针的位置，相对于文档的左边缘。
返回顶部效果
mouseenter和mouseleave不支持冒泡属性，而与其相似的：mouseover和mouseout支持。
if 判断表达式只写了一个变量：if(activeRow)==if(activeRow=true) ;if(! activeRow)==if(activeRow=false)
https://segmentfault.com/a/1190000009706391#articleHeader0 循环播放页面
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null。
hasClass() 方法检查被选元素是否包含指定的 class。
<div class="a" id="b"></div>
<script>
if($("#b").hasClass("a")){
alert("包含class a");
}
</script> 点击标签，禁止页面自动跳到顶部的解决办法： 把herf="#" 改为：href="javascript:void(0)"