HTML制作导航条的方法

最新推荐文章于 2024-05-19 09:58:49 发布

北柠陌语

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量6k

点赞数 6

分类专栏： html 文章标签：大数据

本文链接：https://blog.csdn.net/SSSS__AS/article/details/125503756

版权

html 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.编写html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
  <body>
    <ul>
      <li><a href="#">HTML/CSS</a></li>
      <li><a href="#">Browser Side</a></li>
      <li><a href="#">Server Side</a></li>
      <li><a href="#">Programming</a></li>
      <li><a href="#">XML</a></li>
      <li><a href="#">Web Building </a></li>
      <li><a href="#">Reference</a></li>
    </ul>
  </body>
</html>

2.接下来写样式表，常规放在同一目录下的styles文件夹中

去链接的下划线和小圆点

li {
        list-style: none;
      }
      a {
        text-decoration: none;
        color: #777777;
      }

设置ul，li，还有鼠标移入后的链接的表现

ul {
        width: 1197px;
        height: 50px;
        background-color: #e7e7e2;
        margin: 50px auto;
      }
      ul > li {
        float: left;
        height: 50px;
        line-height: 50px;
        width:171px;
        text-align: center;
      }
      ul > li:hover {
        background-color: #403f40;
      }

对全部的超链接进行修饰

  a {
        display: block;
      }
      a:hover {
        color: white;
      }

北柠陌语

关注

6
点赞
踩
38

收藏

觉得还不错? 一键收藏
0
评论
HTML制作导航条的方法

html中写导航条的方法，需要的可复制粘贴。
复制链接

扫一扫

专栏目录

HTML制作导航条的方法

“相关推荐”对你有帮助么？