成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS篇之水平導(dǎo)航

李義 / 1374人閱讀

摘要：關(guān)于水平導(dǎo)航已然是老生常談之問題，看了網(wǎng)上諸多方法，今天小小的總結(jié)對(duì)比了一下現(xiàn)有方法的優(yōu)缺點(diǎn)。問題一個(gè)最簡(jiǎn)單的結(jié)構(gòu)如下，請(qǐng)實(shí)現(xiàn)水平導(dǎo)航。缺點(diǎn)，和方法一樣，會(huì)出現(xiàn)空白間隙，解決方案如上，因?yàn)槭切袃?nèi)元素，所以不能設(shè)置寬高，比較局限。

關(guān)于水平導(dǎo)航已然是老生常談之問題，看了網(wǎng)上諸多方法，今天小小的總結(jié)對(duì)比了一下現(xiàn)有方法的優(yōu)缺點(diǎn)。

問題：一個(gè)最簡(jiǎn)單的html結(jié)構(gòu)如下，請(qǐng)實(shí)現(xiàn)水平導(dǎo)航。

    
    
  • home
    • 
    
  • web
    • 
    
  • other
    •

基礎(chǔ)樣式：

ul{list-style: none;}
li{width: 80px;height: 30px;background: #7fffd4;color: #fff;text-align: center;line-height: 30px;}
li:hover{background: lightsteelblue;}

方法一：float

ul{overflow: hidden;}
li{float: left;}

優(yōu)點(diǎn)：兼容性好，所有瀏覽器版本都能很好的支持；

缺點(diǎn)：需清除浮動(dòng)避免帶來的影響

方法二：display:inline-block

ul{font-size: 0;}
li{display: inline-block;font-size: 14px;}

優(yōu)點(diǎn)：兼容性好，支持IE8及以上，且不用考慮浮動(dòng)帶來的負(fù)面效果；若想支持IE7及以下也容 易，只需添加如下代碼：

li{*display: inline;*zoom: 1;}

缺點(diǎn)：列表元素之間會(huì)很詭異的有間距，原因是因?yàn)闃?biāo)簽換行的空白帶來的影響，解決方案有兩種：1，在父元素設(shè)置font-size為0；2，讓列表的結(jié)束標(biāo)簽與下一個(gè)列表的開始標(biāo)簽連在一起，但是這樣HTML可讀性不好，所以一般采用第一種方法就能很好的解決。

方法三：display:inline

li{display: inline;padding: 7px 20px;}

優(yōu)點(diǎn)：代碼簡(jiǎn)潔。

缺點(diǎn)：1，和方法2一樣，會(huì)出現(xiàn)空白間隙，解決方案如上；2，因?yàn)槭切袃?nèi)元素，所以不能設(shè)置寬高，比較局限。

方法四：display:flex/inline-flex

li{display: flex/inline-flex;} //圖簡(jiǎn)單，就這樣寫啦。。

優(yōu)點(diǎn)：代碼簡(jiǎn)潔；無副作用影響

缺點(diǎn)：兼容性一般，ie9及以下不支持

在這里說下小小的區(qū)別：inline-flex父元素寬度為子元素寬度和；flex為塊級(jí)元素，默認(rèn)寬度為父級(jí)寬度。當(dāng)然從名字上也能很容易看出，不過在網(wǎng)上看到inline-flex的文章并不那么多，所知甚微，還請(qǐng)大家補(bǔ)充。

方法五：display:table-cell

ul{display: table;}
li{display: table-cell;}

優(yōu)點(diǎn)：兼容性較好，IE8及以上都支持

缺點(diǎn)：暫未發(fā)現(xiàn)（btw:不加上對(duì)父元素設(shè)置table好像也沒啥影響。加上父元素table，父元素寬度為子元素總寬）

方法六：box-orient

ul{
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;
                
    /* Safari、Opera 以及 Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
                
    /* W3C */
    display:box;
    box-orient:horizontal;
}

優(yōu)點(diǎn)：簡(jiǎn)單粗暴

缺點(diǎn)：很方便，有木有，但是，畢竟css3屬性，目前還沒有瀏覽器支持此屬性,firefox、safari、chrome、opera可以通過私有屬性來達(dá)到效果，IE就苦逼了，并不能。

結(jié)語：暫時(shí)就這么多。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111568.html

相關(guān)文章

  • CSS篇之巧用line-height

    摘要：公司一個(gè)頁面中的一個(gè)樣式如下，使左邊文字豎直排列且水平垂直居中代碼已中止一般情況，我會(huì)用如上或者用使文字豎直排放看起來居中，但是這樣不夠智能或顯得比較冗余。 公司一個(gè)頁面中的一個(gè)樣式如下，使左邊文字豎直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代碼： 已中止 .left-tit{ wi...

    dendoink 評(píng)論0 收藏0

  • CSS篇之巧用line-height

    摘要：公司一個(gè)頁面中的一個(gè)樣式如下，使左邊文字豎直排列且水平垂直居中代碼已中止一般情況，我會(huì)用如上或者用使文字豎直排放看起來居中，但是這樣不夠智能或顯得比較冗余。 公司一個(gè)頁面中的一個(gè)樣式如下，使左邊文字豎直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代碼： 已中止 .left-tit{ wi...

    hsluoyz 評(píng)論0 收藏0

  • Flutter是跨平臺(tái)開發(fā)終極之選嗎？Android開發(fā)該如何快速上手Flutter？

    摘要：月日，谷歌正式發(fā)布了的。到底能不能成為跨平臺(tái)開發(fā)終極之選是基于前端誕生的，但是對(duì)前端開發(fā)來說，的環(huán)境配置很麻煩，需要原生的平臺(tái)知識(shí)，還要擔(dān)心遇上網(wǎng)絡(luò)問題?，F(xiàn)在已經(jīng)不是曾經(jīng)的小眾框架，這兩年里它已經(jīng)逐步成長(zhǎng)為主流的跨平臺(tái)開發(fā)框架之一。 ...

    luckyyulin 評(píng)論0 收藏0

  • react-native 布局篇之flexbox

    摘要：布局直接閱讀大神文章阮一峰寫的布局。有幾個(gè)注意的點(diǎn)，我在剛剛開始中總結(jié)的容器屬性，，布局方式主軸對(duì)齊方式交叉軸對(duì)齊方式這里需要特別注意的就是主軸和交叉軸。特別注意的作用對(duì)象是主軸在中設(shè)置是水平方向上占滿整個(gè)容器。 FlexBox布局 直接閱讀大神文章：阮一峰寫的FlexBox布局。在react-native中原理是一樣的，只不過可能有寫屬性在react-native中簡(jiǎn)化了。有幾個(gè)注意...

    Near_Li 評(píng)論0 收藏0

  • JQuery 干貨篇之選擇元素

    摘要：干貨篇之選擇元素實(shí)驗(yàn)的的代碼選擇器選擇正在處理動(dòng)畫的元素選擇第一個(gè)元素選擇最后一個(gè)元素選擇第個(gè)元素從開始選擇序號(hào)為偶數(shù)的元素選擇序號(hào)為奇數(shù)的元素選擇序號(hào)大于的元素選擇序號(hào)小于的元素選擇所有的文本輸入框 JQuery 干貨篇之選擇元素 實(shí)驗(yàn)的HTML+CSS的代碼 html Example Jacquis Flower Shop ...

    zorpan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<