寫一個(gè)導(dǎo)航欄
從最簡(jiǎn)單的標(biāo)準(zhǔn)HTML開(kāi)始厉亏。
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
1.去掉li樣式的圓點(diǎn)和內(nèi)外邊距
ul {
list-style-type: none;
<!-- 把外邊距和內(nèi)邊距設(shè)置為 0 可以去除瀏覽器的默認(rèn)設(shè)定 -->
padding: 0;
margin: 0;
}
2.確定導(dǎo)航欄樣式（橫or豎）
豎式
a:link,
a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #bebebe;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,
a:active {
background-color: #cc0000;
}
補(bǔ)充（display可能的屬性值）：
| 值 | 描述 |
|---|---|
| none | 此元素不會(huì)被顯示映之。 |
| block | 此元素將顯示為塊級(jí)元素伤极，此元素前后會(huì)帶有換行符方灾。 |
| inline | 默認(rèn)馁菜。此元素會(huì)被顯示為內(nèi)聯(lián)元素川尖，元素前后沒(méi)有換行符隧魄。 |
| inline-block | 行內(nèi)塊元素筋岛。（CSS2.1 新增的值） |
| list-item | 此元素會(huì)作為列表顯示娶视。 |
| run-in | 此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。 |
| compact | CSS 中有值 compact睁宰，不過(guò)由于缺乏廣泛支持肪获，已經(jīng)從 CSS2.1 中刪除。 |
| marker | CSS 中有值 marker柒傻，不過(guò)由于缺乏廣泛支持孝赫，已經(jīng)從 CSS2.1 中刪除。 |
| table | 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 <table>）红符，表格前后帶有換行符青柄。 |
| inline-table | 此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似 <table>），表格前后沒(méi)有換行符违孝。 |
| table-row-group | 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tbody>）刹前。 |
| table-header-group | 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <thead>）。 |
| table-footer-group | 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tfoot>）雌桑。 |
| table-row | 此元素會(huì)作為一個(gè)表格行顯示（類似 <tr>）喇喉。 |
| table-column-group | 此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類似 <colgroup>）。 |
| table-column | 此元素會(huì)作為一個(gè)單元格列顯示（類似 <col>） |
| table-cell | 此元素會(huì)作為一個(gè)表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 <caption>） |
| inherit | 規(guī)定應(yīng)該從父元素繼承 display 屬性的值校坑。 |
橫式
有兩種創(chuàng)建水平導(dǎo)航欄的方法拣技。使用行內(nèi)或浮動(dòng)列表項(xiàng)千诬。
兩種方法都不錯(cuò)，但是如果您希望鏈接擁有相同的尺寸膏斤，就必須使用浮動(dòng)方法徐绑。
1.行內(nèi)
li {
display: inline;
}
2.浮動(dòng)列表項(xiàng)
li {
float:left;
}
a {
display:block;
width:60px;
}
