让圆角更简单

在做网站的时候,圆角的边框可以让审美更加舒服,一般圆角的实现方式有这样三种:1、使用含有圆角的背景图片;2、用JS实现;3、利用CSS的radius属性实现,对于第三种实现方式只能在firefox和chrome浏览器下正常,对于基于IE内核却行不通。若使用背景图片又不免有些繁琐,要为每个圆角制作图片,后期的更改也不方便,这样一来第二种方式来的更加简易些,不过对于丝毫不懂JS的人来说,要实现圆角还是有些难度,幸好有现成的库让我们调用,我要推荐的就是http://css3pie.com/ 这个网站,利用他提供的JS库,一切变得如此简单,屌丝瞬间逆袭高富帅。

除了利用CSS3PIE这个库实现圆角外,还有更多的效果,例如阴影,还有渐变效果,一切如此的绚丽,且有简单,这正是我们追求的。我就用这个库,将课题组的网站美化了一下,这美化如同化妆,不在于浓妆,而是要体现出气质。

再次喷一下国内的垃圾浏览器,例如360浏览器,遨游浏览器,搜狗浏览器,要么你就好好基于IE内核好好做,现在搞得IE不像IE,自己又不能很好的兼容CSS规则,以前我一直使用firefox,不过貌似有内存泄露的BUG,且书签的同步还得依靠第三方插件来实现,所以现在都在使用chrome,一个google的账号便可以同步书签,真的很方便哦!

CSS的滑动门技术

本来想给课题组网页的导航栏做一个漂亮的按钮,因为导航上的标题的字数不一样,如果使用统一的背景,会感觉特别丑,但如果给每一个标题制作一个背景,又觉得繁琐,万一哪一天想突然增加个标题岂不是又要做一个背景呢。若是使用CSS的滑动门技术,上面的难题就迎刃而解。关于CSS的滑动门技术,简单的说就是背景可以随着上面的字数的多少而自由收缩。

于是在网上搜关于这个技术的教程,天煞的中国互联网,教程如出一辙,基本都是互相抄袭,一个模样,况且有些还没讲清楚。

所以,还得自己动脑,例如<a href=”#”><span>HOME</span></a>,对此的分析是,<span>的标签在<a>内,所以如果能让<a>右边的背景出来,需要调用padding-right参数,那对于<span>标签,如果要让其背景从左边出来,则需要调用margin-left参数,并且参数值为负。同时还要设定这两个标签的高度,并保持一致。

在修改导航栏的时候,发现WP真的好用,你能想到的,作者都帮你想好了,真赞!