CSS样式网页导航条

来源：互联网发布：java 向邮箱发送邮件编辑：程序博客网时间：2024/06/04 18:01

1、图片素材：

2、实现代码：

</pre><p><pre name="code" class="html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航栏</title><style type="text/css">li {list-style: none;float: left;font-size: 14px;text-align: center;}a:link,a:visited {display: block;width: 84px;font-weight: bold;color: black;text-align: center;text-decoration: none;}a:hover,a:active{background:url(img/nav_bg.gif);width: 84px;height: 26px;position: relative;line-height: 28px;text-align: center;font-size: 14px;letter-spacing: 3px;/*字符间距*/margin-top: -7px;/*z-index: -1;*/}.bg {margin-left: 100px;color: #F8A046;font-size: 18px;font-weight: bold;background-image: url(img/h_bg.jpg);background-repeat: no-repeat;width: 1200px;height: 150px;white-space: nowrap;background-position: -20px 1px;}ul {padding-top: 104px;padding-left: 2px;}</style></head><body><div class="bg"><ul><li><a href="">首  页</a></li><li><a href="">家用电器</a></li><li><a href="">手机数码</a></li><li><a href="">日用百货</a></li><li><a href="">书  籍</li><li><a href="">帮助中心</li><li><a href="">免费开店</li><li><a href="">全球资讯</li></ul></div></body></html>

3、实现效果：

0 0