用ul制作橫向css導(dǎo)航菜單

1、用UL制作橫向制作橫向CSS導(dǎo)航菜單導(dǎo)航菜單目前互聯(lián)網(wǎng)站前端頁面的大趨勢是采用DIVCSS構(gòu)架，因?yàn)樗粌H能更受搜索引擎青睞，而且一個(gè)良好結(jié)構(gòu)的DIV架構(gòu)網(wǎng)站可以從一定程度上提高頁面的展示速度。在本教程中，我們將通過實(shí)例來給大家介紹：如何使用使用(X)HTML中的中的標(biāo)簽來制作一個(gè)簡單橫向?qū)?biāo)簽來制作一個(gè)簡單橫向?qū)Ш讲藛魏讲藛?。為什么要用?biāo)簽來制作導(dǎo)航欄和菜單欄？用UL做導(dǎo)航菜單之所以被廣泛采用，主要是因?yàn)樗拇a清晰，布局方便，更重要

2、的是具有“語義”效果，能夠方便進(jìn)一步SEO。查看演示ULMenu下載實(shí)例DemoRar第一步、編寫橫向菜單的第一步、編寫橫向菜單的HTML代碼架構(gòu)代碼架構(gòu)請將以下代碼添加到HTML文檔的導(dǎo)航欄區(qū)域中。第二步、編寫第二步、編寫CSS代碼代碼1、設(shè)置公共樣式、設(shè)置公共樣式請將以下CSS代碼添加到HTML文檔的...標(biāo)簽范圍中。#menufont:12pxverdanaarialsansserif設(shè)置文字大小和字體樣式#menu#menuli

3、liststyle:none將默認(rèn)的列表符號去掉#menuliadisplay:block將鏈接設(shè)為塊級元素width:150px設(shè)置寬度height:30px設(shè)置高度lineheight:30px設(shè)置行高，將行高和高度設(shè)置同一個(gè)值，可以讓單行文本垂直居中textalign:center居中對齊文字background:#3A4953設(shè)置背景色col:#fff設(shè)置文字顏色textdecation:none去掉下劃線bderright:1

4、pxsolid#000在左側(cè)加上分隔線4、鏈接懸停效果：、鏈接懸停效果：通過以上幾步的綜合作用，一個(gè)橫向?qū)Ш綑诘某醪娇蚣芫统霈F(xiàn)了。此步主要是定義鏈接的懸停效果，讓導(dǎo)航欄更美觀。當(dāng)然，如果要讓導(dǎo)航欄更炫麗，你可以在CSS懸停屬性上定義背景圖片。#menulia:hoverbackground:#146C9C變換背景色col:#fff變換文字顏色這里的代碼一個(gè)缺陷，最右邊會多出來一個(gè)邊框，由于:firstchild偽類不被IE系列瀏覽器所支