导航条是一个网站中必不可少的元素,那么如何用HTML和CSS制作一个导航条呢?下面我给大家分享一下。
工具/材料Sublime Text
首先打开SublimeText软件,新建一个html页面,并且在html页面中准备好html结构,如下图所示
接下来我们在html的body结构里添加导航条的内容,如下图所示
然后就需要在style标签中用CSS对导航条的样式进行定义了,如下图所示,书写样式的时候一定要注意写在style标签里面
最后运行html页面,你就会看到如下图所示的导航条,当鼠标放在某个导航上时,背景色会变成红色
首先要建立一个DIV,为其命名为“nav”,在DIV中建立一个<ul>无序列表,导航共有几个栏目,就为列表添加几个<li>的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面。
然后设置CSS样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:
ul {width:宽度值;height:高度值; list-style:none;}
如果是横向导航,还需为里面的列表项<li>标签设置左浮动的样式,代码为:li {float:left}
每个栏目之间分隔的距离可通过margin(外边距)属性来设置。
2.ol-li有序列表(在网页中显示的默认样式一般为:每项 li 前都自带一个序号,序号默认从1开始)
其实导航栏就是给列表标签设置CSS样式
第一步:
在HTML上的文件里加上ul-li 标签,在对应的CSS文件中使用下边语句去掉 li 标签前面默认的小圆点
第二步:
让 li 标签 浮动 起来,一般设置为左浮动,看看它是不是变成了一横排
第三步:
美化一下你的导航栏,给它加个背景色吧 background-color: red
每个导航单元的字数不同,大小不同给它设置宽高看起来更美观 height: 30pxwidth: 100px
字体颜色也可以设置哦 color: #000f
留个分界线导航栏不会连成一片了 margin-left: 1px
第四步:
加上一个鼠标事件,鼠标移动到导航单元改变背景色和文本颜色
第五步:
使用a标签给你的导航加上链接
一般加上链接后文本会默认加一个下划线,使用语句 text-decoration: none 去除下划线
未被访问的链接
鼠标指针移动到链接上
正在被点击的链接
已被访问的链接
不同的属性会呈现不同的效果哦, 赶快试试吧 !