css导航栏之css导航栏菜单的制作笔记

原创 PHP笔记  2017-04-08 19:11  阅读 1,115 views 次

导航栏(菜单)是每个网站必不可少的一部分,下边记录了一些常用导航栏菜单的制作方法。

垂直导航栏

导航栏一般使用的是列表,但列表前默认都有列表标记。而导航栏并不需要列表标记,所以第一步是要用css属性(list-style-type:none;)来去除列表标记。

实例1:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css导航栏菜单的制作_PHP笔记</title>
</head>
<body>
<style type="text/css">
 *{
 margin:0; /*为了兼容,一般会把外边距和内边距(填充)初始化为0*/
 padding:0;
 }
 #menu{width:150px; height:500px; background:#CCCCCC; }
 ul{list-style-type:none;/*去除列表标记*/ }
 ul li{ font-size:25px; }
 a{ display:block; width:150px;} /*转换为块元素*/
 a:hover{background-color:#C1FFC1;/*鼠标放到链接上发生*/ }
 </style>
<div id='menu'>
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">php</a></li>
</ul>
</div>
</body>
</html>

运行结果:

水平导航栏

水平导航栏用的非常多,用户体验好。水平导航栏实现的方法有内联或浮动等,一般建议使用浮动。

1、内联(内嵌列表项)

使用内联的方法来实现水平导航栏,其实是将列表项转换为内联元素(display:inline;)。

实例2:

html代码和实例1的一样,在这就只提供css代码,测试请替换实例1的css代码即可。

<style type="text/css">
*{
margin:0; /*为了兼容,一般会把外边距和内边距(填充)初始化为0*/
padding:0;
}
#menu{width:500px; height:40px; background:#CCCCCC;}
ul{list-style-type:none;/*去除列表标记*/width:350px;margin:auto; }
ul li{ font-size:25px; display:inline;}
a{margin:5px;}
a:hover{background:#C1FFC1;}
</style>

运行结果:

 

2、浮动(浮动列表项)

实现浮动列表项其实很简单,只要将列表项设置浮动即可(float:left;)。

实例3:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css导航栏菜单的制作_PHP笔记</title>
</head>
<body >
<style type="text/css">
 *{
 margin:0; /*为了兼容,一般会把外边距和内边距(填充)初始化为0*/
 padding:0;
 }
 #menu{width:500px; height:40px; background:#CCCCCC;margin:auto;}
 ul{list-style-type:none;/*去除列表标记*/ }
 ul li{ font-size:22px; float:left;}
 a{ display:block;padding:7px 10px;} /*转换为块元素*/
 a:hover{background:#C1FFC1;}
 </style>
<div id='menu'>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">web前端</a></li>
<li><a href="#">php学习</a></li>
<li><a href="#">数据库</a></li>
<li><a href="#">服务器</a></li>
</ul>
</div>
</body>
</html>

运行结果:

本文地址:https://www.ggbiji.com/css-menu.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情