效果展示：
html：
<body>
<div class="nav">
<a href="#">看</a>
<a href="#">太阳</a>
<a href="#">从东方</a>
<a href="#">升起</a>
</div>
</body>css：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.nav{
height: 50px;
/* 上下边框 */
border-top: 3px solid #ff856f;
border-bottom: 1px solid #9d9d9d;
background-color: #fdffe7;
/* 行高 （文字和盒子高度相同--文字居中）*/
line-height: 50px;
}
.nav a{
font-size: 20px;
color: #000;
/* 去掉下划线 */
text-decoration: none;
/* 行内元素转换为行内块元素: */
display: inline-block;
padding: 0 15px;
}
.nav a:hover{
background-color: #d2fdff;
color: #ffaa00;;
}
</style>
希望对大家有帮助！
扫一扫
1115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
