css 实现简单导航栏

最新推荐文章于 2023-12-06 16:51:59 发布

艾斯比的日常

最新推荐文章于 2023-12-06 16:51:59 发布

阅读量557

点赞数

分类专栏： front

本文链接：https://blog.csdn.net/u012745499/article/details/117856038

版权

front 专栏收录该内容

86 篇文章 1 订阅

订阅专栏

css 实现简单导航栏

注意点

设置 ul 的 list-style:none; 去掉左边圆点
li 浮动 float: left; 使所有 li 都在同一行
父元素 ul 设置 overflow:hidden; 避免由于子元素浮动, 导致父元素高度塌陷
a 元素设置 text-decoration: none; 去掉下划线样式
设置 a 元素为块元素 display: block; 才能设置其宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .nav {
      /*背景色*/
      background-color: #01AAED;
      /*li 去掉点号*/
      list-style: none;
      /*避免当前元素的子元素浮动导致当前元素高度塌陷*/
      overflow: hidden;
      width: 800px;
      /*水平居中*/
      margin: 0 auto;
      padding: 0;
    }
    .nav > li {
      /*浮动, 以实现排列在同一行*/
      float: left;
      width: 25%;
    }
    .nav a {
      /*去掉下划线*/
      text-decoration: none;
      /*块状元素才能设置宽度*/
      display: block;
      /*a 占据 li 100%*/
      width: 100%;
      /*文字居中*/
      text-align: center;
      /*上下内边框 5px*/
      padding: 5px 0;
      color: white;
      font-weight: bold;
    }

    .nav a:hover {
      background-color: red;
    }
  </style>
</head>
<body>

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">联系</a></li>
  <li><a href="#">关于</a></li>
</ul>

</body>
</html>

css导航栏

艾斯比的日常

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css 实现简单导航栏

css 实现简单导航栏注意点设置 ul 的 list-style:none; 去掉左边圆点li 浮动 float: left; 使所有 li 都在同一行父元素 ul 设置 overflow:hidden; 避免由于子元素浮动, 导致父元素高度塌陷a 元素设置 text-decoration: none; 去掉下划线样式设置 a 元素为块元素 display: block; 才能设置其宽度<!DOCTYPE html><html lang="en"><hea
复制链接

扫一扫

专栏目录