大家好，又见面了，我是你们的朋友全栈君。
一、垂直导航菜单的制作
1、基本的样式清除： *{margin:0;padding:0}
2、无序列表圆点去除： ul{list-style:none}
3、下划线去除： a{text-decoration:none}
4、文本缩进标签 text-indent 不会影响总体宽度（padding会）
5、使用行高line-height可以实现文字默认居中，前提是行高和width相等。
6、需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block}hover格式 a:hover{}//通过a：hover，可以为菜单增加交互效果。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>垂直导航菜单</title>
<style type="text/css"> *{
margin:0; padding:0; font-size:14px;} a{
color:#333;text-decoration:none} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:120px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style>
</head>
<body>
<ul class="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>二、水平导航菜单的制作
垂直菜单改为水平菜单：ul的width去掉,li进行float:left；a标签的文本缩进改为文本居中： text-align:center;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单</title>
<style type="text/css"> *{
margin:0; padding:0; font-size:14px;} a{
color:#333;text-decoration:none} .nav{
list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} .nav li{
float:left} .nav li a{
display:block; height:30px;text-align:center; line-height:30px; width:80px; background:#efefef; margin-left:1px;} .nav li a.on, .nav li a:hover{
background:#F60;color:#fff; } </style>
</head>
<body>
<ul class="nav">
<li><a class="on" href="#">首 页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>三、其他
导航条菜单制作总结
1、用无序列表构建菜单；ul/li
2、垂直菜单转变为水平菜单：float:left；
3、在制作圆角菜单时，背景图片贴在<a>标签上； -------> 雪碧图的应用--- background-position
4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧： ----> margin-top用负值；margin-top:-10px；可以使高度变大的块上移，与其他块处于一个平面
5、用JS制作水平伸缩菜单时，“this”代表当前的<a>标签。
6、line-height:40px；改变文字高度来满足其垂直居中
7、背景图片的偏移：background-position:0 -30px;
对于Y来说：-是向上移，+是向下移，
对于X来说：-是向左移，+是向右移版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/163165.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...