话不多说先看效果再上代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {/* 去掉超链接下划线 */text-decoration: none;color: white;text-align: center;line-height: 40px;width: 100px;height: 40px;background-color: pink;}a {/* 将块元素改为行内块元素 */display: inline-block;}/* 鼠标移动到导航上，变换背景和字体颜色 */a:hover {background-color: orange;color: black;}</style>
</head>
<body><div><a href="#">新闻</a><a href="#">体育</a><a href="#">汽车</a><a href="#">娱乐</a></div>
</body>
</html>
