比方說，你想要在自己**上分享乙個產品，或者是乙個作品集，又或者僅僅只是乙個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那麼回事。那麼你接下來該做什麼呢?
文字
設計的目的是為了增強它所應用到的內容的表現形式。這看上去是顯而易見的事，但內容是乙個**的主要元素，它不應該在發布後才想到要調整。
讓我們假設你已經完成了你想發布的內容，同時已經建立了乙個空的style.css檔案，什麼是你可以寫的第一條規則?
居中
長文字很難解析，也因此不易閱讀。每行設定字元限制，可以大大提高大量文字的可讀性和吸引力。
1body
在為文字容器新增了樣式後，為文字本身新增樣式可好?
字型
瀏覽器的預設字型為times，可看起來缺乏吸引力(主要是因為它是「無樣式」字型)。切換到乙個無襯線字型，如helvetica或arial可以大大提高你網頁的可讀性。
1body
如果你堅持要用襯線體，可以試試georgia。
當我們讓文字更具吸引力時，也需要讓它更具可讀性。
間隔
當使用者覺得乙個頁面崩壞的時候，通常來說都是間距問題。通過在文字周圍和文字內設定適當的間距就可以增加頁面的吸引力。
1body 56
h2 雖然到目前為止布局已經大大改善，但讓我們新增更多細節處理。
顏色和對比度
白色背景上的黑色文字看起來會比較扎眼。為文字選擇一款較軟一點的黑色，讓頁面閱讀起來更舒服。
1body
為了保持乙個良好的對比度，讓我們為重要文字選擇乙個更黑暗的陰影。
1h1,
2h2,
3strong
雖然大部分頁面在視覺上已經有所提公升，但是一些元素依然顯得格格不入，如**段。
平衡
只需要一些額外的調整就可以平衡頁面：
01code,
02pre
0506
code
1011
pre
在這一點上，你可能想讓你的頁面脫穎而出，讓它更有個性。
主色調
大多數品牌都有乙個主色調，作為視覺基調。在乙個網頁上，這個主色調可以用來強調互動元素，如鏈結。1a
但是為了保持平衡/協調，我們還需要一些額外的顏色。
輔助色
主色調可以用更微妙的色調來補充，用於邊框，背景，甚至正文中。
01body
0405
code,
06pre
1112
pre
已經改變了色調，為什麼不一併改變外形/字型...
自定義字型
由於文字是網頁的主要內容，使用自定義字型能使頁面更加引人注目。
@import '網頁鏈結
1@import '網頁鏈結;23
body
在通過自定義字型凸顯你的個性後，增加一千個單詞又怎麼辦呢?
圖形和圖示既可用來作為支援你的內容的裝飾品，還可以在你想要傳達的資訊中擔當積極部分。
讓我們從unsplash挑選一張漂亮的背景來美化header。
01header
新增logo
1header img
讓我們借這個機會，來提高文字風格。
01header h1
0607
header a
1920
header a:hover
按照網頁設計的基本原則，我們在短短幾分鐘內設計了乙個像樣的頁面。只剩下最後一件事啦... 老司機說一句話：html css 多花點時間去記，而js就是演算法及邏輯的學習方法，本酋長後面談談咯
--希望能分享給更多想學習的人學習
web前端學習***21 598399936
分分鐘學會網頁樣式
比方說，你想要在自己 上分享乙個產品，或者是乙個作品集，又或者僅僅只是乙個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那麼回事。設計的目的是為了增強它所應用到的內容的表現形式。這看上去是顯而易見的事，但內容是乙個 的主要元素，它不應該在發布後才想到要調整。編寫的內容，就...
10分鐘學會Google Map API
前幾天玩了玩google的map api，感覺還不錯，很簡單。但凡有過任何程式設計經驗的同學，看完以下的教程，都可以在10分鐘內掌握它的主要功能。另外我還做了個簡單的小例子，有興趣的話，請參見 第一步 去 申請乙個keyid 第二步 在html的之間加上對mapapi函式庫的引用，第三步 在html...
30分鐘學會使用
vi 是unix世界裡極為普遍的全螢幕文字 編輯器，vim是它的改進版本vi improved的簡稱。幾乎可以說任何一台 unix 機器都會提供這套軟體。linux當然也有，它的 vi 其實是 elvis 版權問題 不過它們都差不多。熟悉 dos 下的文書處理後，也許會感到 vi 並不好用 unix...