优惠活动
国内大型网站导航栏制作原理
主页 > 新闻资讯 > 开发新闻 > 国内大型网站导航栏制作原理
发表于:18-10-12 13:38 阅读()

 

今天小猫建站跟大家分享的是,网站导航栏的实现原理。小伙伴们不要被它高大上的名头吓到了哦~

因为任何导航栏的实现都离不开我们今天即将学习的HTML列表标签。现在我们来看一下,即将用HTML列表标签写出的效果图是怎样的吧!

网站导航

在写出上述效果之前,先来给大家介绍一下,基本的列表元素有哪些吧?

无序列表

<ul>标签定义无序列表,列表项默认使用粗体圆点进行标记。无序列表始于<ul>标签,每个列表项始于<li>标签。开发中,无序列表一般应用于导航栏的制作。

无序列表

有序列表

<ol>标签定义有序列表,列表项默认使用数字进行标记。有序列表始于<ol>标签,每个列表项始于<li>标签。

有序列表

自定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

自定义列表

掌握好上述标签,我们就来分析一下,今天要写的导航栏的布局吧~

1)最外层:一个无序列表;

2)里层:八个列表项;

3)最里层:每个列表项中放置一个超链接。

现在我们将这段文字翻译成HTML代码,

<ul>

<li><a href="">首页</a></li>

<li><a href="">女装</a></li>

<li><a href="">母婴</a></li>

<li><a href="">美妆</a></li>

<li><a href="">国际</a></li>

<li><a href="">男装</a></li>

<li><a href="">居家</a></li>

<li><a href="">鞋包</a></li>

<li><a href="">运动</a></li>

<li><a href="">生活</a></li>

<li><a href="">更多</a></li>

</ul>

写完后效果是酱紫滴~

网站导航栏制作

 

很丑是不是?没关系,我们来将它美化一下。

1)首先,将超链接的默认样式去掉;

2)其次,将无序列表的默认样式(小圆点)去掉;

3)最后,将列表项依次向左浮动,水平排列(注意要清除li浮动后产生的副作用)。

接下来,我们将这段文字用CSS翻译一下,

<style>

/* 清除小圆点 */

ul{

list-style-type:none;

}

/* 清除li浮动后产生的副作用 */

ul::after{

content: '';

display: block;

clear: both;

}

/* 设置列表项向左浮动 */

ul>li{

float:left;

}

ul>li>a{

/* 将行内元素变为块级元素 */

display:block;

/* 清除下划线 */

text-decoration:none;

/* 设置字体大小 */

font-size: 16px;

width:60px;

height:40px;

/* 设置行高,行高与高度一致时当行高与高度一致时,会使当行文字上下居中 */

line-height:40px;

/* 设置文本颜色 */

color: #ffffff;

/* 设置背景颜色 */

background:#f10180;

/* 设置文本居中 */

text-align: center;

}

ul>li>a.pink{

background-color: #bd1067;

}

/* 鼠标悬停效果 */

ul>li>a:hover{

color:#fff;

background:#c23a7e;

}

</style>

写完后,导航栏变成了酱紫~

网站导航栏制作预览

 

也许,关于浮动的知识点,大家还不是很了解。但是没关系,在分享到CSS章节的时候,苏莱会将CSS浮动单独用一篇文章来介绍的,所以,小伙伴们不要为此担心啦~

接下来,继续为大家介绍一下怎么通过CSS来修改超链接与无序列表的默认样式吧!

首先,我们需要了解两个CSS属性

text-decoration 属性

text-decoration 属性允许对文本设置某种效果,如加下划线,或去掉默认样式的下划线。以下是它常用到的属性值,

text-decoration 属性

 

list-style-type 属性用于设置不同的列表样式。以下是它常用到的属性值,

list-style-type属性

其次,我们再复习一个之前说过的CSS属性

color 属性

color 属性用于为不同元素设置文本颜色。常用的四类属性值,

color属性

大家有没有学会呢?没学会的话记得联系小猫建站哦~

联系我们



[返回上一级]

还没开展互联网业务?马上开始 >
2006-2018 济南小猫网络科技有限公司 版权所有 销售热线:400-844-0951 售后热线:400-844-0951 监督电话:139-6902-6700 邮箱:xiaomaowangluo@163.com 鲁ICP备16033343号-2