导航链接添加背景图片替换样式

时间:2014-04-30 02:11:17   收藏:0   阅读:430

 

HTMl代码:

<div class="welcome_button">
  <ul>
	<li><a href="#">signup</a></li>
	<li><a href="#">login</a></li>								
  </ul>
</div>

 

CSS样式:

<style type="text/css">
.welcome_button { text-align: center; } .welcome_button ul { list-style:none; padding-top: 12px; padding-left: 130px; } .welcome_button ul li { background:url(../img/welcome_button.jpg) no-repeat top center; width:190px; height:56px; text-align: center; line-height: 50px; margin-top:30px; } .welcome_button ul li a { color: #ffffff; display:block; text-decoration: none; } .welcome_button ul li a:hover { background:url(../img/welcome_button_hover.jpg) no-repeat; width:190px; height:56px; text-align: center; line-height: 50px; color: #fff; }
</style>

  

导航链接添加背景图片替换样式,码迷,mamicode.com

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!