移动web开发之四轮播图

京东首页之轮播图相关问题

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