自适应背景
在学习静态输出的过程中遇到一些问题,自适应标题背景,如图: 栏目标题有长有短,所以要通过一些技巧的设置,让它自动适配。在输出的过程中学到两种方法:
第一种:把背景图切为三块,分为左、中、右,左边为左弧,右边为右弧,中间让它X方向循环。代码为:
草庙乡领导班子
.hd{ width:740px; height:30px; background:url(images/tit004.png) no-repeat;overflow:hidden;}
.hd .title{ float:left; width:24px; height:30px; background:url(images/tab002_l.png) no-repeat;}
.hd .titce{ float:left; width:auto; height:30px;background:url(images/tab002_b.png) repeat-x;padding:0 12px; }
.hd .titri{ float:left; width:5px; height:30px; background:url(images/tab002_r2.png) no-repeat; padding:20px;}
.hd .titce h3{ float:left; color:#ffffff; font-size:12px;font-weight:700; height:25px; text-align:left;padding:5px 0 0 0;}
.hd span{ float:right; color:#333; width:55px;padding:5px 0 0 7px; font-size:12px;}
.hd span a:hover{ color:#ff660; }
第二种:制作两张长背景图,一张左开口,一张右开口,把两上背景叠层,代码为:
领导班子领导班子
更多>>
.hd{ width:740px; height:30px; background:url(images/tit004.png) no-repeat;overflow:hidden;}
.bgjili{ float:left; padding-left:19px; height:30px;}
.bgjili .bgl{float:left;padding-left:15px;background:url(images/tab003_l.png) left bottom;height:30px;}
.bgjili .bgr{float:left;padding-right:15px; background:url(images/tab003_r.png) right bottom;height:30px;}
.bgjili .bgr h3{ float:left; height:25px; font-size:14px; font-weight:700; color:#FFF;line-height:25px;padding:5px 0 0 0; overflow:hidden;}
.hd span{ float:right; color:#333; width:55px;padding:5px 0 0 7px; font-size:12px;}
.hd span a:hover{ color:#ff660; }
用户登录
还没有账号?
立即注册