html表格中加⼊导航栏,⽤HTML中的列表标签做个导航栏吧我们在⽹上浏览的好多⽹页都有导航栏，它提供信息导航的功能，想知道它是怎么做出来的吗?
⾸先要知道的:HTML中的列表标签都有那些呢?
ul-li⽆序列表 ( ⽹页中显⽰的默认样式⼀般为：每项 li 前都⾃带⼀个圆点 )
语法:
⽂本
⽂本
2.ol-li有序列表(在⽹页中显⽰的默认样式⼀般为：每项 li 前都⾃带⼀个序号，序号默认从1开始)
1. ⽂本1
2. ⽂本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属性怎么用
留个分界线导航栏不会连成⼀⽚了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; }
不同的属性会呈现不同的效果哦, 赶快试试吧 !

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。