css中menu是什么

html-css08

css中menu是什么,第1张

把这个导航栏单独做一个html文件;如:menu.html

然后用iframe加载这个文件;

方法为:

<iframe src="menu.html">

</iframe>

一、定义一个盒子(“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>

一种超级简单的二级下拉菜单制作方法,代码如下:

<!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=gb2312" />

<title>简单的二级下拉菜单</title>

<style type="text/css">

#FM >li >ul.fm{ display:none}

#FM >li:hover >ul.fm{ display:block}

</style>

</head>

<body>

</body>

</html>

<body>

<ul id="FM">

<li><a href="#">首页</a>

<ul class="fm">

<li><a href="#">这是二级菜单</a></li>

<li><a href="#">这是二级菜单</a></li>

</ul>

</li>

<li><a href="#">关于我们</a>

<ul class="fm">

<li><a href="#">这是二级菜单</a></li>

<li><a href="#">这是二级菜单</a></li>

</ul>

</li>

</li>

</ul>

</body>

</html>

所作出来的效果为:

这样子就很快的用css实现简单的二级下拉菜单啦!