网站用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},这样就加上了字符下沉的效果。背景再设置好,整个按钮都会有下滑感。