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

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

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样式对于缩减代码起到的巨大作用。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 左中右结构的标题栏通用样式写法

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏