您的位置:首页> 日志> 前端技术 正文
DTOP

自适应背景

anby | 2011年07月30日 |

>>收藏本文 已有 0条评论

在学习静态输出的过程中遇到一些问题,自适应标题背景,如图: 栏目标题有长有短,所以要通过一些技巧的设置,让它自动适配。在输出的过程中学到两种方法:
第一种:把背景图切为三块,分为左、中、右,左边为左弧,右边为右弧,中间让它X方向循环。代码为:
<div class="hd">
<div class="title"></div><div class="titce"><h3>草庙乡领导班子</h3></div><div class="titri">&nbsp</div><span><a href="#">更多&gt;&gt;</a></span>
</div>

.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; }

第二种:制作两张长背景图,一张左开口,一张右开口,把两上背景叠层,代码为:

<div class="hd">
<div class="bgjili"><div class="bgl"><div class="bgr"><h3>领导班子领导班子</h3></div></div></div>
<span><a href="#">更多&gt;&gt;</a></span>

.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; }