移動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