关键词搜索

源码搜索 ×
×

网站div css按钮效果设计

发布2008-11-04浏览1228次

详情内容

  网站用div css重新设计好之后,速度和美观度都会有提高,但一定要做好兼容性测试
  用div设计按钮时,用于效果更漂亮,且简单。网站div css,即便你不在全站用,局部效果也不错。

  现在讲解按钮效果中的一种方法。如果灵活运用的话,div css网站设计的按钮,让你的站点增彩不少。

  先看从www.cunbuluo.com (村部落)里截取的一段样式表

  #prolist{ letter-spacing:2px; font-size:14px; font-weight:bold}
  #prolist ul{ margin:0px; padding:0px}
  #prolist li{ height:35px; line-height:35px; background:url(images/pro_bg.gif) center no-repeat; margin:4px 0px 4px 0px}
  #prolist li a{ display:block; width:165px}
  #prolist li a:link {color: #dd0000; text-decoration: none;}
  #prolist li a:visited { text-decoration: none;color: #dd0000;}
  #prolist li a:hover {text-decoration: underline;color: #ff0000; background:url(images/pro_bg2.gif) center no-repeat;}
  #prolist li a:active { text-decoration: none;color: #dd0000;}

  这里要注意的是div css元素的每一级的关系。再注意的就是红色部分,它是使实现按钮效果的的主要样式表。其中#prolist li a{ display:block; width:165px}中display:block一定要设置,不然话,切换背景的效果不回明显。这样,用div css设计按钮背景的切换效果。

  另外也可以改里边的hover样式为#prolist li a:hover {text-decoration: underline;color: #ff0000; background:url(images/pro_bg2.gif) center no-repeat; position:relative;left:1px;top:1px},这样就加上了字符下沉的效果。背景再设置好,整个按钮都会有下滑感。

 

相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载