分分鐘學會網頁樣式

2021-09-18 04:13:15 字數 1722 閱讀 7127

比方說,你想要在自己**上分享乙個產品,或者是乙個作品集,又或者僅僅只是乙個靈感。在你發布到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那麼回事。

設計的目的是為了增強它所應用到的內容的表現形式。這看上去是顯而易見的事,但內容是乙個**的主要元素,它不應該在發布後才想到要調整。 編寫的內容,就像你目前正在閱讀的文章,組成了超過90%的網頁。為這個文字內容新增樣式將有乙個很長的路要走。 讓我們假設你已經完成了你想發布的內容,同時已經建立了乙個空的style.css檔案,什麼是你可以寫的第一條規則?

長文字很難解析,也因此不易閱讀。每行設定字元限制,可以大大提高大量文字的可讀性和吸引力。

body
瀏覽器的預設字型為times,可看起來缺乏吸引力(主要是因為它是「無樣式」字型)。切換到乙個無襯線字型,如helvetica或arial可以大大提高你網頁的可讀性。

body
當使用者覺得乙個頁面崩壞的時候,通常來說都是間距問題。通過在文字周圍和文字內設定適當的間距就可以增加頁面的吸引力。

body 

h2

白色背景上的黑色文字看起來會比較扎眼。為文字選擇一款較軟一點的黑色,讓頁面閱讀起來更舒服。

body
為了保持乙個良好的對比度,讓我們為重要文字選擇乙個更黑暗的陰影。

h1,

h2,strong

只需要一些額外的調整就可以平衡頁面:

code,

pre

code

pre

大多數品牌都有乙個主色調,作為視覺基調。在乙個網頁上,這個主色調可以用來強調互動元素,如鏈結。

a
主色調可以用更微妙的色調來補充,用於邊框,背景,甚至正文中。

body 

code,

pre

pre

@import '';

body

和圖示既可用來作為支援你的內容的裝飾品,還可以在你想要傳達的資訊中擔當積極部分。

讓我們從unsplash挑選一張漂亮的背景來美化header。

header
新增logo

header img
header h1 

header a

header a:hover

4分鐘學會網頁樣式

比方說,你想要在自己 上分享乙個產品,或者是乙個作品集,又或者僅僅只是乙個靈感。在你發布到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那麼回事。那麼你接下來該做什麼呢?文字 設計的目的是為了增強它所應用到的內容的表現形式。這看上去是顯而易見的事,但內容是乙個 的主要元素,它不應該在發布...

分分鐘兒 學會Git

1.linux系統 2.windows 系統 選單找到git bash 表示安裝成功 指定一下是誰在使用當前的git git config global user.name your name git config global user.email email example.com 1.首先建立...

分分鐘學會vue中vuex的應用

在vue中當我們管理資料的時候比較亂,我們要用到下面的這個庫,vuex.js vuex介紹 每乙個vuex應用的核心就是store 倉庫 他是用來儲存資料的 store 基本上就是乙個容器,它包含著你的應用中大部分的狀態 state vuex 和單純的全域性物件有以下兩點不同 1.vuex 的狀態儲...