技術標籤：自學

作業做了6天了，基本上接近尾聲，接著學後面的課程。
過渡（CSS3）
transition是CSS3中具有顛覆性的特徵之一，我們可以在不使用flash動畫或者JS的情況下，當元素從一種樣式變化為另一種樣式時，為元素新增效果。
過渡：是從一個狀態漸漸的過渡到另一種狀態。它可以讓頁面更具動感，IE9以下版本不支援，但是不影響整體佈局。我們經常和hover一起搭配使用。
語法格式：
transiton: 要過渡的屬性 花費時間 運動曲線 何時開始;
通常情況下，為了方便，要過渡的屬性通常寫做all
時間，單位為秒或者毫秒
運動曲線（可省略），linear勻速 ease逐漸變慢（預設） ease-in（加速） ease-out（減速） ease-in-out（先加速後減速）

div:hover {
	transition: all 1s ease 0s;
}

寫幾個之前作業裡在實際運用中的小技巧：
1.ul>li的盒子通常我們用浮動來使其一行排列，然後用margin-left（right）來使其之間保留空間，但是由於都加了外邊距導致一行放不開本來的個數，最後一列就會擠到下面去，解決方法是給父盒子（ul）新增寬度，父盒子的寬度可以超過再上一層父盒子（比如版心）的寬度,不影響整體佈局。
2. 進度條，寬度為父元素的百分比，實際的百分比由JS控制。

		<!-- 進度條 -->
        <div class="progress">
        	<div class="progress_speed"></div>
        </div>

.progress {
    width: 160px;
    height: 10px;
    border: 1px solid red;
    border-radius: 5px;
}
.progress_speed {
    width: 80%;
    height: 10px;
 

    background-color: red;
}

3 . 分頁欄page
最大的盒子命名為page ，page裡面的盒子全部用行內塊。
1號盒子span命名為page_num（頁碼），裡面放a，把a轉換為行內塊，並設定樣式
2號盒子span命名為page_skip（跳轉），裡面由input和button

<!-- 分頁欄 page -->
        <div class="page">
            <span class="page_num">
                <a href="javascript:;" class="page_point">&lt;上一頁</a>
                <a href="javascript:;">1</a>
                <a href="javascript:;" class="page_current">2</a>
                <a href="javascript:;">3</a>
                <a href="javascript:;">4</a>
                <a href="javascript:;">5</a>
                <a href="javascript:;" class="dotted">...</a>
                <a href="javascript:;" class="page_point">下一頁&gt;</a>
            </span>
            <span class="page_skip">
                共8頁&nbsp;跳轉到 <input type="number"> 頁
                <button>跳轉</button>
            </span>
        </div>

.page {
    margin: 40px auto;
    text-align: center;
}
.page_num a,
.page_skip input {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f4f4f4;
}
.page_num .page_point {
    width: 80px;
}
.page_num .dotted {
    border: 1px solid transparent;
    background-color: transparent;
}
.page_num .page_current {
    border: 1px solid transparent;
    background-color: transparent;
    color: red;
}
.page_skip {
    color: #666;
    margin-left: 25px;
}
.page_skip input {
    outline: none;
    background-color: #fff!important;
}
.page_skip button {
    height: 38px;
    width: 56px;
    color: #333;
    margin-left: 20px;
}

4 .清除input: type="number"的預設樣式

input[type=number] {
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

5.獲得焦點樣式
當某表單獲得焦點時，等同於hover
如當獲得焦點時，表單獲得特定樣式的邊框：

input:focus {
	border: 1px solid red;
}