liu.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>刘</title>
<link rel = "stylesheet" type = "text/css"
href = "MyHtml.css">
</script>
</head>
<body>
<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>
</body>
</html>
liu.css
*{
margin:0;
padding:0;
font-family:arial;
color:#424242;
}
.nav{
list-style:none;
}
a{
text-decoration:none;
}
.nav .list-item{
float:left;
margin:0 10px;
height:30px;
line-height:30px;
}
.nav::after{
content:"";
display:block;
clear:both;
}
.nav .list-item a{
color:#f40;
padding:0 5px;
font-weight:bold;
display:inline-block;
border-radius:15px;
}
.nav .list-item a:hover{
background-color:#f40;
color:#fff;
}