制作导航(使用背景图片制作)
核心：
1.使用背景图片。
2.导航的内容区域不能设置固定宽度，一定要使用内容将导航撑开。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}.nav {width: 608px;height: 35px;margin: 100px auto;}.nav li {float: left;}.nav a{height: 35px;display: block;text-decoration: none;background: url("images/blue_r1_c1.png") no-repeat;padding-left: 7px;}.nav span{height: 35px;line-height: 35px;background: url("images/blue_r1_c2.png") no-repeat right;padding-right: 25px;display: block;}.nav a:hover {background: url("images/bg_r1_c1.png") no-repeat;}.nav a:hover span {background: url("images/bg_r1_c2.png") no-repeat right;}</style>
</head>
<body>
<div class="nav"><ul><li><a href="#"><span>反正现在的感情都暧昧</span></a></li><li><a href="#"><span>我们之间留有太多空白格</span></a></li><li><a href="#"><span>其实很简单</span></a></li><li><a href="#"><span>恍惚之间</span></a></li></ul>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;list-style: none;}.box{height: 74px;width: 100%;background: url("weixin_bg1d20af.jpg");}.center{padding-top: 20px;;width: 500px;margin: 0 auto;}.box li{float: left;margin-left: 10px;}.box a{height: 33px;display: inline-block;line-height: 33px;background: url("bg.png") no-repeat 0px -192px;padding-left: 17px;color: white;text-decoration: none;}.box span{height: 33px;background: url("bg.png") no-repeat right -192px;display: block;padding-right: 17px;}.box a:hover{background: url("bg.png") no-repeat 0 -144px;}.box a:hover span{background: url("bg.png") no-repeat right -144px;}</style>
</head>
<body>
<div class="box"><div class="center"><ul><li><a href="#"><span>首页</span></a></li><li><a href="#"><span>联系我们</span></a></li><li><a href="#"><span>公司简介</span></a></li></ul></div>
</div>
</body>
</html>本文发布于:2024-01-28 11:47:08，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17064136347194.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
