第二個專案總結

這個專案是製作乙個學院的簡單新聞**，使用了html 5+css 3，以及相關的jquery外掛程式（輪播圖）進行搭建。布局方面因為不考慮響應式布局，因此沒有使用float屬性，而是利用display：inline-block屬性進行布局。

1、-webkit-：對應chrome、safari瀏覽器；

2、-moz-：對應firefox瀏覽器；

3、-ms-：對應ie瀏覽器；

4、-o-：對應opera瀏覽器。

1、html5shiv：可以在老式ie裡建立main，header，footer等html5元素；

2、respond：讓ie6-8支援css 3中media query；

3、selectivizr：提供大量不支援的css選擇器和屬性，包括所有的last-child選擇器。

在這個專案中遇到了平時經常出現的布局問題，同時發現了新的解決方法。

1、解決搜尋框和按鈕不對齊的方法

vertical-align屬性只有兩個元素設定為display：inline-block才有效

2、盒子莫名的分行現象

問題描述：比如父盒子寬度為960px，兩個左右子盒子寬度分別為500px和440px，設定display：inline-block或者float，其中左盒子設定margin-right：20px；按照理想狀態下，兩個左右子盒子應該在同一行顯示，然而實際情況下卻分行，右盒子掉入了下一行。

問題分析：造成這個問題的原因是瀏覽器預設給兩個不相連的元素一定的間隔，比如下圖，li元素設定為浮動或者display：inline-block，那麼它們之間肯定會一定的間隔

解決方法：將兩個元素放在同一行，相連，不能由空格，如下圖的兩個section元素緊挨在一塊

對css中一些樣式的編寫也有了一些感悟

1、製作如圖三角形效果：

步驟一：將右側盒子設定為相對定位

步驟二：在右側盒子裡面新建個子盒子，設定寬高相等，為正方形，絕對定位

步驟三：將絕對定位的盒子用css3旋轉屬性旋轉

2、制定如圖的序列號

步驟二：在父元素裡呼叫計數器

步驟三：利用css的選擇器重新設定序列號為前三的樣式

步驟四：利用css的選擇重新設定序列號最後一位的樣式，因為最後一位與之前序列號不同，是為兩位數，因此無法與之前的序列號對齊，所以需要對它重新編寫樣式

3、使用混合動畫要注意的問題

問題描述：這樣書寫是絕對達不到先旋轉，後改變大小。只有大小能夠改變，旋轉無效

解決方法：兩個動畫寫在同一行，中間空格，動畫執行順序為從左到右

還有一點需要注意的就是：在編寫css3動畫和變形效果的時候，一定要留意相容性的寫法。

說了這麼多，最後請看一下我的專案吧。有很多不足，希望看官們能夠指出，謝謝。