京东首页之轮播图相关问题
1》上下图片之间的间隙
产生原因:
文本上下对齐默认基于基线(baseline对齐,以至于图基于baseline对齐,从而留出一条间隙)
解决思路:在元素为块级元素的基础上,把字体大小设为0
<ul> <li><img src="../img/h1.jpg" alt=""></li> <li><img src="../img/h1.jpg" alt=""></li> <li><img src="../img/h1.jpg" alt=""></li> </ul>
<li>之间的图片产生间隙
解决方案:
ul > li{ font-size:0; }
<div class="d3"> <a href=""><img src="../img/h3.jpg" alt=""></a> <a href=""><img src="../img/h3.jpg" alt=""></a> </div>
<a>之间的图片产生间隙
解决方案:
div > a{ display: block; font-size:0; }
2》相同样式的提取
1) 采用属性class选择器,来提取公共样式:
[class^="jd_"]{ /*jd_开头的class都应满足该样式*/ width: 100%; max-width:640px; min-width:300px; }
3》筛选选择器
文字文本:
:first-letter
:first-line
其父的子元素的顺序:
:first-child
:last-child
:nth-child(n)
:nth-last-child(n)
选择同级同类型的顺序:
:first-of-type
:last-of-type
:nth-of-type(n)
:first-child与first-of-type的区别:
p:first-child ==>选中p的父元素的第一个元素,要求第一个元素时p元素才有效,否则无效
p:first-of-type ==>选中p这一级别中,所有p元素中的第一个元素。
4》css3属性
1>css3属性之 transform(变换)
transformX(x) 沿x轴移动多少px, 可以使用百分比,(100%表示该属性的元素的宽度)
transformY(y)
transformZ(z)
transform(x,y)
scale(x,y)沿x,y放缩盒子
2>凡是css3的属性,都要可能进行webkit的兼容(即加上相应的-webkit-*的属样式性)
5》为什么要清理浮动?
原因:子元素浮动会导致父元素的塌陷(即父元素的高度变成0)
清理方法: 给父元素添加样式 clear:both