用HTML中的列表标签做一个导航栏吧

2024-06-14 22:25:28

我们在网上浏览的好多网页都有导航栏,它提供信息导航的功能,想知道它是怎么做出来的吗?

首先要知道的:HTML中的列表标签都有那些呢?

ul-li无序列表 ( 网页中显示的默认样式一般为：每项 li 前都自带一个圆点 )
语法:

<ul><li>文本</li><li>文本</li>
</ul>

2.ol-li有序列表(在网页中显示的默认样式一般为：每项 li 前都自带一个序号，序号默认从1开始)

<ol><li>文本1</li><li>文本2</li>
</ol>

其实导航栏就是给列表标签设置CSS样式

制作导航栏开始啦:

第一步:
在HTML上的文件里加上ul-li 标签,在对应的CSS文件中使用下边语句去掉 li 标签前面默认的小圆点

ul{list-style: none;}

第二步:
让 li 标签浮动起来,一般设置为左浮动,看看它是不是变成了一横排

li {   float: left;}

第三步:
美化一下你的导航栏,给它加个背景色吧 background-color: red;
每个导航单元的字数不同,大小不同给它设置宽高看起来更美观 height: 30px; width: 100px;
字体颜色也可以设置哦 color: #000f;
留个分界线导航栏不会连成一片了margin-left: 1px;

加个圆弧会不会更好看呢? border-radius: 15px 15px 0 0;

第四步:
加上一个鼠标事件,鼠标移动到导航单元改变背景色和文本颜色

li a:hover {           //a标签是给li文本加了链接 下面介绍
background-color: #e151ff;  color: #efefef;
}

第五步:
使用a标签给你的导航加上链接

<li><a href="#">首　 页</a></li>    //#表示空链接网址,你可以加上想要的链接

一般加上链接后文本会默认加一个下划线,使用语句 text-decoration: none; 去除下划线

补充鼠标事件

未被访问的链接

a:link {    color: #000; }

鼠标指针移动到链接上

a:hover {        /* 鼠标指针移动到链接上 */color: white;  height: 30px;  background: #f00;
}

正在被点击的链接

a:active {    color: #000;  }

已被访问的链接

a:visited {    color: #a369af;  }

不同的属性会呈现不同的效果哦, 赶快试试吧 !

用HTML中的列表标签做一个导航栏吧相关推荐

html表格中加入导航栏,用HTML中的列表标签做个导航栏吧
我们在网上浏览的好多网页都有导航栏,它提供信息导航的功能,想知道它是怎么做出来的吗? 首先要知道的:HTML中的列表标签都有那些呢? ul-li无序列表 ( 网页中显示的默认样式一般为:每项 li 前 ...
html中使用什么标签做的导航栏_自媒体人如何自己建立一个手机网站，超简单，任何人都能做...
随着移动互联网的兴起,越来越多的公司.个人把展示的内容转到了手机网站上,学会制作手机网站就成了大家关注的热点.传统的网页制作工具制作电脑端的网站功能很强大,但手机网站由于手机屏幕大小和CPU处理能力较 ...
无序列表如何做一个导航条?html,如何使用无序列表制作导航菜单.docx
第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是: 首页产品介绍服务介绍技术支持立刻购买联系我们第二步:隐藏li的默认样式因为看起来不是很好看,菜单通常都不需要 ...
使用CSS设计了一个导航栏（仿康盛创想）
在学了亚当几个实例教程后,所以想做一个导航栏,无意间打开了康盛创想网站,觉得这个导航栏不错,决定就做这个了,我的做法又以下几点: 1.先是看了看他的导航栏: 2.我喜欢在Fireworks中设计图片, ...
学完css，做了一个csdn导航栏（一步一步做csdn导航栏，内容满满）
学完css,做了一个csdn导航栏,内容满满步骤 1.导航栏框架 2.导航栏左边部分 3.导航栏中间部分 4.导航栏右边部分 5.搜索框聚焦和用户头像简介信息展示知识点完整代码番外:本来打算做 ...
如何用最简洁的css代码写一个导航栏
如何用最简洁的css代码写一个导航栏首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容. 注:标签主要是用于设置超链接. <div><img src= ...
手把手教你用js封装一个导航栏组件
文章目录前言一.实现思路介绍二.代码 1.html代码 2.js代码 3.css代码总结前言本文介绍如何用js封装一个组件,这里以导航栏为例. 看这篇文章你需要有一定的js基础哦一.实现 ...
Vue使用插槽vm.$slots实现一个导航栏结构
<Vue.js前端开发实践> 黑马程序员第3章课后编程题答案: 请使用插槽vm.$slots实现一个导航栏结构不多说话,代码如下: <!DOCTYPE html> < ...
tkinter中text插入_tkinter做一个体重档案
很多健身软件都有体重档案的功能,用来记录自己过去的体重变化.今天我们也来做一个简单的小程序实现这个功能. 首先我上网找了一个tkinter做的万年历程序,然后在它的基础上,增加了绘制体重折线图.记录当 ...

最新文章

热门文章