如何用CSS制作橫向菜單 讓ul li橫向排列及圓點(diǎn)處理
發(fā)布時(shí)間：2010-07-15 瀏覽： 次
第一步：建立一個(gè)無(wú)序列表
我們先建立一個(gè)無(wú)序列表，來(lái)建立菜單的結(jié)構(gòu)。代碼是：
效果是：
- 首頁(yè)
- 產(chǎn)品介紹
- 服務(wù)介紹
- 技術(shù)支持
- 立刻購(gòu)買(mǎi)
- 聯(lián)系我們
第二步：隱藏li的默認(rèn)樣式，去掉圓點(diǎn)
因?yàn)榭雌饋?lái)不是很好看，菜單通常都不需要li默認(rèn)的圓點(diǎn)，我們給UL定義一個(gè)樣式來(lái)消除這些圓點(diǎn)。
當(dāng)然，為了更好的控制整個(gè)菜單，我們把菜單放在一個(gè)div里。頁(yè)面代碼變成：
CSS定義為：
.test ul{list-style:none;}說(shuō)明：“.test ul”表示我要定義的樣式將作用在test的層里的ul標(biāo)簽上。
現(xiàn)在的效果是沒(méi)有圓點(diǎn)了：
首頁(yè)
產(chǎn)品介紹
服務(wù)介紹
技術(shù)支持
立刻購(gòu)買(mǎi)
聯(lián)系我們
第三步：關(guān)鍵的浮動(dòng)
這里是菜單變成橫向的關(guān)鍵，我們給li元素加上一個(gè)“float:left;”屬性，讓每個(gè)li浮動(dòng)在前面一個(gè)li的左面。
CSS定義為：
.test li{float:left;}效果是：
首頁(yè)產(chǎn)品介紹服務(wù)介紹技術(shù)支持立刻購(gòu)買(mǎi)聯(lián)系我們
看，菜單變橫向了。就這么簡(jiǎn)單！下面需要做的就是優(yōu)化細(xì)節(jié)了。
資訊推薦
- 關(guān)于2016年春節(jié)放假安排2016-01-26
- 為了方便同事們提前訂票回家過(guò)年，現(xiàn)在公司春節(jié)放假時(shí)間安排通知。 春節(jié)放假時(shí)間為：2016年2月3到 2月14日。共11天。 廣大客戶在我...
- 如何做好創(chuàng)業(yè)型網(wǎng)站運(yùn)營(yíng)2016-03-07
- 1、緊記網(wǎng)站定位，制訂網(wǎng)站長(zhǎng)期與短期經(jīng)營(yíng)目標(biāo)。 網(wǎng)站定位是網(wǎng)站發(fā)展之本，不管是營(yíng)銷型網(wǎng)站建設(shè)還是創(chuàng)業(yè)型網(wǎng)站運(yùn)營(yíng)，網(wǎng)站經(jīng)營(yíng)偏離了定位或定位不...
- 奢侈品B2C的網(wǎng)站規(guī)劃該如何做2016-03-07
- 電子商務(wù)(EC，也就是E-Commerce的縮寫(xiě))，關(guān)于電子商務(wù)的定義世人眾說(shuō)紛紜，從不同的角度出發(fā)有不同的定義?？梢岳斫鉃橐?Internet為依托，借助一定...
- 微信：支付寶搶紅包要到春晚，我們今晚就開(kāi)始！2016-01-26
- 昨天上午 11 點(diǎn)，支付寶通過(guò)一個(gè)長(zhǎng)微博，公布了大家期待已久的與央視春晚獨(dú)家合作的互動(dòng)玩法，核心點(diǎn)在于必須主動(dòng)通過(guò)社交拓展才能夠獲得最多的紅包。 支...
