导航条练习
进行简单导航条练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条</title>
<style type="text/css">
/*清除默认样式*/
* { margin: 0; padding:0 }
ul {
/*设置导航条宽度*/
width: 1000px;
/*设置背景颜色*/
background: skyblue;
/*设置导航条居中*/
margin: 50px auto 0;
/*清除无序列表的项目符号*/
list-style: none;
/*解决高度塌陷问题*/
overflow: hidden;
}
ul li {
/*设置每个菜单的宽度*/
width: 25%;
/*使菜单水平显示*/
float: left;
}
ul li a {
/*将a转换为块元素*/
display: block;
/*给a设置大小*/
width: 100%;
padding: 5px 0;
/*文字居中*/
text-align: center;
/*清除超链接下划线*/
text-decoration: none;
/*统一字体样式*/
color: white;
font-size: 16px;
font-weight: blod;
font-family: airal 微软雅黑;
}
/*设置鼠标移入超链接的效果*/
ul li a:hover {
background: #b00;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
最终效果 >>请戳我<<
如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/46.html