<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
nav {
height: 41px;
background-color: #FCFCFC;
border-top: 3px solid #FF8500; /*上边框*/
border-bottom: 1PX solid #EDEEF0; /*下边框*/
}
nav a {
font-size: 14px;
color: #4C4C4C;
text-decoration: none; /*取消下划线*/
padding: 0 15px; /*上下0 左右15*/
height: 41px;
/*因为连接是行内元素没有大小,所以需要转换 行内快*/
display: inline-block; /* 行内快*/
line-height: 41px; /*行高等于高度可以文字垂直居中*/
}
nav a:hover { /*连接伪类选择器 鼠标经过a连接是时候*/
background-color: #eee;
/*background: url(1.png) no-repeat; 有背景图片用这个*/
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">微博</a>
<a href="#">邮箱</a>
<a href="#">新浪网</a>
</nav>
</body>
</html>
导航栏
最新推荐文章于 2024-11-01 20:50:28 发布