解密国内大型网站导航栏制作原理

小伙伴们,晚上好呀!

上期苏莱介绍的HTML表单标签,大家掌握的怎么样了呢?今天苏莱要跟大家分享的是,网站导航栏的实现原理。小伙伴们不要被它高大上的名头吓到了哦~

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

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

无序列表

标签定义无序列表,列表项默认使用粗体圆点进行标记。无序列表始于

标签,每个列表项始于

标签。开发中,无序列表一般应用于导航栏的制作。

首页

女装

母婴

美妆

有序列表

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

标签。

国际

男装

居家

鞋包

自定义列表

自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。

水果

桃子

蔬菜

白菜

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

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

2)里层:八个列表项;

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

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

首页女装母婴美妆国际男装居家鞋包运动生活更多

写完后效果是酱紫滴~

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

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

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

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

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

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

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

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

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

text-decoration 属性

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

none

默认样式,定义标准的文本

underline

定义文本下的一条线

overline

定义文本上的一条线

inherit

继承自父元素内 text-decoration 属性的值

list-style-type 属性

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

none

无标记

disc

默认样式,实心圆

circle

空心圆

square

实心方圈

decimal

数字

decimal-leading-zero

0开头的数字

lower-roman

小写罗马数字

upper-roman

大写罗马数字

lower-alpha

小写英文字母

upper-alpha

大写英文字母

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

color 属性

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

color_name

颜色值为颜色名称的颜色(如:red)

hex_number

颜色值为十六进制值的颜色(如:#ff0037)

rgb_number

颜色值为 rgb 代码的颜色(如:rgb(0,0,0))

inherit

从父元素继承颜色

今天的内容就到这啦~

小伙伴们,回去多多练习吧!

下期预告

HTML行内元素与块级元素

小伙伴们

加苏莱微信

来领取前端学习资料吧~

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180724G1ZZ7R00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券