【CSS3实战】改善页内导航效果

最新推荐文章于 2024-07-23 14:07:14 发布

tree thinker

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量70

点赞数

文章标签： css3 css javascript

本文链接：https://blog.csdn.net/aa1661241638/article/details/131712059

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=>, initial-scale=1.0">
  <title>Document</title>
  <style>
    body,
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    h1 {
      display: none;
    }

    ul {
      width: 1259px;
      height: 601px;
      position: relative;
    }

    ul a {
      text-decoration: none;
      color: #000;
      font-weight: bold;
      font-family: "黑体";
      font-size: 20px;
    }

    ul li {
      position: absolute;
    }

    li:nth-of-type(1) {
      left: 280px;
      top: 200px;
    }

    li:nth-of-type(2) {
      left: 670px;
      top: 200px;
    }

    li:nth-of-type(3) {
      left: 980px;
      top: 200px;
    }

    div {
      width: 1259px;
      position: relative;
      text-align: center;
      padding-left: 117px;
    }

    div h2 {
      position: absolute;
      width: 919px;
      margin: auto;
      text-align: left;
      padding: 70px 0 0 100px;
      color: #000;
      font-weight: bold;
      font-family: "黑体";
      font-size: 20px;
    }

    h2:nth-of-type(1) {
      left: 391px;
      top: -50px;
    }

    h2:nth-of-type(2) {
      left: 390px;
      top: 341px;
    }

    h2:nth-of-type(3) {
      left: 393px;
      top: 731px;
    }

    h2:target {
      color: red;
    }
  </style>
</head>

<body>
  <h1>改善页内导航视觉效果</h1>
  <ul>
    <li><a href="#h1">应用程序安装</li>
    <li><a href="#h2">音乐下载与管理</li>
    <li><a href="#h3">手机视频下载和转码</li>
  </ul>
  <div>
    <h2 id="h1">应用程序安装</h2>
    <h2 id="h2">音乐下载与管理</h2>
    <h2 id="h3">手机视频下载和转码</h2>
  </div>
</body>

</html>