<!DOCTYPE html>
<html>
<head>
<title> 百度知道 </title>
<meta charset='UTF-8'/>
<style type="text/css">
*{
margin:0;
padding:0;
}
div {
height:40px;
background-color:#76EE00;
}
li {
float:left;
width:200px;
height:40px;
line-height:40px;
text-align:center;
list-style: none;
}
a:hover {
background-color:#9AFF9A;
}
a {
text-decoration: none;
color:#FFFFFF;
width:200px;
height:40px;
font-weight:600;
display:block;
}
ul {
width:1000px; /* 必须设置具体的宽度，否则margin：0 auto，不生效 */
margin:0 auto;
}
</style>
</head>
<body>
<div>
<ul>
<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>
</body>
</html>
6：CSS模拟百度知道的导航栏
转载请注明：
本文标题：6：CSS模拟百度知道的导航栏
本文链接：https://zhangjia.io/1046.html
ps. 如果本文对您有帮助，欢迎扫码赞助本站！ヾ(◍°∇°◍)ﾉﾞ
本文标题：6：CSS模拟百度知道的导航栏
本文链接：https://zhangjia.io/1046.html
ps. 如果本文对您有帮助，欢迎扫码赞助本站！ヾ(◍°∇°◍)ﾉﾞ
山东省·济宁市
赞助本站
- 支付宝
- 微信
请登录之后再进行评论