CSS之——设置列表样式和创建导航菜单

港控/mmm° 2022-05-19 09:59 262阅读 0赞

### 一、设置列表的符号 ###

>  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>

显示效果：

![70][]

### 三、创建简单导航菜单 ###

<!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>

![70 1][]

[70]: /images/20220519/8f335e2178b0453a9f24073555585895.png
[70 1]: /images/20220519/590932ff40ae4b179aff4be4226b78e6.png