master

分支 (1)

管理

管理

master

zhang
/
03_网易新闻右侧列表.html

<!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>
        body {
            background-color: rgb(196, 193, 193);
        }

        * {
            padding: 0px;
            margin: 0px;
        }

        a {
            text-decoration: none;
            color: #404040;
        }

        .news-wrapper {
            width: 300px;
            height: 360px;
            border-top: 1px solid #ddd;
            margin: 50px auto;
            background-color: #ddd;
        }

        .news-title {
            /* 为了边框和文字宽度一致，需要将h2转换为行内块元素 */
            display: inline-block;
            height: 40px;
            /* 设置上边框 */
            border-top: 1px solid red;
            margin-top: -1px;
        }

        /* 设置超链接样式 */
        .news-title a {
            color: #404040;
            text-decoration: none;
            font-weight: bold;
            padding-top: 10px;
        }

        .news-title a:hover {
            color: red;
        }

        .news-img {
            height: 200px;
        }

        /* 设置图片文字效果 */
        .news-img .img-title {
            color: #fff;
            margin-top: -35px;
            font-weight: bold;
            height: 30px;
            padding-left: 30px;
        }

        .news-list {
            font-size: 16px;
            margin-top: 20px;
            padding-left: 25px;
            color: gray;
        }

        .news-list li {
            margin-bottom: 17px;
        }

        .news-list li a:hover {
            color: red;
        }
    </style>
</head>

<body>
    <div class="news-wrapper">
        <h2 class="news-title">
            <a href="https://money.163.com/">财经</a>
        </h2>
        <div class="news-img">
            <a href="https://www.163.com/dy/article/GEC8017V0519D3V1.html">
                <img src="https://cms-bucket.ws.126.net/2021/0708/743668e7j00qvwe2i001jc000u000k1c.jpg?imageView&thumbnail=300y150&type=webp"
                    alt="要降准！周五是重要观察窗口" title="财经">
                <h3 class="img-title">
                    要降准！周五是重要观察窗口
                </h3>
            </a>
            <ul class="news-list">
                <li>
                    <a href="https://www.163.com/dy/article/GECADL2T0519E14O.html">在逃的前首富 坑了银行230亿</a>
                </li>
                <li>
                    <a href="https://www.163.com/money/article/GEC7S9SB002580S6.html">北京西城18万单价以上房源下架</a>
                </li>
                <li>
                    <a href="https://www.163.com/money/article/GEBI4DC8002580S6.html"> “三条红线” 下的房企融资变奏</a>
                </li>
                <li>
                    <a href="https://www.163.com/dy/article/GEBA5SVU0512B07B.html">石家庄，这回想做真正“国际庄”</a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>