如何运用html和css制作一个简单的网页导航
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.nav{
/* 设置高和宽 */
height: 90px;
width: 530px;
/* 背景颜色 */
background-color: #909090;
/* 左右自动居中 */
margin-left: auto;
margin-right: auto;
/* 行内元素-行内块元素-文本居中 */
text-align: center;
}
.nav a{
/* 转换为块元素，为了设置宽高 */
display: inline-block;
/* 高 */
width: 105px;
/* 行高90 让文本垂直在90居中 */
line-height: 90px;
/* 文字大小，粗细 */
font-size: 24px;
font-weight: 800;
/* 不要装饰线 */
text-decoration: none;
/* 白色 */
color: white;
/* 默认设置左边两像素和背景一致的边框 */
border-left:1px solid #909090 ;
}
.nav a:hover{
/* 鼠标放上去改变背景和边框颜色 */
background-color: red;
border-left-color:white ;
}
</style>
</head>
<body>
<div class="nav">
<a href="">首页</a>
<a href="">活动</a>
<a href="">帮助</a>
<a href="">招聘</a>
</div>
</body>
</html>
效果示例：
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
