思路_导航栏
效果演示:
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
body,
ul,
li {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.nav {
width: 900px;
height: 40px;
background: pink;
margin: 20px auto;
}
.nav ul li {
float: left;
width: 300px;
text-align: center;
}
.nav ul li a {
display: inline-block;
height: 40px;
font-family: 'yahei';
font-weight: bold;
padding: 0 20px;
line-height: 40px;
text-decoration: none;
}
.nav ul li a:hover {
background: #aaa;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Html</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</body>
</html>
思路分析:
- 通过设置列表实现导航栏元素的添加
- 去掉列表黑点样式以及超链接标签的下划线
list-style: none;
text-decoration: none;
- 设置字体、边距、行高、点击样式等等
我们首先给一个外层的 div 盒子,让它在浏览器中水平居中,让它与浏览器视口上方有一段距离。然后在 div 盒子里面嵌套一个 ul 标签,ul 标签下嵌套三个 li 标签,每一个 li 标签下再写一个 a 标签,li 标签的宽度为 div 盒子的三分之一。文字内容相对于 li 标签是水平居中的,链接点了之后自己设置一个与默认颜色不同的颜色,字体样式为: 14px/40px 微软雅黑 加粗。
把最实用的经验,分享给最需要的读者,希望每一位来访的朋友都能有所收获!