Z
ZHANK
链接列表表格

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>