实战经验（1）——头部导航栏制作技巧

导航栏（1）

一、导航栏之logo制作

一般网页logo不只是一个图片那么简单，它可以给用户提供网页跳转到首页的功能，更重要的是搜索引擎优化让百度搜索名更靠前。

• logo功能
  • 单击跳转首页
  • 搜索引擎优化：提升百度搜索排名
• 制作方法
  • 标签结构： h1>a>网站名关键字
  • css样式：

HTML

<div class="logo">
	<h1><a href="#">学成在线</a></h1>
</div>
}

CSS

.logo a{
   
	display:block;
	width:195px;
	height:41px;
	background-image:url(../images/logo.png);
	/* 隐藏文字 */
	font-size: 0;

效果图

二、导航栏之导航文字制作技巧

导航栏其实就是几个超链接，目的就是为了跳转页面。

• 做法
  • 标签结构： ul>li>a
  • css样式：

HTML

<div class="nav">
          <ul>
            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">职业规划</a></li>
          </ul>
</div>
}

CSS

.nav ul{
   
    display: flex;
}
.nav li a{
   
    display: block;
    padding: 6px 8px;
    line-height: 27px;
    font-size: 19px;