自定义导航条样式
程序员文章站
2022-03-03 23:24:49
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
/*去除自带效果*/
body,nav>ul{
margin: 0;
padding: 0;
}
body{
background: #e1dada;
}
nav>ul{
background: white;
}
/*定义伸缩盒子*/
.flex{
display: flex;
/*宽度铺满*/
width: 100%;
/*最低宽度*/
min-width: 1024px ;
height: 70px;
/*使li分散对齐*/
Justify-content:space-around;
/*超出部分隐藏*/
/*overflow:hidden;*/
}
/*去除li前的小点*/
nav>ul>li{
list-style-type: none;
line-height: 70px;
}
a{
/*去除a标签下的样式*/
text-decoration: none;
/*设置文字的颜色*/
color: grey;
}
/*设置logo*/
.logo img{
height: 70px;
width: 120px;
}
/*一级菜单鼠标悬停效果*/
nav>ul>li>a:hover{
color: red;
background-color: white;
}
.erjiul{
background-color: white;
width: 200px;
padding-left: 0;
/*隐藏二级菜单*/
display: none;
}
.erjiul>li{
list-style-type: none;
}
.erjiul>li>a{
text-align: left;
padding-left: 5px;
}
/*二级菜单的悬停效果*/
.erjiul>li>a:hover{
color: red;
}
nav>ul>li:hover>ul{
/*显示二级菜单*/
display: block;
}
/*输入框的样式*/
nav>ul>li>form>input{
border: 1px #e1dada solid;border-radius: 5px;height: 30px;
}
</style>
</head>
<body>
<nav>
<ul class="flex">
<li class="logo"><span><a href="" ><img src="https://www.php.cn/static/images/PHPlogo.png" alt=""> </a></span></li>
<li>
<a href=""> 下载站首页 v </a>
<ul class="erjiul">
<li><a href="">PHP开发编辑器</a></li>
<li><a href="">JAVA开发编辑器</a></li>
<li><a href="">PYTHON开发编辑器</a></li>
</ul>
</li>
<li>
<a href=""> JS特效 v </a>
<ul class="erjiul">
<li><a href="">聚焦幻灯</a></li>
<li><a href="">图片特效</a></li>
</ul>
</li>
<li><a href=""> 网站源码 v </a></li>
<li><a href=""> 工具下载 v </a></li>
<li><a href=""> 手册下载 v </a></li>
<li>
<form action="">
<input type="search" placeholder="搜索" onchange="alert(this.value)" name="" id="">
</form>
</li>
</ul>
</nav>
</body>
</html>