關於CSS的布局的一些想法與建議

來源:互聯網
上載者:User
前言

前段時間做了創匠科技官網的自適應網頁,在編寫過程中收益良多。之後又參與了公司的PC收銀台的開發,對其中CSS的修改痛苦不已。痛定思痛,參考了阮一峰老師的《深入理解bootstrap》一書,總結出一些關於CSS布局的想法與建議。 CSS架構的設計基本思想

CSS使用的基本理論就是一個A/O模式。
A即append,添加;
O即overwrite,覆寫;
通過添加來逐步增加樣式,通過覆寫來達到所需要的樣式變化。
根據這個原理,我們就可以將元素的樣式進行分解。

普通元素的樣式 基礎樣式

在基礎樣式中,我們一般用於定義統一的字型樣式(font-family)、背景色、外內邊距、顯示方式、邊框等等。 顏色樣式

針對不同情況下增加元素在不同情況下的顯示。這個情況包括提示、警告、正常、成功、錯誤設定你可以使用顏色進行命名。 特殊效果

增加友好的互動而設定的效果。包括hover,active,visited,focus等狀態下的問題。 尺寸樣式

針對不同的解析度或者特殊要求產生的尺寸要求。我們可以通過超小、小型、普通、大型、巨大等命名方式對元素進行元素的字型大小、行間距、高度、寬度、邊距等多個影響元素尺寸的屬性進行調整。 狀態樣式

根據其狀態來顯示其效果,可以根據其屬性element[atrribute]來設定效果,效果類型包括但不限於①元素的陰影②樣式的顏色③透明度④虛框⑤可能的動畫效果 指定樣式

上述的過程都是按部就班的過程,而這一步是針對特殊情況:
如果一個元素的樣式修改,超出了我們先前定義的統一風格,我們可以針對這個元素添加新的class。
所需要注意的是:
①這個class應該添加在class的最後以確保它可以覆蓋掉前面的樣式
②這個class應該歸在最近父類的id或者特殊(命名獨特的)父類class中,以防止該class不恰當的命名對其他樣式產生影響
③不推薦使用id添加為該元素添加指定的樣式。
④在樣式改動特別小,同時沒辦法繼續起一些特殊命名的類名時,可以直接在元素中使用內聯式的樣式。 特殊元素樣式

特定類型的組件,一般只針對一個或幾個固定元素
例如,導航元素na的中的li元素樣式
特殊元素使用的途徑相對比較固定,這就意味著
我們可以將上述幾種樣式整合在這一步:
設定字型、背景色、內外邊距,文本顏色,特殊效果
狀態樣式等等

圖片地址:
https://img-blog.csdn.net/20180105193810929?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFvbWFvbGFvc2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.