效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav{
height: 41px;
border-top: 3px solid chocolate;
border-bottom: black 1px solid;
}
.nav a {
/* a是行内元素没有大小需要转换 */
display: inline-block;
height: 41px;
/* 行高等于高,使文字垂直居中 */
line-height: 41px;
text-decoration: none;
padding: 0px 20px;
color: black;
font-size: 12px;
}
.nav a:hover{