百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

一篇文章教会你如何制做精美导航条

zhezhongyun 2025-05-23 21:32 2 浏览

【一、项目背景】

让更多的人去学习html，以广东科技学院的导航栏为例， 教大家怎么去做一个横向的导航栏。


【二、项目准备】

准备一个编程的软件Dreamweaver，打开软件点击文件新建一个叫导航栏的项目，如下图所示。

点击确定之后，会弹出下图。


【三、项目实施】

1. 在<body>标签里面写下一个框架：

注：<nav>标签定义导航链接的部分。<ul> 标签定义无序列表，<li>标签定义列表项目。

<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。


2. 写完运行（运行：右下角点击f12运行）看到效果，如下图所示：


3. 加入css样式表（这里采用内部样式表）。

3.1 CSS样式表有两种加入的方式 如图：

3.2 去除li带来的小黑点:

li{
   list-style: none;
   }


4. 基于上述步骤，运行一下 如下图所示：


5. 设置一下导航栏的样式。

1) 设置一下列表ul 的宽度 ，高度，背景颜色,文字位置居中（margin：0 auto）。

Li 同样的设置高度 。

2) 去掉小黑点 ，再设置文字的颜色 ，高度 ，内边距 ，（个人喜好 看着舒服就行）

3) 设置文字的大小，去掉下划线（text-decoration:none;）。

下面是详细备注

ul li{float: left; # 把内容左浮动，这样可以横向排列
  width: 100px;  # 设置每个li的宽
  height: 30px;  # 设置每个li的高
  background-color:pink  # 设置li的背景颜色为粉色
  border: 1px solid 6495ED; # 设置li的边框颜色以及边框大小
  text-align: center;  # 设置li中的文字样式为居中
  line-height: 30px;  # 设置li中文字举例上边框的高度
  }
ulli:hover{background-color: aqua;}  # 设置将鼠标放到li时的背景颜色
ul li:hover a{color: black;}  # 设置将鼠标放到li中的a标签的内容时的文字颜色


6. 完整代码，如下图所示。


7. 运行之后，效果图如下图所示。


【四、总结】

1. Html能做的效果非常多，希望你耐心的去学习，同时希望碰到问题主动搜索，尝试一下总会有解决方法。

2. 如果需要本文源码，请在公众号后台回复“导航栏”三个字获取。


看完本文有收获？请转发分享给更多的人

IT共享之家

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

相关推荐

平和!晨间攻克 HTML 表格属性题，面试难题轻松化解

当清晨的阳光轻轻洒在窗台，泡上一杯淡雅的茉莉茶，翻开这篇文章，就像开启一场宁静的知识对话。前端面试中那些让人有些头疼的HTML表格属性问题，今天咱们不慌不忙，慢慢梳理，把它们变成面试时的底气，让焦...

高效设计表格 - 用我们的HTML表格生成器轻松搞定

在图形开发领域，效率和质量是我们所追求的。HTML表格生成器（HTML表格生成器-在线工具|图形开发学院），以其简洁的界面、高效的性能和人性化的设计，降低了图形开发的门槛，让每一位用户都能...

一看就懂的Excel表格的基本操作的十大技巧

Excel表格已经成为Office人员最常用的数据处理软件，Excel表格的基本操作视频教程也成为Excel表格初学者急着寻找的资料之一。其实，普通人需要用到的Excel的功能不到其全部功能的10%。...

干货满满!Python Flask 中级应用，构建任务管理系统全流程揭秘

PythonFlask开发Web服务：中级实战教程Flask是一个轻量级的PythonWeb框架，以其灵活性和扩展性而受到开发者的喜爱。本教程将带你从基础到实战，通过一个完整的案例来深入学习Fla...

php手把手教你做网站(二十)vue+tp6简单案例(demo)

很多时候搭建好了环境，但是不知道怎么入手去开发。下面我们通过简单案例说明如何快速入门开发模块：例1：开发helloworld模块搭建好环境，新建项目以后，进入项目所在文件夹，依次进入src/compo...

前端经验-如何在p元素中展示固定行数的文字，超出部分显示省略号

1说明最近项目上有个需求，就是有一个网站列表，每个网站下面要加上一段简介，简介文字有行数限制，超出行数以后后面的文字用省略号显示。2CSS代码.websiteulp{margin:...

jQuery 动画制作与特效

使用show()和hide()方法在普通的javascript编程中,要实现元素的显示、隐藏通常是利用其CSS的display属性或者visibility属性。在jQuery中提供了show()和hi...

抓狂!代码混乱漏洞百出?7 个技巧助你逆袭成大神

写JavaScript代码时，是不是经常遇到这种崩溃瞬间：数组越界报错、异步请求乱成麻、页面交互卡到怀疑人生？别让这些“老大难”问题拖慢你的开发进度！今天手把手教你7个超实用的JavaS...

玩转Markdown(2)——抽象语法树的提取与操纵

上一篇玩转Markdown——数据的分离存储与组件的原生渲染发布，转眼已经鸽了大半年了。最近在操纵mdast生成md文件的时候，心血来潮，把玩转Markdown(2)给补上了。这一...

关于ul里边的li浮动后边的p不独占一行问题

为什么ul里面的li元素浮动起来以后本应该独占一行的P标签会跟着上去贴着li元素的内容呢？引入的一个CSS里面把除非设置Ul的行高，这样P标签才会下拉，这是为什么？下图是出来的没加css效果刚开始我...

用css设计电子相册 下

本篇学习资料讲解：延续上一篇的学习资料，仍然介绍使用css对电子相册进行排版和侧面强调“盒子模型、标准流、浮动和定位”的重要性。上篇学习资料介绍的“阵列模式电子相册”，如果也能够看到详细信息就更...

第六次记录，利用CSS调整样式位置

本小节基本要求：了解标签的父子关系要点：1、如何对父标签下的子标签进行样式修改2、display-inline-block;3、绝对定位absolute4、margin与padding5、以上是关键，...

在WordPress中如何按照类别显示最近的文章

最近许多用户在寻找一种在网站的侧边栏按照文章的类别来显示文章的方法。文章显示如下图:这里给大家介绍两种方法，通过这两种方法均可以实现在WordPress网站侧边栏按类别显示文章。第一种方法比较适合初学...

初识CSS——布局小技巧

#大有学问##头条创作挑战赛#垂直对齐作用用于设置图片或者表单等行内块元素和文字的垂直对齐。垂直对齐只针对行内元素或者行内块元素有效。语法vertical-align：baseline|top...

一篇文章教会你如何制做精美导航条

【一、项目背景】让更多的人去学习html，以广东科技学院的导航栏为例，教大家怎么去做一个横向的导航栏。【二、项目准备】准备一个编程的软件Dreamweaver，打开软件点击文件新建一个叫导航栏的...

一周热门
最近发表
标签列表