写点什么

CSS(十二)——用 CSS 设置列表样式

发布于: 2021 年 02 月 02 日
CSS(十二)——用CSS设置列表样式

1.设置列表的符号


首先看两个默认的列表符号;


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 无序列表 --><ul>	<li>主页</li>	<li>我的博客</li>	<li>我的相册</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>Insert title here</title><style type="text/css">	ul,ol{		/* 设置列表样式 square为方式 */		list-style-type: square;	}</style></head><body><!-- 无序列表 --><ul>	<li>主页</li>	<li>我的博客</li>	<li>我的相册</li>	<li>留言</li>	<li>关于我</li></ul><!-- 有序列表 --><ol>	<li>主页</li>	<li>我的博客</li>	<li>我的相册</li>	<li style="list-style-type: circle">留言</li>	<li style="list-style-type: none">关于我</li></ol></body></html>
复制代码


运行结果:


 

下面列举 list-style-type 的一些属性值(仅供参考):


值描述 none 无标记。disc 默认。标记是实心圆。circle 标记是空心圆。square 标记是实心方块。decimal 标记是数字。decimal-leading-zero 0 开头的数字标记。(01, 02, 03, 等。)ower-romanl 小写罗马数字(i, ii, iii, iv, v, 等。)upper-roman 大写罗马数字(I, II, III, IV, V, 等。)lower-alpha 小写英文字母 The marker is lower-alpha (a, b, c, d, e, 等。)upper-alpha 大写英文字母 The marker is upper-alpha (A, B, C, D, E, 等。)lower-greek  小写希腊字母(alpha, beta, gamma, 等。)lower-latin 小写拉丁字母(a, b, c, d, e, 等。)upper-latin 大写拉丁字母(A, B, C, D, E, 等。)hebrew 传统的希伯来编号方式 armenian 传统的亚美尼亚编号方式 georgian 传统的乔治亚编号方式(an, ban, gan, 等。)cjk-ideographic 简单的表意数字 hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)


2.设置列表图片符号


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">	ul,ol{		list-style-image: url("li.png");	}</style></head><body><!-- 无序列表 --><ul>	<li>主页</li>	<li>我的博客</li>	<li>我的相册</li>	<li>留言</li>	<li>关于我</li></ul><!-- 有序列表 --><ol>	<li>主页</li>	<li>我的博客</li>	<li>我的相册</li>	<li style="list-style-image: url(image.png)">留言</li>	<li>关于我</li></ol></body></html>
复制代码


运行结果:


 

注意:图标的大小是 16px*16px;

3.创建简单导航菜单


建立一个竖向菜单:


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">	#navigation {		width:120px;		font-family:Arial;		font-size:14px;		text-align:right	}			#navigation ul {		/* 不显示项目符号 */		list-style-type:none;						margin:0px;		padding:0px;	}		#navigation li {		/* 添加下划线 */		border-bottom:1px solid #9F9FED;		}		#navigation li a{		/* 将标签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:#FFFFFF;	}		/* 鼠标经过时 */	#navigation li a:hover{							/* 改变背景色 */		background-color:#002099;					/* 改变文字颜色 */		color:#ffff00;							}</style></head><body><div id="navigation">	<ul>		<!-- 其中的href="#"是指跳转到当前页面,没有实际意义 -->		<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>
复制代码


运行结果:


 

下面来一个横向的菜单:


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">	#navigation {		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;		width:120px;	}		#navigation li a{		/* 将标签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:#FFFFFF;	}		/* 鼠标经过时 */	#navigation li a:hover{							/* 改变背景色 */		background-color:#002099;					/* 改变文字颜色 */		color:#ffff00;							}</style></head><body><div id="navigation">	<ul>		<!-- 其中的href="#"是指跳转到当前页面,没有实际意义 -->		<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>
复制代码


运行结果:




我是【程序员的时光】,热爱技术分享,信仰终身学习,爱健身,会点厨艺的热血青年,我们下期再见!


发布于: 2021 年 02 月 02 日阅读数: 50
用户头像

程序员的路,会越来越精彩! 2020.04.30 加入

公众号:程序员的时光 记录学习编程的一路时光,从小白到现在也能稳操胜券; 主要从事Java后台开发,数据结构与算法,设计模式等等; 欢迎一起交流,分享经验,学习进步!

评论

发布
暂无评论
CSS(十二)——用CSS设置列表样式