HTML+CSS制作导航条

html-css019

HTML+CSS制作导航条,第1张

导航条是一个网站中必不可少的元素，那么如何用HTML和CSS制作一个导航条呢？下面我给大家分享一下。

工具/材料

Sublime Text

首先打开SublimeText软件，新建一个html页面，并且在html页面中准备好html结构，如下图所示

接下来我们在html的body结构里添加导航条的内容，如下图所示

然后就需要在style标签中用CSS对导航条的样式进行定义了，如下图所示，书写样式的时候一定要注意写在style标签里面

最后运行html页面，你就会看到如下图所示的导航条，当鼠标放在某个导航上时，背景色会变成红色

网站上一般都是利用css来做的。具体的做法：

1、将导航栏里面的几个条目都做成无序列表里面的项

2、利用css将列表项的list-style,float等等属性设置，使列表项横排排列。

3、设置链接的属性就可以了。

一般都是这样做的，利用图片或者flash的话，网页会变大一点，对于网速慢的人来说，不方便访问。所以在能利用css的地方就尽量避免用图片或者falsh

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul>和 <li>元素非常有意义：

<ul>

<li><a href="#home">主页</a></li>

<li><a href="#news">新闻</a></li>

<li><a href="#contact">联系</a></li>

<li><a href="#about">关于</a></li></ul>

从列表中删除边距和填充：

ul {

list-style-type: none margin: 0 padding: 0}