CSS的滑动门技术

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

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

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注