postion_relative_absolute

为标题栏增加边既美观又大方


实现方式
html结构： 

1 <div class="title">
2     <span>标题</span>
3     <a href="#" target="_blank">更多&gt;&gt;</a>
4     <div class="sidebar">
5     </div>
6 </div>

css样式：

1   *{margin:0px; padding:0px;}
2   .title{width:960px;height:35px;line-height:35px;position:relative;background:#10A6D7;margin:0 auto;margin-top:30px;}
3   .title span{padding-left:15px;}
4   .title a{float:right;padding-right:15px}
5   .title .sidebar{width:7px;height:35px;position:absolute;top:0px;left:-7px;background:url(./images/pic_left.jpg) no-repeat;}



posted @ 2012-03-05 21:49  前端咖  阅读(383)  评论(0)  编辑  收藏  举报