h5学习笔记：横排导航

最新推荐文章于 2023-09-12 20:53:02 发布

hero82748274

最新推荐文章于 2023-09-12 20:53:02 发布

阅读量4.9k

点赞数 2

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/51299070

版权

javascript和Egret相关专栏收录该内容

96 篇文章 3 订阅

订阅专栏

这里写图片描述

默认的情况下，当使用导航的时候，body 边距空出有一点位置，所以需要将其设置margin和padding 为0 。

使用ul 和li的组合的时候，可以变化很多效果。默认的情况下li是竖行显示，li是block显示会占整个宽，因此改用 display: inline-block;的时候，减少了多余的空间占用，即可变成了横排的效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>导航</title>
    </head>
    <style type="text/css">

        body ,ul{margin: 0; padding: 0;}

        ul{list-style:outside none none;     }

        #nav{
            width: 100%;
            height: 45px;           
            background-color: #459df5;                  
        }

        #nav ul{
            margin: 0 auto;
            width: 1000px;
        }

        #nav li{
              display: inline-block;
              width: 120px;
              height: 45px; 
              line-height: 45px;    
              float: left;                  
         }

         #nav li a{
            text-decoration: none;
            color: white;
            display: block;
            text-align: center;
            font-size: 20px;
         }

          #nav li a:hover{
            background-color: #338ce6;
          }

         .active{
            background-color: #338ce6;
         }
    </style>

    <body>

 <header> 
      <nav id="nav">
        <ul>
           <li><a href="#" class="active">首页</a></li>
           <li><a href="#">分类</a></li>
           <li><a href="#">特色百科</a></li>
           <li><a href="#">用户</a></li>
           <li><a href="#">权威合作</a></li>
           <li><a href="#">手机百科</a></li>
        </ul>
      </nav>
 </header>      

    </body>
</html>

hero82748274

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
h5学习笔记：横排导航

默认的情况下，当使用导航的时候，body 边距空出有一点位置，所以需要将其设置margin和padding 为0 。使用ul 和li的组合的时候，可以变化很多效果。默认的情况下li是竖行显示，li是block显示会占整个宽，因此改用 display: inline-block;的时候，减少了多余的空间占用，即可变成了横排的效果。<!DOCTYPE html><html> <head>
复制链接

扫一扫