首页 > css教程 > 正文

通栏导航栏的制作,综合使用CSS属性,代码不超过30行

转载 2019-02-11 0 24

这篇文章,小海老师带领大家一同做一个利用CSS技术实现的导航栏。通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度。

承接文章:灵活控制块级元素在一行内显示,CSS浮动属性,知道原理就很简单

技术等级:初级 | 适合前端开发的初学者阅读学习。

通栏导航栏的制作,综合使用CSS属性,代码不超过30行

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的号,因为这些文章都是连载的,并且是经过系统的归纳和总结的。塌下心来认真阅读,你一定会学到对你有用的知识。

如果你是初学前端开发,强烈建议跟着文章中讲的步骤自己做一做。步骤不多,思路简单,占用不了大家太多的时间,自己做一遍,一定会收获不少。

一、导航栏效果图展示:

今天我们要做的导航栏效果如下图所示。

通栏导航栏的制作,综合使用CSS属性,代码不超过30行

导航栏效果图展示

这个效果主要使用的是

    标记对和标记对共同实现的。

    整个实例涉及到的CSS属性如下所示:

    • width

    • height

    • background-color

    • list-style-type

    • display

    • float

    • margin

    • line-height

    二、实现页面效果:

    首先为导航栏设置一个

    容器,并设置其id属性的取值设置为nav。该容器用来控制导航栏的通栏位置。通栏的容器宽度应该设置为100%,这里高度设置为40px,颜色为#a72f2e。实现代码如下所示:

    #nav{

    width:100%; height:40px;

    background-color:#a72f2e;

    }

    由于要在通栏的容器中显示固定宽度为1000px的导航栏主体,因此在该容器内部再制作一个

    容器,用来盛放真正的导航栏代码。我们将它的class属性取值为navContent。这个容器的宽度设置为1000px,高度与#nav的高度等高,并且在#nav容器内部水平居中。实现代码如下所示:

    #nav .navContent{

    width:1000px; height:40px;

    margin:0 auto;

    }

    接下来在.navContent容器内部书写导航栏的各个条目。导航栏是使用

      标记对实现的,而它的导航栏条目是利用
    • 标记对书写的。因为导航栏需要单击后跳转页面,所以在
    • 内部使用了标记对。

      这里要说明一点,因为

    • 标记对是块级元素,标记对是内联元素,因此要让
    • 标记对包裹标记对,不要用标记对包裹
    • 标记对。

      这里以导航栏条目“首页”和“网站介绍”为例,下列HTML代码展示了导航栏的条目内容。

      • 首页
      • 网站简介

      需要更多的导航栏条目,可以在

        标记对内部重复书写
      • 的代码格式。

        三、编写整个导航栏的CSS样式:

        整个导航栏是使用

          标记对实现的,所以需要对
            标记对编写CSS样式。

            由于无序列表的列表项左侧带有小圆点的项目符号,因此需要将该项目符号去掉。所以

              标记对的CSS代码如下所示:

              #nav .navContent ul{

              list-style-type:none;

              }

              四、编写导航栏条目的CSS样式:

              导航栏条目是使用

            • 标记对实现的,所以需要对
            • 标记对编写CSS样式。

              由于

            • 标记对是块级元素,因此即使去掉了左侧的项目符号,所有的条目依然都各自独占一行显示,所以需要让它们在一行内显示,这就需要让所有的
            • 标记对左浮动。CSS代码如下所示:

              #nav .navContent ul li{

              float:left;

              }

              五、编写导航栏条目中链接的CSS样式:

              导航栏条目中的链接是使用标记对实现的,所以需要对标记对编写CSS样式。

              由于标记对是内联元素,因此无法设置宽度和高度,也就无法为每一个导航栏条目设置尺寸。因此需要将标记对转换为块级元素(display属性),然后设置宽度和高度(width属性和height属性)。

              有了宽度和高度,就需要让链接的文本在容器中水平居中(text-align属性)和垂直居中(line-height属性)了。

              最后去掉链接的下划线(text-decoration属性),并设置链接的文本颜色(color属性)。

              导航栏条目中链接的CSS代码如下所示:

              #nav .navContent ul li a{

              display:block;

              width:100px; height:40px;

              text-align:center;

              line-height:40px;

              text-decoration:none;

              color:#dddddd;

              }

              六、编写鼠标经过导航栏条目时的CSS样式:

              鼠标经过导航栏目时,即使没有触碰到链接的文本部分,也应该能够进行跳转。因此需要对标记对编写鼠标经过时的CSS样式。

              鼠标经过时,希望背景颜色(background-color属性)和文本颜色(color属性)发生变化。

              鼠标经过链接时的CSS代码如下所示:

              #nav .navContent ul li a:hover{

              background-color:#ff5857;

              color:#ffffff;

              }

              七、整体代码:

              至此,这个简单的导航栏效果就完全实现了,CSS整体使用了约30行代码。实现这个导航栏效果的HTML代码如下图所示。

              通栏导航栏的制作,综合使用CSS属性,代码不超过30行

              HTML整体代码

              实现这个导航栏效果的CSS代码如下图所示。

              通栏导航栏的制作,综合使用CSS属性,代码不超过30行

              CSS整体代码

              小海教材

              如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容,可以私信我,我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你,帮助你在前端开发的道路上阔步前行。

              小海声明

              在上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章,逐步学到一定的知识,甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验,每写一篇时我都尽量把握好措辞,用简单易懂的语言描述,同时精心设计版面,让版面更加丰富,激发阅读兴趣。所以,每一篇文章可能篇幅不长,但是都要耗费小海老师很久的时间。

              希望收藏了这篇文章的你同时也可以关注一下“小海前端”的号,因为这些文章都是连载的,并且是经过系统的归纳和总结的。塌下心来认真阅读,你一定会学到对你有用的知识。

              关注“小海前端”,我会继续为大家奉上更加深入的前端开发文章,也希望更多的初学者跟着学下去,我们共同将前端开发的路努力坚持的走下去。

              文章预告

              下一次,小海老师开始为大家讲解CSS的盒属性。盒属性是div布局的基础,在实际的布局过程中有许多应用技巧。下一篇文章我会为大家将盒属性一个一个进行详细的分析。

          • 相关文章


          • 【有趣的CSS题目二】从条纹边框的实现谈盒子模型
          • 性能测试YSLOW前端调优23大规则(七)——避免使用CSS表达式
          • 镂空广告,一行CSS实现滚动时藏在信息流后面的广告效果
          • 如何使用css在放大和缩小浏览器的同时不修改背景图片
          • iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性解说
          • 【167期】Stylelint 在提升企业微信 CSS 代码质量上的实践
          • CSS的内容属性,多种可能的取值,让样式设置更加丰富
          • css零基础自学教程(十一)伪类,伪元素,自动换行,font-face