css中井然有序无编码序列表项list款式设定方式

日期:2021-02-28 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

在无编码序列表ul>li中,无线网络目录的标示是出現在各目录前面的圆点。在井然有序目录ol>li中,前面默认设置带了解字,怎样改动目录前面的新项目标记,只必须根据list-style调剂就好,普遍的标记有(/*內容注解一部分*/)list-style-type:circle;/*空心圆*/list-style:none;/*除去标示*/list-style:square;/*方块*/list-style:upper-roman;/*罗马数据*/list-style:lower-alpha;/*list-style-type:upper-alpha;大写字母*/等!

编码以下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css怎样玩转井然有序无编码序列表项list款式</title>
    <style type="text/css">
    ul.box1{
        list-style-type:circle;/*空心圆*/
    }
    .box1 li{
        list-style:none;/*除去标示*/
        background-image: url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");/*图文融合,目录前面加上照片*/
        height: 50px;
        background-repeat: no-repeat;
        background-size: 20px;
        /*设定情况照片尺寸。照片能够保有其原来的规格,或拉伸到新的规格,或在维持其原来占比的另外放缩到元素的能用室内空间的规格。*/
        padding: 0px 25px 10px;/*调剂内边距 上 上下 下*/
    }
    ul.box2{
        list-style:square;/*方块*/
    }
    ul.box3{
        list-style:upper-roman;/*罗马数据*/
    }
    ul.box4{
        list-style:lower-alpha;/*list-style-type:upper-alpha;大写字母*/
    }
    ol.box5{
        list-style: none;
        list-style:upper-alpha;
        color: indianred;
    }
    </style>
</head>
<body>
    <!-- 无线网络目录 -->
    <ul class="box1">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <ul class="box2">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <ul class="box3">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <ul class="box4">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <!-- 无编码序列表把ul>li换为ol>li井然有序目录,前面默认设置带了解字-->
    <ol class="box5">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ol>
</body>
</html>

总结

款式所述是网编给大伙儿详细介绍的css中井然有序无编码序列表项list款式设定方式,期待对大伙儿有一定的协助!