怎么写横向导航用css

2025-10-09 03:46:34

1、首先,创建一个html页面,并且添加一个无序列表<ul>作为导航栏内容显示位置。如图所示:

怎么写横向导航用css

2、接着创建css文件,并在html引入。如图所示:

怎么写横向导航用css

3、设置导航栏所在的div容器样式,指定宽度、高度以及背景颜色,

.navbar{

width:100%;

height:60px;

background-color:skyblue;

}

怎么写横向导航用css

4、去掉无序列表的黑色圆点,将列表<li>的display属性设置为inline,规定<li>列表项的左右内边距为20px,上下内边距为5px,左右外边距为10px。行高设置为navbar所在div的height高度。鼠标移动到<li>列表项时,设置背景颜色和边框弧度。如图所示:

怎么写横向导航用css

5、保存文件,使用浏览器打开该文件,即可看到导航栏效果。如图所示:

怎么写横向导航用css

6、完整代码如下:

navbar.html文件代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>横向导航栏</title>

<link href="navbar.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="navbar">

<ul class="navbar-list">

<li>首页</li>

<li>菜单一</li>

<li>菜单二</li>

<li>菜单三</li>

<li>菜单四</li>

</ul>

</div>

</body>

</html>

navbar.css文件代码

*{

margin:0;

padding:0;

}

.navbar{

width:100%;

height:60px;

background-color:skyblue;

}

.navbar-list{

list-style-type:none;

line-height:60px;

}

.navbar-list>li{

display:inline;

padding:5px 20px;

margin:0 10px;

cursor:pointer;

}

.navbar-list>li:hover{

background-color:rgba(66,133,244,0.4);

border-radius:4px;

}

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢