html+css制作一级水平导航条

最新推荐文章于 2023-10-13 17:08:46 发布

Jian Yue

最新推荐文章于 2023-10-13 17:08:46 发布

阅读量5.2k

点赞数 8

本文链接：https://blog.csdn.net/m0_52204142/article/details/117815005

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            padding: 0px;
            margin: 0px;
        }
        #daohang{
            position:absolute;/*绝对布局*/
            top: 40px;
            left: 300px;
            padding-top: 0px;
            width: 900px;
            height: 60px;
            background-color: rgb(100, 171, 237);
        }
        ul{/*设置导航栏的框框*/
		 	margin: auto;/*框框整体的位置，auto控制的是左右距离为自动调节*/
			width: 600px;/*框框的长度*/
			height: 35px;/*框框的宽度*/
		}
		li{
			list-style-type: none;/* 去掉li前的点 */
			float: left;/*将li设置成做浮动，变为联动*/
		}
		a{
			display: block;/*将超链接变成块状*/
			width: 100px;/*设置块的长度*/
			height: 60px;/*设置块的宽度*/
			line-height: 60px;/*设置字体在块中的高度*/
			color: #fff;/*设置字体颜色*/
			text-align: center;/*字体居中*/
			text-decoration: none;/*去掉下划线*/
			font-size: 15px;/*设置字体大小*/
		}
		a:hover{
			background-color: blue;
		}


    </style>
</head>
<body>
        <div id="daohang">
                    <ul>
                            <li><a href="">导航1</a></li>
                            <li><a href="">导航2</a></li>
                            <li><a href="">导航3</a></li>
                            <li><a href="">导航4</a></li>
                            <li><a href="">导航5</a></li>
                            <li><a href="">导航6</a></li>
                        </ul>
        </div>

    </div>
</body>
</html>

实现效果：
在这里插入图片描述

Jian Yue

关注

8
点赞
踩
67

收藏

觉得还不错? 一键收藏
3
评论
html+css制作一级水平导航条

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
复制链接

扫一扫