HTML+CSS制作导航条

html-css014

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

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

工具/材料

Sublime Text

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

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

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

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

一、定义一个盒子（“menu”）,用来装这个导航的。

二、用无序列表（ul）中的列（li）放导航的内容。

三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。

四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#menu{

width:500px

margin:0 auto/*令盒子居中*/

font-size:20px /*定义字体的大小*/

}

ul{

margin:0padding:0/*把浏览器默认的间隔去掉*/

list-style:none /*把前面的序列号去掉*/

}

li{

float:left /*向左浮动，这个是实现水平的重要步骤！！*/

padding:0 15px /*li里面的字体和边框的距离*/

}

a{

text-decoration:none /*去掉超链接的下划线*/

color:#333 /*超链接的字体颜色*/

}

a:hover{

color:#696

}

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

</ul>

</div>

</body>

</html>

单独的css是无法完成导航条的，需要结合html，一般导航条的制作都是通过一个div包裹着ul，使用li来排列完成导航条的html部分，css中，我们需要给这个div宽高，还需要设置好li的宽，高，还有一个float属性，这样基本上导航条就制作完成，请看代码：

<html>

<head>

<style>

#div1{

width:600px

height:40px

font-size:13px

}

#div1 ul li{

list-style:none

width:50px //具体的高宽需要根据实际要求

height:30px

}

</head>

<body>

<div id='div1'>

<ul>

<li><a href=''>目录1</a></li>

<li><a href=''>目录2</a></li>

<li><a href=''>目录3</a></li>

<li><a href=''>目录4</a></li>

</ul>

</div>

</body>

</html>