建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
CSS 導(dǎo)航欄
導(dǎo)航欄
熟練使用導(dǎo)航欄，對(duì)于任何網(wǎng)站都非常重要。
成都創(chuàng)新互聯(lián)主營(yíng)東蘭網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,手機(jī)APP定制開(kāi)發(fā),東蘭h5微信平臺(tái)小程序開(kāi)發(fā)搭建,東蘭網(wǎng)站營(yíng)銷(xiāo)推廣歡迎東蘭等地區(qū)企業(yè)咨詢(xún)
使用 CSS 你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的 HTML 菜單。
導(dǎo)航欄=鏈接列表
作為標(biāo)準(zhǔn)的 HTML 基礎(chǔ)一個(gè)導(dǎo)航欄是必須的。
在我們的例子中我們將建立一個(gè)標(biāo)準(zhǔn)的 HTML 列表導(dǎo)航欄。
導(dǎo)航條基本上是一個(gè)鏈接列表，所以使用 元素非常有意義：
實(shí)例
嘗試一下 ?
現(xiàn)在，讓我們從列表中刪除邊距和填充：
實(shí)例
ul {
list-style-type:none;
margin:0;
padding:0;
}
嘗試一下 ?
例子解析：
list-style-type:none- 移除列表前小標(biāo)志。一個(gè)導(dǎo)航欄并不需要列表標(biāo)記移除瀏覽器的默認(rèn)設(shè)置將邊距和填充設(shè)置為 0
上面的例子中的代碼是垂直和水平導(dǎo)航欄使用的標(biāo)準(zhǔn)代碼。
垂直導(dǎo)航欄
上面的代碼，我們只需要 元素的樣式，建立一個(gè)垂直的導(dǎo)航欄：
實(shí)例
a
{
display:block;
width:60px;
}
嘗試一下 ?
示例說(shuō)明：
display:block - 顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度
width:60px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個(gè) 60 像素的寬度
提示：查看完全樣式的垂直導(dǎo)航欄的示例.
注意： 請(qǐng)務(wù)必指定 元素在垂直導(dǎo)航欄的的寬度。如果省略寬度，IE6可能產(chǎn)生意想不到的效果。
水平導(dǎo)航欄
有兩種方法創(chuàng)建橫向?qū)Ш綑?。使?strong>內(nèi)聯(lián)或浮動(dòng)的列表項(xiàng)。
這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動(dòng)的方法。
內(nèi)嵌列表項(xiàng)
建立一個(gè)橫向?qū)Ш綑诘姆椒ㄖ皇侵付?/p>
元素， 上述代碼是標(biāo)準(zhǔn)的內(nèi)嵌:
實(shí)例
li
{ display:inline; }
嘗試一下 ?
實(shí)例解析：
display:inline- 默認(rèn)情況下，- 元素是塊元素。在這里，我們刪除換行符之前和之后每個(gè)列表項(xiàng)，以顯示一行。
提示: 查看 完全樣式的水平導(dǎo)航欄的示例.
浮動(dòng)列表項(xiàng)
在上面的例子中鏈接有不同的寬度。
對(duì)于所有的鏈接寬度相等，浮動(dòng)
元素，并指定為 元素的寬度：
實(shí)例
li
{ float:left; }
a
{ display:block; width:60px; }
嘗試一下 ?
實(shí)例解析：
float:left- 使用浮動(dòng)塊元素的幻燈片彼此相鄰display:block- 顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度width:60px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個(gè)60像素的寬度
display:inline;-默認(rèn)情況下，元素是塊元素。在這里，我們刪除換行符之前和之后每個(gè)列表項(xiàng)，以顯示一行 。
Tip:查看完全樣式的橫向?qū)Ш綑诘氖纠?.
文章名稱(chēng)：創(chuàng)新互聯(lián)CSS教程：CSS 導(dǎo)航欄
文章路徑：http://www.5511xx.com/article/dpicghe.html
