<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a {
/* 一档要进行模式转换,转换为行内块元素; */
display: inline-block;
width: 100px;
height: 30px;
background-color: pink;
text-align: center;
color: #fff;
text-decoration: none;
line-height: 30px;/* 行高等于高度,可以让单行文本垂直居中。 */
}
/*鼠标经过时,底色改变,文字颜色改变*/
a:hover {
background-color: orange;
color: yellow;
}
</style>
</head>
<body>
<a href="#" />体育</a>
<a href="#" />新闻</a>
<a href="#" />实事</a>
<a href="#" />导航</a>
</body>
</html>