四分鐘交互式地了解Web設計基本規范:從零開始設計得體的個人網站

內容

香港彩票透码 www.kptln.icu 別忘了, 設計 是為了更好地展示內容. 貌似這是一句廢話,不過還是要強調網站中 首要 的元素正是內容, 而不應該置若罔聞,放到最后.

我們正在編寫的內容,就好像你看到的這段話,占據了一個網站90%以上的部分,為文本內容添加合適的樣式任重而道遠.

假設你已經決定好了要展示的內容,然后創建了一個空白的 style.css 文件,那么 第一條自定義樣式規則 會是啥呢?

居中

在單行中放置過長的文本會難以解析,并且難以 閱讀. 為每行的單詞數目設置一個上限有助于提升整體的可讀性,讓讀者好像為文本建立了一個笆籬

    body {        margin: 0 auto;        max-width: 50em;    }

我們已經為 文本塊設置了樣式, 那么應該如何為 文本本身添加樣式呢?

Font family

瀏覽器默認的字體是 "Times", 有時候看上去是如此的枯燥無味. 嘗試使用 無襯線字體譬如 "Helvetica" 或者 "Arial" 能夠提升你整個界面的感官

    body {        font-family:
        "Helvetica",        "Arial", sans-serif;    }

如果你打算使用襯線字體,試試 "Georgia".

我們選擇一些有趣的字體,能夠讓網站更有 吸引力, 下一步,就讓我們再 提高可讀性.

王下邀月熊:這里原作者是為英文字體樣式做了說明,我沒有修改為中文樣式,大概是懶吧,不過因為中文字體往往都比較大,建議使用font-spider等類似工具來抽取你所需要的字體

間隔

有時候用戶會抱怨網站好像壞掉了,往往都是 間隔 的問題. 在你文檔的 四周 與 內部都添加些間隔也能夠美化你的網站.

body {  line-height: 1.5;  padding: 4em 1em;}

  h2 {  margin-top: 1em;  padding-top: 1em;}

現在網站看上去好了不少了,布局方面提升了很多,下一步我們進行些 細節的美化.

顏色 & 反差

白底黑字有時候會看起來很刺眼. 為body選擇一個陰影較淺的字體會帶來 舒適的 閱讀體驗.

body {  color: #555;}

同時為了保證較好地 反差, 我們會為 重要的 單詞選擇使用深色的字體顏色

h1,h2,strong {  color: #333;}

現在頁面可視化感受已經提升了不少, 而一些特殊的文本,譬如代碼的顯示 還是不太合適.

和諧

只需要一些小小的操作就能讓整個頁面更加地和諧:

code,pre {  background: #eee;}code {  padding: 2px 4px;  vertical-align: text-bottom;}pre {  padding: 1em;}

到這里你的頁面已經達到了平均水平,我們下面希望給它一些獨特的 標志.

原色

很多的品牌都會選用某個 primary color 作為其獨特的標志,而在網站中,我們往往在某些交互地元素,譬如鏈接上設置一些醒目的顏色.

a {  color: #e81c4f;}

同樣是為了和偕,我們需要添加 額外的色彩.

二次色

我們可以為邊、背景乃至于body字體顏色設置更多的個性化顯示.

body {  color: #566b78;}code,pre {  background: #f5f7f9;  border-bottom: 1px solid #d8dee9;  color: #a7adba;}pre {  border-left: 2px solid #69c;}

下面,我們考慮來改造下字體的 形狀...

自定義字體

上文中也提到過,文本是網站的主要內容,那么我們設置一個 自定義的字體 會為頁面添加更多明顯的標志.

你可以選擇使用類似于 Typekit這樣的在線服務或者自定義些webfont, 我們這里使用來自于 免費的 Google Fonts 服務的: "Roboto"

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';body {  font-family: "Roboto", "Helvetica", "Arial", sans-serif;}

我們已經為 文本做了很多改造, 那么應該如何添加 其他元素呢?...

Graphics 與 icons 也是不錯的網站裝飾物,能夠提升你文本的感染力,或者更積極地傳遞你在文本中包含的內容

我們首先為頁首設置 背景圖 ,這張圖片選自 Unsplash

header {  background-color: #263d36;  background-image: url("header.jpg");  background-position: center top;  background-repeat: no-repeat;  background-size: cover;  line-height: 1.2;  padding: 10vw 2em;  text-align: center;}

然后添加一個 logo

header img {  display: inline-block;  height: 120px;  vertical-align: top;  width: 120px;}

再改進下文本的樣式.

header h1 {  color: white;  font-size: 2.5em;  font-weight: 300;}header a {  border: 1px solid #e81c4f;  border-radius: 290486px;  color: white;  font-size: 0.6em;  letter-spacing: 0.2em;  padding: 1em 2em;  text-transform: uppercase;  text-decoration: none;  transition: none 200ms ease-out;  transition-property: color, background;}header a:hover {  background:  #e81c4f;  color: white;}


上一篇: 前端開發者進階之路

下一篇: 張小龍首次公開解讀小程序

分享到: 更多
北京pk赛全天人工计划 北京pk赛车技巧走势 百人牛牛压注技巧 凤凰彩票官方app 072一肖一码 免费高频彩计划 球深比分网即时比分007 靠谱的棋牌赢钱游戏 乐翻二人麻将怎么能赢钱 时时彩平台排名 广东时时计划 七乐彩基本走势图分析 广东11选5专家计划软件 大乐透篮球最大是16吗 足球财富 全盛棋牌6元app不洗牌