怎么写横向导航用css
1、首先,创建一个html页面,并且添加一个无序列表<ul>作为导航栏内容显示位置。如图所示:
2、接着创建css文件,并在html引入。如图所示:
3、设置导航栏所在的div容器样式,指定宽度、高度以及背景颜色,
.navbar{
width:100%;
height:60px;
background-color:skyblue;
}
4、去掉无序列表的黑色圆点,将列表<li>的display属性设置为inline,规定<li>列表项的左右内边距为20px,上下内边距为5px,左右外边距为10px。行高设置为navbar所在div的height高度。鼠标移动到<li>列表项时,设置背景颜色和边框弧度。如图所示:
5、保存文件,使用浏览器打开该文件,即可看到导航栏效果。如图所示:
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;
}