CSS 列表
list-style-type/position/image、自定义列表标记、导航列表
CSS 列表
list-style 系列属性控制列表项标记——圆点、数字、自定义图片。
学完本章你将: 掌握 list-style-type/position/image、导航列表。
标记类型
css
ul.disc { list-style-type: disc; } /* 实心圆(默认) */
ul.circle { list-style-type: circle; } /* 空心圆 */
ul.square { list-style-type: square; } /* 方块 */
ol.decimal { list-style-type: decimal; } /* 数字 1,2,3 */
ol.upper-alpha { list-style-type: upper-alpha; } /* 大写字母 A,B,C */
ol.lower-roman { list-style-type: lower-roman; } /* 小写罗马 i,ii,iii */
ol.none { list-style-type: none; } /* 无标记 */
标记位置
css
.outside { list-style-position: outside; } /* 标记在外面(默认) */
.inside { list-style-position: inside; } /* 标记在内部 */
简写与自定义
css
/* 简写 */
ul { list-style: square inside; }
/* 自定义图片标记 */
ul.custom { list-style-image: url("check.png"); }
导航列表(最常用)
css
.nav { list-style-type: none; margin: 0; padding: 0; }
.nav li { display: inline-block; margin-right: 20px; }
.nav a { text-decoration: none; color: #333; }
html
<ul class="nav">
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>