制作如图所示 一个导航。
观察发现是a标签构成,文字居中,初始背景颜色为红色,鼠标悬停背景颜色变为橙色。
并且a标签是行内元素,不可以设置宽高,所以需要改成行内块元素。
见代码:
<!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{
width: 100px;
height: 50px;
color:#fff;
/* 背景颜色 */
background-color: red;
/* 去除装饰线 */
text-decoration: none;
/* 显示模式转换 */
display: inline-block;
/* 文字水平居中 */
text-align: center;
line-height: 50px;
}
/* 伪类选择器:鼠标悬停更改背景颜色 */
a:hover{
background-color: orange;
}
</style>
</head>
<body>
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<a href="#">导航4</a>
<a href="#">导航5</a>
</body>
</html>