导航条的练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding:0 ;
}
.sn{
list-style: none;
/*去掉列表的*号*/
/*设置背景颜色*/
background-color: #6495EB;
/*解决父元素的塌陷问题*/
overflow: hidden;
/*设置父元素的宽度让其居中对齐*/
width: 80%;
margin: 50px auto;
}
.sn li{
/*/让其水平排列/*/
/*width: 25%;宽度给li制定则会造成超链接只有点到字才能点击*/
width: 25%;
/*让字体分开超链接*/
float:left;
/*由于元素浮动造成父元素塌陷*/
/*让其居中对齐*/
text-align: center;
/*设置外边距*/
/*margin: 2px 0;*/
}
a{
/*去掉下划线*/
display: inline-block;
text-decoration: none;
width: 100%;
padding:10px 0 ;
/**由于A内联元素不能设置宽度/*/
font-family: "微软雅黑";
font-weight: bold;
}
.sn a:hover{
background-color: red;
/*设置背景的移入的颜色*/
}
</style>
</head>
<body>
<ul class="sn">
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>