HTML+CSS制作导航条

html-css010

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

其实你说的不是很清楚,如果有什么不明白的再说:

首先是css:

 a{ color: #000000}

 a:hover {color: #fff background: #000 }

然后a标签

 <a href="@">点击按钮</a>

这些是a标签的一些样式

a  标签对是一个网站的一条信息链接定义的,a:link {}     /* 未访问的链接 */

a:visited {}  /* 已访问的链接 */

a:hover {}    /* 当有鼠标悬停在链接上 */

a:active {}   /* 被选择的链接 */

然后你下面的我大体的说一下

background:none没有背景;

border:none没有边框;

color:#000000font-size:15pxfont-weight:bold字体颜色是黑色的,大小15像素,加粗

background:transparent。意思就是背景透明。实际上background默认的颜色就是透明的属性。所以写和不写都是一样的