HTML+CSS 导航

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

肉卷

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

阅读量5.4k

点赞数 11

分类专栏：前端学习文章标签： HTML CSS 导航

本文链接：https://blog.csdn.net/weixin_42378133/article/details/81327335

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

新手入门，首先将每个项目可实现的方式整理总结。以下为导航实现集合，仅此记录；日后将逐渐更新不同样式导航。

导航制作：一般利用ul & li 实现。

一、水平导航
1、（水平靠左）实现方式：行内元素实现；
1）代码如下：

<body>
    <!--HTML代码：本文一直沿用-->
    <ul class="nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#home">Projectc</a></li>
        <li><a href="#home">Content</a></li>
        <li><a href="#home">About</a></li>
        <li><a href="#home">Contact</a></li>
    </ul>
    <!--HTML代码-->
</body>

    <style>
        /*CSS样式*/
        ul,li{
            /*ul，li初始化*/
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .nav li{
            display: inline;
        }
        a:link,a:visited{
            text-decoration: none;
            color: rgba(26, 25, 36, 0.966);
            padding:6px;
            text-align: center;
            font-weight: bold;
        }
        a:hover,a:active{
            background-color: cadetblue;
        }
        /*CSS样式*/
    </style>

2）效果图（hover状态下）如下：

3）如下图，利用行内元素实现导航的不足之处：

无法使链接拥有相同尺寸（inline元素width无效）
链接之间存在间隙

解决方法：
方法一：为li设置float: left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
方法二：将所有li写在同一行。不足：代码不美观。
方法三：将ul内的字符尺寸直接设为0，即font-size: 0。不足：ul中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
方法四：消除ul的字符间隔letter-spacing: -8px，而这也设置了li内的字符间隔，因此需要将li内的字符间隔设为默认letter-spacing: normal。同分辨率下
ie、Safari、chrome均可行，但不同分辨率显示器可能还是会有差异。

2、（水平靠左）实现方式：浮动列表实现；
1）代码如下：

        ul,li{
            list-style: none;
            margin: 0;
            padding: 0;

        }
        .nav li{
            float: left;/*使块状元素在同行内显示*/
        }
        a:link,a:visited{
            display: block;/*a为行内元素，将其先显示为块状元素*/
            width: 60px;/*使链接拥有同样宽度*/
            padding: 4px;
            text-decoration: none;
            color: rgba(26, 25, 36, 0.966);
            text-align: center;
            font-weight: bold;
        }
        a:hover,a:active{
            background-color: cadetblue;
        }

2）效果图（hover状态下）如下：

3、（水平靠右）实现方式：浮动列表实现；
1）代码如下：

        ul,li{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        ul{
            float: right;
        }
        li{
            float: left;
        }
        a:link,a:visited{
            text-decoration: none;
            text-align: center;
            padding: 4px;
            display: block;
            width: 60px;
            color: rgb(58, 57, 57);
        }
        a:hover,a:active{
            background-color:rgb(108, 116, 128)
        }

2）效果图（hover状态下）如下：
水平靠右

二、垂直导航
1、代码如下：

        ul,li,a{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        ul{
            /*也可利用position对导航进行定位*/
            width:25%;
            background-color: rgb(223, 219, 219)
        }
        /*右导航栏
        ul{
            float: right;
        }
        */
        a:link,a:visited{
            display: block; /*链接整个元素，而不仅是文本*/
            padding: 10px;
            text-decoration: none;
            text-align: center;
            color: rgb(94, 94, 87);

        }
        a:hover,a:active{
            background-color: darkcyan
        }