网页制作-导航栏

注意点

实际开发中，不会直接用链接a，而是使用li包含链接（li+a）的做法

意义

• li+a 语义更加清晰，一看就是有条理的列表型内容；
• 如果直接用啊，搜索引擎容易辨别为有堆砌关键字嫌疑，导致被搜索引擎降权的风险，影响网站排名。

建议

1. 让导航栏一行显示，li是块级元素，需要给li加浮动
2. 导航栏可不加宽度，为以后新增导航留下空间
3. 导航文字长短不一，将li中的a添加左右padding撑开盒子

示例

<!-- html -->
<div class="nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">课程</a></li>
    <li><a href="#">职业课程</a></li>
  </ul>
</div>

<!-- css -->
/* 去除li前面的数字或图案 */
li {
  list-style: none;
}
/* 去除a的下划线 */
a {
  text-decoration: none;
}
.nav {
  float: left;
  margin-left: 60px;
}
.nav ul li {
  float: left;
}
.nav ul li a {
  display: block;
  height: 42px;
  padding: 0 10px;
  line-height: 42px;
  font-style: 18px;
  color: #050505;
}