用html简易制作热点导航

最新推荐文章于 2023-05-17 15:45:55 发布

Astar stars

最新推荐文章于 2023-05-17 15:45:55 发布

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： html作品分享文章标签： html 前端 servlet

本文链接：https://blog.youkuaiyun.com/astar2022/article/details/125415956

html作品分享专栏收录该内容

14 篇文章

订阅专栏

这是一个网页热点新闻排行的展示，包括多个新闻条目，如天津某学校配餐公司的卫生状况、福州女孩婚房事件等，每个条目附带点击量。页面使用了HTML、CSS进行布局和样式设计，通过`<p>`标签的`::first-letter`伪元素增加首字母的样式，以及`<span>`标签显示新闻的热度数值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下

<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            color: black;
            text-decoration: none;
        }

        p {
            color: grey;
        }

        span {
            color: red;
        }

        p::first-letter {
            font-size: 30px;
        }


        #a {
            color:
                red;
        }

        #b::before {
            content: "10";
            color: gray;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <h1>热点排行</h1>
    <p id="a">1&nbsp;&nbsp;<a href="">网传天津某学校配餐公司卫生状</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>8202</span></p>
    <p id="a">2&nbsp;&nbsp;<a href="">福州女孩500玩婚房被男友“算”</a>&nbsp;&nbsp;<span>7612</span></p>
    <p id="a">3&nbsp;&nbsp;<a
            href="">轻松一刻:他凭什么才工作</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>2172</span>
    </p>
    <p>4&nbsp;&nbsp;<a href="">每人至少生五个!曾经的罗马尼 </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>1042</span></p>
    <p>5&nbsp;&nbsp;<a href="">以案为鉴|编黑料炒舆论诬告他人</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>967</span></p>
    <p>6&nbsp;&nbsp;<a
            href="">品味永远是流量的敌人?装嫩</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>842</span>
    </p>
    <p>7&nbsp;&nbsp;<a
            href="">英特尔高管:中国公司</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>746</span>
    </p>
    <p>8&nbsp;&nbsp;<a href="">痛心!知名表演艺术家在沪病逝</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>504</span>
    </p>
    <p>9&nbsp;&nbsp;<a href="">河南一本上线率在全国排名居于</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>425</span></p>
    <p id="b">&nbsp;&nbsp;<a href="">上海市第六人民医院徐汇院区暂</a>&nbsp;&nbsp;&nbsp;<span>383</span></p>
</body>

</html>

希望大家多多支持