码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-04-30 02:11:17      阅读:430      评论:0      收藏:0      [点我收藏+]

标签:com   blog   style   class   div   img   log   c   ext   width   t   

 

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

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

标签:com   blog   style   class   div   img   log   c   ext   width   t   

原文地址:http://www.cnblogs.com/emily1130/p/3695759.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!