导航条1号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.nav{
list-style:none;
background-color: #6495ed;
width: 1000px;
/*设置居中*/
margin: 50px auto;
overflow: hidden;
}
.nav li{
float: left;
width: 25%;
}
.nav a{
display: block;
text-align: center;
padding:5px 0;
text-decoration: none;
font-weight: bold;
color:white;
}
.nav a:hover{
background-color: #cc0000;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页1</a></li>
<li><a href="#">首页2</a></li>
<li><a href="#">首页3</a></li>
<li><a href="#">首页4</a></li>
</ul>
</body>
</html>
运行效果
image.png
导航条2号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条2</title>
<style type="text/css">
*{
margin: 0 ;
padding: 0 ;
}
.box{
text-align: center;
list-style: none;
width: 700px;
height: 50px;
border: 1px gold solid;
margin:50px auto;
/*overflow: hidden;*/
}
.box li{
float: left;
width: 14%;
border-left: 1px gold solid;
}
ul > li:first-child{
border-left: none;
}
.box a{
line-height: 50px;
text-align: center;
padding: 8px 0;
font-size: 16px;
font-style: "微软雅黑";
color: pink;
text-decoration: none;
font-weight: bold;
}
.box a:hover{
color: green;
}
.au{
margin-left: 810px;
}
</style>
</head>
<body>
<ul class="box">
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">解决方案</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">行业动态</a></li>
<li><a href="#">招贤纳才</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<div class="au">
<audio autoplay="autoplay" controls="controls">
<source src="D:\UserData\My Documents\My Music\杨宗纬 - 凉凉.mp3" / >
你不可播放
</audio>
</div>
</body>
</html>
战歌唱起来
image.png
