CSS设置列表项目符号

CSS使用list-style-type属性来设置无序列表的样式,属性值可以有以下几种:

  • none,取消项目符号。
  • disc,实心圆(默认值)。
  • circle,空心圆。
  • square,正方形。

CSS使用list-style-type属性来设置有序列表的样式,属性值比较多:

  • decimal:数字(1,2,3,4等)。
  • lower-roman:小写罗马数字(i,ii,iii,iv,v等)。
  • upper-roman:大写罗马数字(I,II,III,IV,V等)。
  • lower-alpha:小写英文字母(a,b,c,d等)。
  • upper-alpha:大写英文字母(A,B,C,D等)。
  • armenian:传统的亚美尼亚编号方式、
  • Katakana:日文片假名(A,I,U,E,O,KA,KI等)。

CSS设置列表项目的版式

默认列表是竖排显示,如果想让列表并排显示,可以在li标签里面添加float:left样式或者display:inline-block样式,就可以使列表并排显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>列表项目的版式</title>
    <style type="text/css">
     body{
        background-color: #CCCCCC;
        margin: 0;
        padding: 0;
     }
     a{
        text-decoration: none;
     }
    .content ul li{
        background-color: #F8F8F8;
        padding: 4px;
        border: solid 1px #666666; 
        list-style-type: none;
        display: inline-block;
    }
    </style>
</head>
<body>
<div class="content">
    <ul >
        <li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">首页</a></li>
        <li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">新闻导航</a></li>
        <li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">娱乐文章</a></li>
        <li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">美文欣赏</a></li>   
    </ul>
</div>
</body>
</html>

发表评论

后才能评论