CSS开发-百度导航新闻栏目效果

开开心心的摆烂

已于 2022-04-17 16:11:25 修改

阅读量211

点赞数 1

分类专栏：前端小练习文章标签： css3 html 前端

于 2022-04-17 15:38:32 首次发布

本文链接：https://blog.csdn.net/l15367918596/article/details/124230611

版权

前端小练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现图如下

实现代码

<!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,h3,ul {
            /*
                清除标签自带的外边距
            */
            margin: 0px;
        }

        .news-list {
            width: 390px;
            border: 1px solid #ddd;
            margin: 50px auto 0px;/*上 左右 下*/
            padding: 15px;
            box-sizing: border-box;
            /*根据其他内容、内边距和边框调整整个盒子大小为width*/
        }

        .news-list>h3 {
            font-size: 18px;
            margin-bottom: 20px;
        }

        .news-list>ul {
            list-style: none;
            /*消除默认样式*/
            padding-left: 0px;
        }

        .news-list>ul>li {
            height: 35px;
            line-height: 35px;
            /*字体垂直居中*/
        }
        .news-list>ul span:first-child {
            margin-right: 5px;
        }
        .news-list>ul>li>a {
            text-decoration: none;/*取消下划线*/
        }
        .news-list>ul>li>a:link {
            color: #333;
        }
        .news-list>ul>li>a:visited {
            color: #333;
        }
        .news-list>ul>li>a:hover {
            color: red;
        }
        .col1{
            color: red;
        }
        .col2{
            color:rgb(224,97,97);
        }
        .col3{
            color:orange;
        }
    </style>
</head>

<body>
    <div class="news-list">
        <h3>百度新闻热榜</h3>
        <ul>
            <li><a href="#"><span class="col1">1</span>第一条</a></li>
            <li><a href="#"><span class="col2">2</span>第二条</a></li>
            <li><a href="#"><span class="col3">3</span>第三条</a></li>
            <li><a href="#"><span>4</span>第四条</a></li>
            <li><a href="#"><span>5</span>第五条</a></li>
            <li><a href="#"><span>6</span>第六条</a></li>
            <li><a href="#"><span>7</span>第七条</a></li>
            <li><a href="#"><span>8</span>第八条</a></li>
        </ul>
    </div>
</body>

</html>

开开心心的摆烂

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS开发-百度导航新闻栏目效果

实现图如下实现代码<!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"...
复制链接

扫一扫

专栏目录