. 此篇文章讲解目录：

• 案例和由此案例重点讲解的知识点介绍

• 案例代码实现

• 行内标签知识点详解

2. 案例和相关知识点介绍

此案例是页面，效果如下：

此页面的技术实现解析：

所有元素在统一行显示的时候，需要使用到行内标签img 和 a来实现

此案例中主要用到了，基于此，我们会系统的将如下知识点全部讲解：

行内标签

3. 此案例的代码实现

第一步：书写导航条的html代码

第二步：定义导航的css样式

4. 此案例的知识点详解

行内元素

-行内元素：

在html中<a>、<span>、<br>、<i>、<em>、<strong>、<label>等等属于行内元素

-行内元素三大特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变（废话）。

案例：

a{

background-color: PowderBlue;

width: 500px;

height: 300px;

//元素的高度、宽度、行高及顶部和底部边距不可设置

}

大家好接下来我们会邀请前端架构师以连载的方式，并且结合阿里天猫商城的门户，系统讲解Css的专业知识，欢迎大家关注头条号“互联网IT信息”。

在公司网站建设中，离不开网站的导航设计，清晰的网站导航可以降低网站的跳出率，使访问网站的用户更完整的了解网站结构，那么如何打造完美的网站导航呢？

第一、导航使用文字编辑器。

我们都知道百度蜘蛛目前不能识别图片，之所以采用文字编辑，是为了更好的让搜索引擎蜘蛛爬行，使其明白网站的结构，及让用户知道自己所处的位置。

另外，导航使用文字编辑器而不是在图片上设置链接，那是为了加快网站加载的速度，很多网站为了美观，喜欢使用flash图片，js生成导航系统，使得CSS可以实现各种视觉效果，如背景，文字颜色变化，下拉菜单等。

第二、缩短内页和首页的距离。

网页的层次结构最好不要太复杂，让用户点击不要超过三次，在三次以内这都是合理的，但如果超过三次，这容易引起用户的反感，但是很多电商网站随着内容的增加，用户进入页面的距离也就加长。

要改变这种情况，缩短内页和首页的距离，最好的方式就是拥有一个合理的导航， 做好合理的分配，用户可以通过导航，在最短的距离内找到目标。

另外，减少网站的层级结构也是为了使内容得到更好的权重，一般来说，首页的权重是最高的，然后是依次传递，只有缩短内页和首页之间的距离，内页才会获得更多的排名机会。

第三、导航文字中包含关键词。

网站无论是首页还是栏目页，在拥有众多的内容页面时，导航中关于首页和栏目页的链接是获得内部链接的重要来源，当然由于内页数量多，锚文本指向首页和栏目页，所传递的权重页也就越高。

这是因为我们在构建网站时，需要对核心关键词进行定位和分类，在栏目名中含有核心关键词，这样可以很好的对网站进行分类，知道用户喜欢什么样的内容。

第四、使用面包屑导航。

面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回，面包屑导航是链接上页与下页之间的桥梁。可以说，一个清晰地网站结构，都会拥有一个面包屑导航，在内容也面较多的网站，面包屑导航的作用尤其突出。

第五、底部避免关键词堆积。

很多网站为了增加关键词的密度，宣传核心关键词，都喜欢在底部，加上一串关键词，其实这是画蛇添足之举，刻意去堆积关键词在搜索引擎认为这有作弊嫌疑，不利网站优化。

在企业网站建设中，清晰的网站导航，访客可以明确知道自己所处的位置，将要去哪一个地方，这无论是对用户还是对搜索引擎都可以帮助他们很好的理解网站结构。

SS3导航栏展开动画效果,实现不一样的手风琴菜单展开收缩动画效果！效果如下：

实现代码

html：

css：

javascript：