一个简单的前端页面（新手版）

阿金￥

已于 2024-04-10 16:50:58 修改

阅读量212

点赞数 1

文章标签：前端 html5 css

于 2024-04-08 23:34:57 首次发布

本文链接：https://blog.csdn.net/weixin_65030370/article/details/137528013

版权

前言

今天的页面是一个简单的新闻热度排列，包括实现页面的跳转以及文字颜色随鼠标移动的变化都在页面里呈现。

页面样式（由于内容原因只能打码处理）

页面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Baidu</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      font-size: 14px;
    }
    
    ul {
      list-style: none;
    }

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

    .container {
      width: 700px;
      margin: 50px auto;
    }

    .container ul li {
      display: inline-block;
      width: 288px;
      margin-right: 59px;
    }

    .container li span {
      display: inline-block;
      vertical-align: middle;
      line-height: 20px;
    }

    .container li span:nth-of-type(1) {
      width: 20px;
      height: 20px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      background: orange;
    }

    .container li:nth-of-type(2n) span:nth-of-type(1) {
      background-color: rgb(237, 230, 230);
      color: #9195ab
    }

    .container li:nth-of-type(3) span:nth-of-type(1) {
      background-color: rgb(133, 179, 211);
    }
    .container li:nth-of-type(5) span:nth-of-type(1) {
      background-color: #9d9029;
    }
    a:link {
      color: black;
    }

    a:visited {
      color: #9195ab;
    }

    a:hover {
      color: blue;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>
        <a href="https://www.baidu.com/s?wd=%E4%B9%A0%E8%BF%91%E5%B9%B3%E4%BC%9A%E8%A7%81%E8%B6%8A%E5%8D%97%E5%9B%BD%E4%BC%9A%E4%B8%BB%E5%B8%AD%E7%8E%8B%E5%BA%AD%E6%83%A0&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank"><span>1</span><span>写入你想跳转的内容</span><span></span></a>
      </li>
      <li>
        <a href="https://www.baidu.com/s?wd=%E8%B4%A2%E6%94%BF%E9%83%A8%EF%BC%9A%E8%80%B6%E4%BC%A6%E4%B8%8E%E4%B8%AD%E5%9B%BD%E8%BE%BE%E6%88%902%E7%82%B9%E6%96%B0%E5%85%B1%E8%AF%86&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank"><span>4</span><span>写入你想跳转的内容</span><span></span></a>
      </li>
      <li>
        <a href="https://www.baidu.com/s?wd=%E9%81%87%E8%A2%AD%E8%BA%AB%E4%BA%A1%E5%BE%8B%E5%B8%88%E5%8E%BB%E5%B9%B4%E5%88%9A%E7%BB%93%E5%A9%9A+%E7%88%B6%E6%AF%8D%E5%8A%A1%E5%86%9C&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank"><span>2</span><span>写入你想跳转的内容</span><span></span></a>
      </li>
      <li>
        <a href="https://www.baidu.com/s?wd=%E4%B8%89%E5%A4%A7%E6%B4%BB%E5%8A%9B%E6%8A%98%E5%B0%84%E7%BB%8F%E6%B5%8E%E2%80%9C%E6%98%A5%E6%84%8F%E2%80%9D&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank"><span>5</span><span>写入你想跳转的内容</span><span></span></a>
      </li>
      <li>
        <a href="https://www.baidu.com/s?wd=%E8%8E%AB%E6%96%AF%E7%A7%91%E6%81%90%E8%A2%AD%E5%AB%8C%E7%8A%AF%E4%BE%9B%E5%87%BA%E5%B9%95%E5%90%8E%E4%BA%BA%E5%91%98&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank"><span>3</span><span>写入你想跳转的内容</span><span></span></a>
      </li>
      <li>
        <a href="https://www.baidu.com/s?wd=%E6%B5%99%E5%A4%A7%E5%A5%B3%E7%94%9F23%E5%B9%B4%E5%89%8D%E5%86%99%E7%9A%84%E5%8A%B1%E5%BF%97%E6%A0%87%E8%AF%AD%E7%81%AB%E4%BA%86&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank"><span>6</span><span>写入你想跳转的内容</span><span></span></a>
      </li>
    </ul>
  </div>
</body>
</html>