html&&css【实现财经新闻简单页面】

最新推荐文章于 2024-08-03 16:11:42 发布

学习编程的菜鸟一枚

最新推荐文章于 2024-08-03 16:11:42 发布

阅读量223

点赞数 1

分类专栏： web前端开发学习文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_72116652/article/details/130476533

版权

web前端开发学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该文章是关于B站pink老师的前端基础学习作业，要求使用HTML和CSS实现列表样式的文字信息展示，内容包括设置虚线间隔、居中排列和鼠标悬停时改变字体颜色。作业涉及边框、外边距、行高和链接伪类的应用。

摘要由CSDN通过智能技术生成

题目来源B站pink老师前端基础学习作业

1.题目描述

页面中市场需要使用列表方式展示一些文字信息，并使用一些虚线间隔开标题和主题内容，如下图所示，在鼠标经过的时候文本有特殊的字体颜色，请使用css和html代码完成下面效果。

财经新闻

2.训练目标

能使用边框设置虚线、能使用外边距设置标签之间的距离让标签居中

3.训练提示

1、边框设置主题内容上下的虚线。

2、显示的文本可以用外边距、或者行高来间隔开文本的距离。

3、使用链接伪类来设置鼠标经过的样式

4.代码

HTML代码

<body>
    <div class="box">
        <h3>科技版第3轮现场督导开启:财务核查等为重点</h3>
        <ul>
            <li><a href="#">科创板业绩抢眼 基金经理重新审视估值体系</a></li>
            <li><a href="#">券商IPO承销保荐费受益科创板 下半年揽入32亿</a></li>
            <li><a href="#">专用设备制造企业营收破30亿 达6亿企业占一半</a></li>
            <li><a href="#">银行资金加速布局科创板 交银基金规模破10亿</a></li>
        </ul>
    </div>
</body>

CSS代码

style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 245px;
            width: 610px;
            margin: 20px auto;
            border-bottom: 1px dashed #dedfdf;
        }

        .box h3 {
            height: 68px;
            border-bottom: 1px dashed #dedfdf;
            font-size: 28px;
            line-height: 68px;
            padding-left: 23px;
        }

        .box ul {
            margin-top: 8px;
            padding-left: 40px;
        }

        .box ul li {
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .box ul li a {
            font-size: 18px;
            text-decoration: none;
            color: #424242;

        }

        .box ul li a:hover {
            color: red;
        }
    </style>