css3資訊獲取方法

0. 文件搜尋:Google css spec;
1. Google: 關鍵詞 MDN;
2. css tricks成熟css程式碼塊sinppets;
3. Google: center css tricks
4. Google：阮一峰 css
5. codrops炫酷css效果

引入css的方式

    <link rel="stylesheet" href="./css/style.css">
複製程式碼

清除浮動

<ul style="list-style:none; margin:0; padding:0" class="clearfix">


.clearfix::after{
    content: "";
    display: block;
    clear:both;
}
複製程式碼

0. 所有的子元素浮動
1. 父類新增class="clearfix"
2. 背下這三行程式碼

清除抖動and下部hover出下劃線

當滑鼠hover時會有抖動，因為多加了邊框

解決方法：

提前設定一個邊框但是為透明的

.topNavBar>nav>ul>li>a{
    font-size: 12px;
    color:rgb(204,206,209);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid transparent;

}
.topNavBar>nav>ul>li>a:hover{
    border-bottom: 1px solid red;
}
複製程式碼

最終效果

開發者工具強制觸發hover狀態

觸發之後左側會出現小黃點

li沒有包裹a

在a的css中使用display:block;

怎樣讓左右兩部分對齊

先讓兩部分行高相同，然後讓其中線對齊。