<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: black;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
/* 居中的几个元素：定位，配合top和left，使用百分比；最后要计算div的高和宽 */
.head{
position:absolute;
top:50%;
left:50%;
border: 1px solid red;
width: 600px;
height: 60px;
margin-left: -300px;
margin-top: -30px;
text-align: center;
}
.nav .list-item a{
float: left;
margin: 0 5px;
padding: 0 5px;
height: 30px;
line-height: 30px;
border-radius: 12px;
font-weight: bold;
}
.nav .list-item a:hover{
background-color: #f40;
color:white
}
/* 1.清除浮动流的必须的三个key
2.伪元素天生存在，但是html没有实际的标签来显示出来。
3.需要将伪元素设置为块级元素才能清除浮动流
*/
.nav::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="head">
<ul class="nav">
<li class="list-item">
<a href="#">淘宝</a></li>
<li class="list-item">
<a href="#">阿里巴巴</a>
</li>
<li class="list-item">
<a href="#">天猫超市</a>
</li>
</ul>
</div>
</body>
</html>
1207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
