CSS-列表的样式

作者: 测试探索 | 来源:发表于2022-06-04 09:55 被阅读0次

CSS-列表的样式
Day04
列表 - List
用RecyclerView写的城市列表
前端学习之CSS
2018-11-22
css 列表
如何设计特殊样式的有序列表？
RecyclerView的学习了解
AlertDialog基本使用

一、列表样式介绍

image.png

二、目录结构和代码

image.png

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <p>http://www.baidu.com</p>
    <p class="p1">test</p>
     <p>散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。</p>

    <ul>
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
        <li>dddd</li>
        <li>eeee</li>

    </ul>

    <ol>
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
        <li>dddd</li>
        <li>eeee</li>

    </ol>

</body>
</html>

index.css

p{
    color: #ff1493;
    direction: ltr;
    letter-spacing: 5px;
    line-height: 30px;
    text-align: justify;
    font-family: 隶书, serif;
    font-style: oblique;
    font-weight: bold;
    font-size: 15px;
}

ul{
    list-style-type: circle;
    list-style-position: inside;
    list-style-image: url("../image/3.png");
}

ol{
    list-style-type: lower-latin;
}

image.png