css系列-ol，ul

列表

列表符号

使用 list-style-type 来设置列表样式，规则是继承的，所以在ul 标签上设置即可。

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(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, 等。（日文片假名）

 

      

隐藏列表符号：这个样式我们在做导航栏时经常用到

ul {
  list-style-type: none;
}

自定义列表样式：设置图片（注意使用小图片，因为无法调整图片大小，也可以通过下面设置背景图片的方式设置列表符号，可以调整背景图片大小），渐变色

ul li {
  /* list-style-image: url(xj-small.png);
  list-style-image: radial-gradient(10px 10px, red, black); */
  
  list-style-image: linear-gradient(45deg, red, black);
}

符号位置

控制符号显示在内容外面还是内部

选项	说明
inside	内部
outside	外部

ul {
  list-style-position: inside;
}

组合定义

可以一次定义列表样式

ul {
    list-style: circle inside;
}

背景符号

ul li {
  background: url(one.png) no-repeat 0 6px;
  background-size: 10px 10px;
  list-style-position: inside;
  list-style: none;
  text-indent: 15px;
}

多图背景定义

 

<style>
        ul {
            list-style-type: none;
        }

        ul li {
            background-image: url(xj-small.png), url(houdunren.jpg);
            background-repeat: no-repeat, repeat;
            background-size: 10px 10px, 100%;
            background-position: 5px 7px, 0 0;
            text-indent: 20px;
            border-bottom: solid 1px #ddd;
            margin-bottom: 10px;
            padding-bottom: 5px;

        }
</style>

追加内容

基本使用

使用伪类 ::before 向前添加内容，使用 ::after 向后面添加内容。

伪类的应用场景比较多，一定要掌握，最下面通过应用实例讲解。

a::after {
  content: " (坚持努力) ";
}

提取属性

使用属性值添加内容，可以使用标准属性与自定义属性（一般用data-*表示，比如data-title=“标题”）。

<style>
  a::after {
    content: attr(href);
  }
</style>

<a href="baidu.com">百度</a>

示例一：自定义提示框

   

代码：一定要使用自定义属性data-title，否则会出现两个提示框，一个默认，一个自定义。

<style>
        body{
            padding: 100px;
            background: #ccc;
        }
      button{
        position: relative;
      }
      button:hover::before{
          content: "";
          border:10px solid #fff;
          border-left-color: transparent;
          border-right-color: transparent;
          border-top-color: transparent;
          position: absolute;
          top: 12px;
          z-index: 1;
      }
      button:hover::after{
          content: attr(data-title);
          padding: 5px 10px;
          background: #fff;
          border: 1px solid #ddd;
          position: absolute;
          top: calc(100% + 10px);
          left: 0;
          width:max-content;
          color: green;
      }
    </style>

  <body>
    <button data-title="这是自定义提示框">按钮</button>
  </body>

示例二：

上面提示框有个缺陷，提示框的三角是白色背景，若弹窗后面的背景也是白色，那么三角就看不出来了。所以我们需要用两个三角覆盖在一起形成一个三角，来形成一个灰色边框。

 div {
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        position: relative;
      }
      div::before {
        content: "";
        border: 10px solid #000;
        border-right-color: transparent;
        border-left-color: transparent;
        border-top-color: transparent;
        position: absolute;
        top: -20px;
        left: 20px;
      }
      div::after {
        content: "";
        border: 9px solid #fff;
        border-right-color: transparent;
        border-left-color: transparent;
        border-top-color: transparent;
        position: absolute;
        top: -18px;
        left: 21px;
      }

<body>
    <div></div>
  </body>