0
点赞
收藏
分享

微信扫一扫

css综合案例新闻列表

和谐幸福的人生 2023-01-03 阅读 114

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>新闻列表</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        .news {

            width: 500px;

            height: 400px;

            border: 1px solid #ccc;

            margin: 50px auto;

            padding: 42px 30px 0;

        }

        .news h2 {

            border-bottom: 1px solid #ccc;

            font-size: 30px;

            line-height: 1;

            /* 行高是一倍 字号的大小 */

            padding-bottom: 9px;

        }

        ul {

            list-style: none;

            /* 去掉列表的符号 */

        }

        li {

            height: 50px;

            border-bottom: 1px solid #000;

            padding-left: 28px;

            line-height: 50px;

        }

        .news a {

            text-decoration: none;

            font-size: 18px;

            color: #666;

        }

        a:hover {

            color: skyblue;

        }

    </style>

</head>

<body>

    <div class="news">

        <h2>最新文章/New Articles</h2>

        <ul>

            <li><a href="#">北京招聘网页设计</a></li>

            <li><a href="#">北京招聘网页设计</a></li>

            <li><a href="#">北京招聘网页设计</a></li>

            <li><a href="#">北京招聘网页设计</a></li>

            <li><a href="#">北京招聘网页设计</a></li>

        </ul>

    </div>

</body>

</html>

举报

相关推荐

0 条评论