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>
复制代码
运行结果：
我是【程序员的时光】，热爱技术分享，信仰终身学习，爱健身，会点厨艺的热血青年，我们下期再见！
评论