左中右结构的标题栏通用样式写法

左中右结构的标题栏通用样式写法

---

作者:feiwen8772

---

我们先了解左中右结构标题栏特点：

1.标题栏具有一定的高度，宽度一般自适应。

2.标题栏左边、右边不具有延伸不变的特性，如略成弧形。

解决方案总体思路设：

最外层定高度，且设背景为水平方向平铺，这样可呈现垂直方向的渐变效果。

内层套浮左浮右两块用以实现标题栏的左右不同。

继续在内层添加浮左或浮右块，可放标题文字或者“更多”等内容。注意浮左块和浮右块的顺序是颠倒的。

以下用[http://style.china.alibaba.com/css/blog/alicn_bb.css]作为全局样式实现以上标题样式

 

<style type=”text/css”>
/*————–   以下样式包含于 globle 样式中 ——————–*/
 /*相关样式*/
 .l{float:left !important;display:inline}
 .ft14{font-size:14px;}
 .b{font-weight:bold}
 /**********/

 /* TiTle 样式 */
 .tt{position:relative;height:37px;overflow:hidden;background:url(http://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_tt_01.gif) repeat-x}
 .ttl{float:left;width:2px;height:100%;background:url(http://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_lt_01.gif) no-repeat}
 .ttr{float:right;width:2px;height:100%;background:url(http://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_rt_01.gif) no-repeat}
 /**********/
/*——————————————————————*/
div.tt_2{height:30px;background:url(http://img.china.alibaba.com/images/cn/chat/rc_tt_tt_02.gif) repeat-x}
.tt_2 .ttl{width:6px;background:url(http://img.china.alibaba.com/images/cn/chat/rc_tt_tl_02.gif) no-repeat}
.tt_2 .ttr{width:6px;background:url(http://img.china.alibaba.com/images/cn/chat/rc_tt_tr_02.gif) no-repeat}

div.tt_3{height:36px;background:url(http://img.china.alibaba.com/images/cn/chat/rc_tt_tt_03.gif) repeat-x}
div.tt_3 .ttl{width:5px;background:url(http://img.china.alibaba.com/images/cn/chat/rc_tt_tl_03.gif) no-repeat}
div.tt_3 .ttr{width:5px;background:url(http://img.china.alibaba.com/images/cn/chat/rc_tt_tr_03.gif) no-repeat}

</style>
<div class=”tt tt_3″>
 <div class=”ttl”></div>
 <div class=”l f14 b”>title words</div>
 <div class=”ttr”></div>
</div>

 

如果要更换另一套标题样式，如上代码可见我们需要设定新的 classname 例如 tt_2 然后对 height width background 等关键样式重写，这里几乎重写了原来的所有样式，似乎 global 里是多余的，其实不然，至少我们不用再敲一遍代码，不用再考虑一遍代码的完备性，复制重写其实是我们工作中常用的加快效率的手段，这里我只是把它更规范化了，把要复制的内容放入了一个global文件，以正其名。

更重要的一点是：html 代码部分即内容部分结构统一，不需要有太大变化。

当然，global 文件里所定义的样式不会都象 .tt 一样在使用时都需要重写一遍，否则，global 文件存在的意义会大打折扣，我有意把最不具可重复性的样式拿来先讲，其实是为了后文作铺垫，以求让大家深刻认识到global样式对于缩减代码起到的巨大作用。