如何快速的用html和css寫靜態頁面

2021-09-13 10:23:47 字數 1449 閱讀 3466

這兩個星期,又寫了一些靜態頁面,感覺比之前要快多了,下面來總結總結寫靜態頁面的時候要注意的一些問題,以及如何更高效的搞定需求。

在團隊作戰中,規範尤其重要,乙個專案需求出來之後,經歷需求分析,產品出原型,ui出圖,前端寫頁面,後台處理介面資料庫等等。每乙個環節都至關重要,缺一不可。這裡我們討論的是將ui圖轉換為頁面的過程。

在出圖之前,我們應該跟ui有個溝通,溝通的細節有:

1、間距值盡量統一。舉個栗子: 8px, 16px, 32px, 40px 等等,不要出現一些亂七八糟的值

2、顏色統一。主題色, 對應的hover,active;背景色;邊框色;常用的透明度值

3、按鈕風格。分顏色,圓角,大小等等。不要高度大小不一

4、圖示。使用css spirits, 將圖示放一張圖裡面,雖然使用起來要用background-position處理,但是既省了空間,也提高的請求的效能。

待ui出完圖之後,先不要急著寫頁面,而是寫乙份不僅屬於自己也適用於團隊其他成員的css類公用檔案。

這份類檔案不要奢望適用於你所有的專案,能適用於你當下要做的專案就ok。能適用所有的也就那麼幾行。比如定義浮動,設定box-sizing等等

具體問題具體分析:

1、ui圖常用字型大小從12到40,不等,那就把這些常用的定義出來,如:.font-14

2、顏色值。包括背景色。這裡我沒有用變數處理主題色,感覺也夠用了

3、有些我的個人習慣, 比如浮動的fl,fr; 還有清楚浮動等等

有時候乙個專案三五個前端合作,勢必會出現溝通和使用方式的問題。所以這個類檔案也需要乙個前端leader去把握,能不能做到讓每個團隊成員都用的舒服就看水平了。當然,前期寫出來給團隊成員講解分享一波還是很有必要,畢竟溝通很重要!

下面貼乙份我的類檔案:

*

h1,h2,h3,h4,h5,h6

.fl.fr

.clear

.text-center

.text-right

.flex-center

.page-container

.font-12

.font-13

.font-14

.font-16

.font-18

.font-20

.font-24

.font-28

.font-32

.font-40

.bold

.normal

.color-white

.color-000

.color-111

.color-222

.color-666

.color-333

.color-555

.color-777

.color-999

.theme-color

.bg-fff

.touch

HTML 和 CSS 快速入門

hyper text markup language 超文字標記語言,是最基礎的網頁開發語言。網頁檔案字尾名以.html htm結束。html5 中定義該文件型別是html文件 html 文件的根標籤 頭標籤,用於指定 html 文件的一些屬性,引入外部的資源。標題標籤 體標籤 注釋 cascadi...

快速複習html和css

這裡我們給div設定display list item等屬性,使得其呈現為列表顯示,我們還可以給設定display inline table屬性,使其由塊級元素變為內聯元素,橫排顯示 overflow inherit visible hidden scroll auto visible 內容不會被修...

用css寫的那些特色邊框

本文參考 css揭秘 第二章。一 半透明邊框 說起透明,肯定第乙個想到的是css3的hsla,寫個demo 小tips hsl色彩模式是工業界的一種顏色標準,是通過對色調 h 飽和度 s 亮度 l 三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的,hsl即是代表色調,飽和度,亮度三個通...