html+css练习（一）导航栏（有详细注释）

最新推荐文章于 2022-03-20 16:26:45 发布

yggjdle

最新推荐文章于 2022-03-20 16:26:45 发布

阅读量642

点赞数

分类专栏：前端项目文章标签： css html css3

本文链接：https://blog.csdn.net/qq_41867900/article/details/114875752

版权

前端项目专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.垂直导航栏

效果图
当鼠标放上去的时候，颜色会变
在这里插入图片描述
点击时

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS垂直导航栏</title>
        <style>
            body{
                /* 消除间隙 */
                margin:0;
            }
            ul{
                /* 清除小标志*/
                list-style-type: none;
                padding:0;
                margin:0;
                width:200px;
                height:100%;
                background-color: gainsboro;
                /* 这种简写的情况下，不要忘记设置border-style，这里设置为solid实线 */
                border:1px solid black;
                
            }

            a{
                /* 从行内元素变为块级元素，可以让一行都点击 */
                display:block;
                /* 设置长度 */
                width:auto;
                /* 链接去掉下划线 */
                text-decoration: none;
                /* 设置字体颜色 */
                color:black;
                /* 设置a的 不要设置li的 不然会有空隙 */
                padding-top: 10px;
                text-align: center;
            }
            /* 这里只添加了 下边界，因为如果全部边界都包裹的话会重叠*/
            li{
                border-bottom:1px solid black;
            }
            /* 为了不重叠最下面的，最后一个设置为0 */
            li:last-child{
                border-bottom: 0px;
            }
            a:hover{
                background-color: gray;
                color:white;
            }
            a:active{
                background-color: pink;
            }
            
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </body>
</html>

2. 全屏高度的固定导航条

效果图

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS垂直全屏固定导航栏</title>
        <style>
            body{
                /* 消除间隙 */
                margin:0;
            }
            ul{
                /* 清除小标志*/
                list-style-type: none;
                padding:0;
                margin:0;
                width:25%;
                background-color: gainsboro;

                /* 全屏添加了这里 */
                height: 100%;
                /* 要设定position为fixed，为了固定 */
                position:fixed;
                /* 如果导航栏的内容很多允许滚动 */
                overflow:auto;
            }

            a{
                /* 从行内元素变为块级元素，可以让一行都点击 */
                display:block;
                /* 设置长度 */
                width:auto;
                /* 链接去掉下划线 */
                text-decoration: none;
                /* 设置字体颜色 */
                color:black;
                /* 设置a的 不要设置li的 不然会有空隙 */
                padding-top: 10px;
                text-align: center;
            }
            /* 这里只添加了 下边界，因为如果全部边界都包裹的话会重叠*/

            /* 为了不重叠最下面的，最后一个设置为0 */
            li:last-child{
                border-bottom: 0px;
            }
            a:hover{
                background-color: gray;
                color:white;
            }
            a:active{
                background-color: pink;
            }
            
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </body>
</html>

3.水平导航栏

可以用float或者将li元素设置为display:inline
推荐使用float
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.水平导航栏浮动</title>
    <style>
        ul{
            width:100%;
            list-style-type: none;
            margin:0;
            padding:0;
            position: fixed;
            background-color:lemonchiffon;
            /* 固定在顶部 */
            top:0;
            /* 固定在底部 */
            /* bottom:0; */
        }
        a{
            float:left;
            color:black;
            padding: 20px;
            text-align: center;
            text-decoration: none;
        }
        a:hover{
            background-color:lavender;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>
</body>
</html>

yggjdle

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html+css练习（一）导航栏（有详细注释）

1.垂直导航栏效果图当鼠标放上去的时候，颜色会变点击时<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS垂直导航栏</title> <style> body{ /* 消除间隙 */ margin:
复制链接

扫一扫