资料目录

列表（ul、li）

2020年04月28日更新
观看视频

网页中ul、li这一对标签用途比较广泛，比方说常见的，文章列表、导航条一般都是使用他们两个来实现。那这一节，咱们就学习他们应该怎么设置样式呢。

文章列表

CSS中文章列表的做法

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        body {
            font-family: "PingFang SC", "微软雅黑", "Microsoft YaHei", Helvetica, "Helvetica Neue", Tahoma, Arial, sans-serif;
        }

        .container {
            width: 350px;
        }

        h2 {
            text-align: center;
            color: #1f99b0;
        }

        ul {
            list-style: none;
        }

        ul li {
            height: 35px;
            line-height: 35px;
        }

        ul li a, ul li a:visited {
            text-decoration: none;
            color: #1f99b0;
            font-size: 16px;
        }

        ul li a:hover {
            opacity: .7;
        }

        ul li span {
            float: right;
            color: #aaa;
        }
    </style>
</head>

<body>

<div class="container">
    <h2>小皮皮</h2>

    <ul>
        <li>
            <a href="">琴棋书画都不会</a>
            <span>2018/08/15</span>
        </li>
        <li>
            <a href="">洗衣做饭还嫌累</a>
            <span>2018/08/15</span>
        </li>
        <li>
            <a href="">除了长得有点美</a>
            <span>2018/08/15</span>
        </li>
        <li>
            <a href="">剩下就是吃和睡</a>
            <span>2018/08/15</span>
        </li>
    </ul>
</div>

</body>
</html>

导航条

CSS列表之导航条

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        body {
            font-family: "PingFang SC", "微软雅黑", "Microsoft YaHei", Helvetica, "Helvetica Neue", Tahoma, Arial, sans-serif;
        }

        ul {
            list-style: none;
        }

        ul li {
            display: inline-block;
            margin-right: 5px;
        }

        ul li a, ul li a:visited {
            text-decoration: none;
            font-size: 15px;
            color: #1e1e1e;
            padding: 7px 8px 6px;
            display: block;
        }

        ul li a:hover {
            background: #eaeaea;
            border-radius: 5px;
        }
    </style>
</head>

<body>

<ul>
    <li><a href="">ITFun.tv</a></li>
    <li><a href="">课程分类</a></li>
    <li><a href="">最新发布</a></li>
    <li><a href="">线下培训</a></li>
</ul>

</body>
</html>

已添加到喜欢了