左中右結構的標題欄通用樣式寫法

2021-09-05 20:34:20 字數 711 閱讀 5465

左中右結構的標題欄通用樣式寫法

我們先了解左中右結構標題欄特點:

1.標題欄具有一定的高度,寬度一般自適應。

2.標題欄左邊、右邊不具有延伸不變的特性,如略成弧形。

解決方案總體思路設:

最外層定高度,且設背景為水平方向平鋪,這樣可呈現垂直方向的漸變效果。

內層套浮左浮右兩塊用以實現標題欄的左右不同。

繼續在內層新增浮左或浮右塊,可放標題文字或者「更多」等內容。注意浮左塊和浮右塊的順序是顛倒的。

以下用[作為全域性樣式實現以上標題樣式

title words

如果要更換另一套標題樣式,如上**可見我們需要設定新的 classname 例如 tt_2 然後對 height width background 等關鍵樣式重寫,這裡幾乎重寫了原來的所有樣式,似乎 global 裡是多餘的,其實不然,至少我們不用再敲一遍**,不用再考慮一遍**的完備性,複製重寫其實是我們工作中常用的加快效率的手段,這裡我只是把它更規範化了,把要複製的內容放入了乙個global檔案,以正其名。

更重要的一點是:html **部分即內容部分結構統一,不需要有太大變化。

當然,global 檔案裡所定義的樣式不會都象 .tt 一樣在使用時都需要重寫一遍,否則,global 檔案存在的意義會大打折扣,我有意把最不具可重複性的樣式拿來先講,其實是為了後文作鋪墊,以求讓大家深刻認識到global樣式對於縮減**起到的巨大作用。

Flex中Accordion圓角標題欄的實現

一些ui設計使用到了圓角並且accordion要求定義圓角以使得它與ui設計一致。這就需要為accordion header新增新的渲染 renderer 一種很簡單的方法是為accordion定義一些圓角和其他的一些東西。而不是定義新的渲染 renderer 其他支援圓角的flex 都可以使用。在...

CSS製作類似瀏覽器標題欄的圓角樣式

圓弧的樣式由元素本身 左右兩個小角組成 首先,將元素設定相對定位 圓角邊框,以及寬高設為 position relative 相對定位 width 120px height 40px line height 40px text align center background color fff bo...

Android中全屏或者去除標題欄的方法

requestwindowfeature window.feature no title 去掉標題欄 注意這句一定要寫在setcontentview 方法的前面,不然會報錯的 drawable icon android label android theme android style theme....