html表格中加入导航栏,用HTML中的列表标签做个导航栏吧
我们在网上浏览的好多网页都有导航栏,它提供信息导航的功能,想知道它是怎么做出来的吗?
首先要知道的:HTML中的列表标签都有那些呢?
ul-li无序列表 ( 网页中显示的默认样式一般为:每项 li 前都自带一个圆点 )
语法:
- 文本
- 文本
2.ol-li有序列表(在网页中显示的默认样式一般为:每项 li 前都自带一个序号,序号默认从1开始)
- 文本1
- 文本2
其实导航栏就是给列表标签设置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标签给你的导航加上链接
首 页 //#表示空链接网址,你可以加上想要的链接
一般加上链接后文本会默认加一个下划线,使用语句 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的默认样式 因为看起来不是很好看,菜单通常都不需要 ...
- Vue 实现导航栏滑到顶部固定,滑动到相应位置导航栏有相应选中效果,点击导航跳转到对应位置
主要思路 导航栏固定 判断页面卷曲是否大于导航栏的offsetTop的值,超过了就证明导航栏到达了顶部,给导航栏添加固定样式的类名,注意:需要拿到导航栏固定前的offsetTop值,固定后的offse ...
- css订单导航栏横线动画,小程序 纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
- 固定导航在网页设计中应用的22个优秀案例
导航是网站最重要的组成部分之一,有吸引力的导航能够吸引用户浏览网站中的更多内容.今天这篇文章收集了25个固定导航在网页设计中的应用案例,有的导航固定在网页头部,有的则固定在网页侧栏,都设计得非常好,希 ...
- xshell6左侧导航显示_【iOS12人机交互指南】7.1-导航栏
该系列是iOS12人机交互指南的翻译,翻译的过程中加深自己的理解. 导航栏出现在应用屏幕的顶部,在状态栏下方,并允许在多个层级的界面中导航.当显示新屏幕时,会在导航栏的左侧出现一个返回按钮,该按钮通常 ...
- word中套用表格样式在哪里_在Word中,关于“套用表格样式”的用法,下列说法正确的是()...
[单选题]茄子的分枝习性属于 [判断题]在Word编辑状态下,当选定若干文字后,用鼠标左键单击"常用"工具栏"显示比例"列表框中的下拉按钮并选定"75 ...
- vs用html制作表格,演练:在 Visual Web Developer 中编辑 HTML 表格
演练:在 Visual Web Developer 中编辑 HTML 表格 10/22/2014 本文内容 更新:2007 年 11 月 表格编辑是许多网页的重要组成部分,因为表格可用于创建页布局.本 ...
最新文章
- 应用session对象实现用户登录
- System.InvalidOperationException:“线程间操作无效: 从不是创建控件“txtPortName02”的线程访问它。”...
- linux作业(第四章练习题)
- Synchronization 进程锁
- 外星人bios按f2调风扇_刷完BIOS出现Reboot and select proper boot device的解决方法
- 常州工学院计算机毕业论文多少字,研究常州工学院毕业论文(设计)系统快速使用指南.doc...
- hp虚拟服务器,源自基础设施灵活多变的终极自由 惠普(HP)虚拟连接技术(Virtual Connect)...
- Java基础——学生管理系统
- 电脑长截图的操作方法
- 新一代口腔清洁神器 素诺智能可视超声波洁牙仪T11Pro评测
- GD32实战14__RTC
- Vim实用技巧_7.模式匹配和查找
- FlashFXP 便携版,U盘版,真正绿色
- L​I​N​U​X​环​境​中​部​署​J​A​V​A​项​目​步​骤
- 财经365零基础学投资:用江恩展望下半年股市
- SMTP-POP3协议简介以及使用Telnet客户端收/发邮件(163邮箱)
- Archery Tournament
- 学习Masonry框架 - iOS
- 贾扬清开源 AI 框架 Caffe | 开源英雄
- 简述TCP 三次握手
热门文章
- photoshop ps 美白 去污 磨皮 方法
- 概要设计说明书应包括的内容
- 如何将会议录音转文字?你知道如何将会议录音转文字吗?
- (一)xxx项目需求分析与功能设计概要
- 博士研究(二)--搜索新闻和案例的网址链接
- c语言程序设计教程 许勇,C语言程序设计应用教程 教学课件 许勇 第3章 程序流程控制.pdf...
- 魅族 魅蓝note2 PRO5 华为荣耀6 6P 部分log不显示,不打印,不输出
- 胜为蓝牙适配器驱动_胜为蓝牙适配器驱动
- 冈萨雷斯matlab工具箱,MATLAB版冈萨雷斯+中文高清版.pdf
- dblclick()在jquery中有什么作用??