CSS設(shè)置列表樣式和創(chuàng)建導(dǎo)航菜單實(shí)現(xiàn)代碼
發(fā)布時(shí)間：2018-07-24 14:16:49 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS設(shè)置列表樣式和創(chuàng)建導(dǎo)航菜單實(shí)現(xiàn)代碼,需要的朋友可以參考下
一、設(shè)置列表的符號(hào)
list-style-type: 屬性；//設(shè)置列表樣式
list-style-type: none; //清楚樣式
屬性有很多可以自己去試：circle，disc,decimal。。。。
二、設(shè)置列表圖片符號(hào)
為ul,ol設(shè)置圖片符號(hào)
ul,ol{
list-style-image: url("li.png")
}
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>設(shè)置列表的符號(hào)</title>
<style type="text/css">
ul,ol{
list-style-image: url("li.png")
}
</style>
</head>
<body>
<ul>
<li>主頁</li>
<li>我的博客</li>
<li style="list-style-image: url('image.png')">我的相冊(cè)</li>
<li>留言</li>
<li>關(guān)于我</li>
</ul>
<ol>
<li>主頁</li>
<li>我的博客</li>
<li>我的相冊(cè)</li>
<li>留言</li>
<li>關(guān)于我</li>
</ol>
</body>
</html>
顯示效果：
三、創(chuàng)建簡單導(dǎo)航菜單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>創(chuàng)建簡單導(dǎo)航菜單</title>
<style type="text/css">
#navigation{
/* width: 120px; */
font-family: Arial;
font-size: 14px;
text-align: center;
}
#navigation ul{
list-style-type: none;
margin:0px;
padding:0px;
}
#navigation li{
border-bottom:1px solid #9F9FED; /* 添加下劃線 */
float: left; /* 橫向排列 */
}
#navigation li a{
display: block;
height:1em;
padding: 5px 5px 5px 0.5em;
text-decoration: none;
}
#navigation li a:link,#navigation li a:visited{
background-color: #1136c1;
color: #FFF;
}
#navigation li a:hover{ /* 鼠標(biāo)經(jīng)過時(shí) */
background-color: #002099; /* 改變背景 */
color: #ff0; /* 改變文字顏色 */
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">主頁</a></li>
<li><a href="#">我的博客</a></li>
<li><a href="#">我的相冊(cè)</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">關(guān)于我</a></li>
</ul>
</div>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的CSS設(shè)置列表樣式和創(chuàng)建導(dǎo)航菜單實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了CSS 帶搜索導(dǎo)航欄的示例代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2021-02-22
html+css+js實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)漸變效果
這篇文章主要介紹了html+css+js實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)漸變效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-28
css錨點(diǎn)定位被頂部固定導(dǎo)航欄遮住的解決方案
這篇文章主要介紹了css錨點(diǎn)定位被頂部固定導(dǎo)航欄遮住的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-04-09
這篇文章主要介紹了純CSS實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨效果，本文圖文并茂實(shí)例代碼詳解，給大家介紹的非常詳細(xì)，需要的朋友參考下吧2019-12-09html+css 實(shí)現(xiàn)簡易導(dǎo)航欄功能
這篇文章主要介紹了基于html+css 實(shí)現(xiàn)簡易導(dǎo)航欄功能，主要就是css（級(jí)聯(lián)樣式表）對(duì)html的內(nèi)容做格式化。具體內(nèi)容詳情大家跟隨小編一起通過本文學(xué)習(xí)吧2021-04-07
CSS導(dǎo)航條菜單之帶小三角形的實(shí)現(xiàn)代碼
這篇文章主要介紹了CSS導(dǎo)航條菜單之帶小三角形的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-22
css實(shí)現(xiàn)導(dǎo)航切換的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了css實(shí)現(xiàn)導(dǎo)航切換效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-15
CSS中的導(dǎo)航欄和下拉菜單的實(shí)現(xiàn)
這篇文章主要介紹了CSS中的導(dǎo)航欄和下拉菜單的實(shí)現(xiàn)的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-18
純CSS + 媒體查詢實(shí)現(xiàn)網(wǎng)頁導(dǎo)航效果
這篇文章主要介紹了純CSS + 媒體查詢實(shí)現(xiàn)網(wǎng)頁導(dǎo)航效果,需要的朋友可以參考下2018-05-02
這篇文章主要介紹了CSS3 二級(jí)導(dǎo)航的制作的示例的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-02
