本篇文章為大家展示了怎么在CSS中設置列表樣式，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
一、設置列表的符號
list-style-type: 屬性；//設置列表樣式
list-style-type: none; //清楚樣式
屬性有很多可以自己去試：circle，disc,decimal。。。。
二、設置列表圖片符號
為ul,ol設置圖片符號
ul,ol{
list-style-image: url("li.png")
}代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>設置列表的符號</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')">我的相冊</li>
<li>留言</li>
<li>關于我</li>
</ul>
<ol>
<li>主頁</li>
<li>我的博客</li>
<li>我的相冊</li>
<li>留言</li>
<li>關于我</li>
</ol>
</body>
</html>顯示效果：
三、創建簡單導航菜單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>創建簡單導航菜單</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{ /* 鼠標經過時 */
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="#">我的相冊</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">關于我</a></li>
</ul>
</div>
</body>
</html>
css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。
上述內容就是怎么在CSS中設置列表樣式，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
