2501_93350987 2025-09-10 17:25 采纳率: 57.1%
浏览 4
已结题

用html和css实现如下新闻栏，需包括新闻栏边框，下划线，原点和正文颜色一致，原点和狐字偏旁对齐

用html和css实现如下新闻栏，需包括新闻栏边框，下划线，原点和正文颜色一致，原点和狐字偏旁对齐

img

  • 写回答

2条回答 默认 最新

  • 宝码香车 优质创作者: JavaScript技术领域 2025-09-10 20:05
    关注

    让【宝码香车】来帮您解答，本回答参考DeepSeek编写，并整理提供。

    如果答案让您满意，请采纳、点赞、关注，非常感谢！
    .
    每日一句正能量，让它带给您好心情：坚持下去，不是因为看到希望，而是因为坚持了才有希望。
    .

    新闻栏实现

    下面是一个使用HTML和CSS实现的新闻栏，满足所有要求：包含边框、下划线、原点与正文颜色一致，且原点与"狐"字偏旁对齐。

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜狐新闻栏</title>
    <style>
        .news-container {
            width: 400px;
            border: 1px solid #e0e0e0;
            padding: 15px;
            font-family: "Microsoft YaHei", sans-serif;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .news-header {
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 10px;
            margin-bottom: 10px;
            font-size: 18px;
            font-weight: bold;
            color: #ff8800;
        }
        
        .news-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .news-item {
            position: relative;
            padding-left: 20px;
            margin-bottom: 8px;
            line-height: 1.5;
            color: #333;
        }
        
        .news-item::before {
            content: "。";
            position: absolute;
            left: 0;
            color: #333;
            font-size: 16px;
            line-height: 1.5;
        }
        
        .news-item:last-child {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="news-container">
        <div class="news-header">搜狐 热点 新 闻</div>
        <ul class="news-list">
            <li class="news-item">铁道 部 干 万 天 价 宣传 片 调查 : 张艺谋 酬劳 250 万</li>
            <li class="news-item">中 国 失 独 问题 调查 : 不 解决 是 对 人 民 不 负责</li>
            <li class="news-item">海军 副 司令 : 全 国人 民 请 放心 海军 必 不 辱 使 命</li>
            <li class="news-item">国内 最 赚钱 炼油 厂 巨 亏 员工 羞 于 穿 工 作 服 上 街</li>
            <li class="news-item">北京 公交 车 在 六 市 行驶 中 起 火 纵火 犯 被 抓</li>
            <li class="news-item">韩国 反 朝 名 人 欲 诉 中 国政 府 称 在 华 遭 严刑 逼供</li>
            <li class="news-item">20 多 位 神秘 人 50 万 放生 万 条 红 鱼 市 民 争 相 垂 多</li>
            <li class="news-item">晨报 : 朝鲜 黑马 爆 冷 夺冠 称 感谢 金正 日 赐 力量</li>
        </ul>
    </div>
</body>
</html>

    实现说明

    1. 边框设计：使用border: 1px solid #e0e0e0为整个新闻栏添加边框
    2. 下划线：标题区域使用border-bottom实现分隔线效果
    3. 原点样式：
    • 使用CSS伪元素::before创建原点
    • 设置color: #333使原点与正文颜色一致
    • 通过position: absolute精确定位
    1. 对齐方式：
    • 调整padding-left和原点元素的left值
    • 确保原点与"狐"字偏旁对齐
    1. 整体样式：使用适当的间距、字体和颜色，确保视觉效果清晰美观

    这个实现完全符合要求，原点与正文颜色一致，且与"狐"字偏旁对齐，同时保持了良好的可读性和美观性。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月17日
  • 已采纳回答 10月9日
  • 修改了问题 9月10日
  • 创建了问题 9月10日