元素类型
1.块状元素
2.内联元素
3.可变元素
元素类型转换
display:
block:其他元素不能在后面显示(换行符)
inline:在元素后面删除换行符,多个元素在一行内并列显示
inline-block :元素内容以块状显示,行内其他元素显示在同一行
none:脱离文档流
list-item:元素转变为列表
实现标签栏 点击跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.div {
height: 60px;
background-color: #000;
}
.div ul {
width: 960px;
overflow: hidden;
margin: 0 auto;
}
.div ul li {
float: left;
border-right: 1px #eee solid;
}
.div ul li a {
display: block;
height: 60px;
width: 119px;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 60px;
}
.div ul li a:hover {
background: #f00;
}
.div ul li.last{
border-right: none;
}
</style>
</head>
<body>
<div class="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>
<li><a href="#">德玛西亚</a></li>
<li><a href="#">德玛西亚</a></li>
<li class="last"><a href="#">德玛西亚</a></li>
</ul>
</div>
</body>
</html>