如何用css制作橫向菜單

1、如何用如何用CSS制作橫向菜單制作橫向菜單作者：阿捷200541116:54:52盡管在我的網(wǎng)站和文章里都有提到CSS制作菜單的方法，但很多初學(xué)者還是不太清楚如何實(shí)現(xiàn)，以及實(shí)現(xiàn)原理，我想專(zhuān)門(mén)寫(xiě)一篇詳細(xì)教程會(huì)對(duì)大家比較有幫助。我們先來(lái)看一個(gè)菜單的例子，最終效果是:?首頁(yè)?產(chǎn)品介紹?服務(wù)介紹?技術(shù)支持?立刻購(gòu)買(mǎi)?聯(lián)系我們?nèi)缓笪覀儊?lái)詳細(xì)講解步驟第一步：建立一個(gè)無(wú)序列表第一步：建立一個(gè)無(wú)序列表我們先建立一個(gè)無(wú)序列表，來(lái)建立菜單的結(jié)構(gòu)。代碼是：首

2、頁(yè)產(chǎn)品介紹服務(wù)介紹技術(shù)支持立刻購(gòu)買(mǎi)聯(lián)系我們效果是：?首頁(yè)?產(chǎn)品介紹?服務(wù)介紹?技術(shù)支持?立刻購(gòu)買(mǎi)?聯(lián)系我們第二步：隱藏第二步：隱藏lili的默認(rèn)樣式的默認(rèn)樣式?聯(lián)系我們看，菜單變橫向了。就這么簡(jiǎn)單！下面需要做的就是優(yōu)化細(xì)節(jié)了。第四步：調(diào)整寬度第四步：調(diào)整寬度菜單都擠在一起不好看怎么辦？我們來(lái)調(diào)節(jié)li的寬度。在CSS中添加定義width:100px指定一個(gè)li的寬度是100px，當(dāng)然你可以根據(jù)你的需要調(diào)整數(shù)值：.testlifloat:l

3、eftwidth:100px效果是：?首頁(yè)?產(chǎn)品介紹?服務(wù)介紹?技術(shù)支持?立刻購(gòu)買(mǎi)?聯(lián)系我們?nèi)绻覀兺瑫r(shí)定義外面div的寬度，li就會(huì)根據(jù)div的寬度自動(dòng)換行，例如定義了div寬350px，6個(gè)li的總寬度是600px，一行排不下就自動(dòng)變成兩行：.testwidth:350px效果是：?首頁(yè)?產(chǎn)品介紹?服務(wù)介紹?技術(shù)支持?立刻購(gòu)買(mǎi)?聯(lián)系我們第五步：設(shè)置基本鏈接效果第五步：設(shè)置基本鏈接效果接下來(lái)，我們通過(guò)CSS來(lái)設(shè)置鏈接的樣式，分別定義: