HTMl中標(biāo)簽中l(wèi)i橫向排列的實現(xiàn)示例

發(fā)布時間：2020-02-21 15:58:16 作者：scorpion喵喵

這篇文章主要介紹了HTMl中標(biāo)簽中l(wèi)i橫向排列的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

大多數(shù)的導(dǎo)航欄都是橫向排列如下圖所示，那么這究竟是怎么實現(xiàn)的呢？其實它主要運用<ul>標(biāo)簽中l(wèi)i的橫向排列，下面以一個例子向大家詳細(xì)講解具體是如何實現(xiàn)的。

1編寫橫向菜單的HTML代碼架構(gòu)

<ul id="menu">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="//m.fzitv.net">Jb51.net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
 <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>

2 編寫CSS代碼

<1>設(shè)置公共樣式

<style type="text/css">
    #menu { 
        font:12px verdana, arial, sans-serif; /* 設(shè)置文字大小和字體樣式 */
        width: 100%;
    }
    #menu, #menu li {
        list-style:none; /* 將默認(rèn)的列表符號去掉 */
        padding:0; /* 將默認(rèn)的內(nèi)邊距去掉 */
        margin:0; /* 將默認(rèn)的外邊距去掉 */
        float: left; /* 往左浮動 */
        display: block;
}

<2>設(shè)置鏈接樣式

<style type="text/css">
    #menu li a {
        display:block; /* 將鏈接設(shè)為塊級元素 */
        width:150px; /* 設(shè)置寬度 */
        height:30px; /* 設(shè)置高度 */
        line-height:30px; /* 設(shè)置行高，將行高和高度設(shè)置同一個值，可以讓單行文本垂直居中 */
        text-align:center; /* 居中對齊文字 */
        background:#3A4953; /* 設(shè)置背景色 */
        color:#fff; /* 設(shè)置文字顏色 */
        text-decoration:none; /* 去掉下劃線 */
        border-right:1px solid #000; /* 在左側(cè)加上分隔線 */
}
</style>

<3>鏈接懸停效果

<style type="text/css">
    #menu li a:hover {
    background:#146C9C; /* 變換背景色 */
    color:#fff; /* 變換文字顏色 */
    }
</style>

<4>去掉最左邊導(dǎo)航欄的右邊框

<style type="text/css">
    #menu li a.last {
    border-right:0; /* 去掉左側(cè)邊框 */
    }
</style>

3 完整的代碼

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>圖片提示效果</title>
	<script src="../jquery-3.3.1.min.js"></script>
    <style type="text/css">
        #menu { 
            font:12px verdana, arial, sans-serif; /* 設(shè)置文字大小和字體樣式 */
            width: 100%;
        }
        #menu, #menu li {
            list-style:none; /* 將默認(rèn)的列表符號去掉 */
            padding:0; /* 將默認(rèn)的內(nèi)邊距去掉 */
            margin:0; /* 將默認(rèn)的外邊距去掉 */
            float: left; /* 往左浮動 */
            display: block;
        }
        #menu li a {
            display:inline-block; /* 將鏈接設(shè)為塊級元素 */
            width:150px; /* 設(shè)置寬度 */
            height:30px; /* 設(shè)置高度 */
            line-height:30px; /* 設(shè)置行高，將行高和高度設(shè)置同一個值，可以讓單行文本垂直居中 */
            text-align:center; /* 居中對齊文字 */
            background:#3A4953; /* 設(shè)置背景色 */
            color:#fff; /* 設(shè)置文字顏色 */
            text-decoration:none; /* 去掉下劃線 */
            border-right:1px solid #000; /* 在左側(cè)加上分隔線 */
        }
        #menu li a:hover {
            background:#146C9C; /* 變換背景色 */
            color:#fff; /* 變換文字顏色 */
        }
        #menu li a.last {
            border-right:0; /* 去掉左側(cè)邊框 */
        }
</style>
 
</head>
<body>
    <ul id="menu">
        <li><a href="http://www.baidu.com">Baidu.Com</a></li>
         <li><a href="//m.fzitv.net">Jb51.net</a></li>
         <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
         <li><a href="http://www.google.com" class="last">Google.Com</a></li>
    </ul>
</body>
</html>

在線運行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片提示效果</title>
<script src="../jquery-3.3.1.min.js"></script>
<style type="text/css">
#menu { 
font:12px verdana, arial, sans-serif; /* 設(shè)置文字大小和字體樣式 */
width: 100%;
}
#menu, #menu li {
list-style:none; /* 將默認(rèn)的列表符號去掉 */
padding:0; /* 將默認(rèn)的內(nèi)邊距去掉 */
margin:0; /* 將默認(rèn)的外邊距去掉 */
float: left; /* 往左浮動 */
display: block;
}
#menu li a {
display:inline-block; /* 將鏈接設(shè)為塊級元素 */
width:150px; /* 設(shè)置寬度 */
height:30px; /* 設(shè)置高度 */
line-height:30px; /* 設(shè)置行高，將行高和高度設(shè)置同一個值，可以讓單行文本垂直居中 */
text-align:center; /* 居中對齊文字 */
background:#3A4953; /* 設(shè)置背景色 */
color:#fff; /* 設(shè)置文字顏色 */
text-decoration:none; /* 去掉下劃線 */
border-right:1px solid #000; /* 在左側(cè)加上分隔線 */
}
#menu li a:hover {
background:#146C9C; /* 變換背景色 */
color:#fff; /* 變換文字顏色 */
}
#menu li a.last {
border-right:0; /* 去掉左側(cè)邊框 */
}
</style>

</head>
<body>
<p>腳本之家</p>
<ul id="menu">
<li><a >Baidu.Com</a></li>
<li><a href="http://m.fzitv.net">Jb51.net</a></li>
<li><a >Yahoo.Com</a></li>
<li><a  class="last">Google.Com</a></li>
</ul>
</body>
</html>

提示：您可以先修改部分代碼再運行

總之，使其橫向排列的最需要的是: <ui>標(biāo)簽的主要樣式為display:balock;

<li>的主要樣式為display:inline-balock,float：left,list-style:none;

到此這篇關(guān)于HTMl中標(biāo)簽中l(wèi)i橫向排列的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)HTMl li橫向排列內(nèi)容請搜素腳本之家以前的文章或下面相關(guān)文章，希望大家以后多多支持腳本之家！

Tag：HTML li橫向排列

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

HTMl中標(biāo)簽中l(wèi)i橫向排列的實現(xiàn)示例

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容