4分鐘內完成網頁設計：簡單美觀通用的CSS - jgthms

banq發表於2020-09-04
網頁CSS

本文入選最受歡迎的駭客新聞文章。幾分鐘內讓你學會編寫一個簡單的HTML網頁：
假設您有一個產品，一個產品組合，或者只是一個想與自己網站上的所有人共享的想法。在將其釋出到Internet上之前，您希望使其看起來有吸引力，專業或至少看起來不錯。

內容
設計的目的是增強所應用內容的表示。聽起來似乎很明顯，但是內容是網站的主要元素，不應將其作為事後考慮。
書面內容（例如您當前正在閱讀的段落）佔Web的90％以上。樣式化此文字內容將有很長的路要走。
假設您已經完成了要釋出的內容並剛剛建立了一個空style.css檔案：

<!DOCTYPE html>
<html>
<head>
<style>

</style>
    </head>
<html>
<body>
    這裡是正文內容
</body> 
</html>

 
長行文字可能難以解析，因此很難閱讀。設定每行字元數限制可以大大提高文字牆的可讀性和吸引力：

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

將上面程式碼貼入第一份程式碼的style之間。
 
瀏覽器的字型預設為"Times"，看起來不那麼吸引人（主要是因為它是“未樣式化”的字型）。切換為Sans-Serif字型，例如"Helvetica"或"Arial"可以大大改善網頁的外觀。（中文字型切換為微軟雅黑）

body {
 font-family:'Segoe UI',SegoeUI,'Microsoft YaHei';
}

 
當頁面看起來“破碎”時，通常是間距問題。在內容的周圍和內部提供空間可以增加頁面的吸引力。

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

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

在白色背景上的黑色文字在眼睛上可能很刺眼。為正文選擇較柔和的黑色陰影會使頁面閱讀更舒適:

body {
  color: #555;
}

 
為了保持適當的對比度，讓我們為重要的單詞選擇較深的陰影

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

只需進行一些其他操作即可校正頁面的平衡：

code,
pre {
  background: eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}
 

大多數品牌的原色都具有視覺上的重心。在網站上，這裡強調諸如連結的互動元素。

a {
  color: e81c4f;
}


強調色可以用更微妙的陰影進行補充，以用於邊框，背景，甚至是正文。

body {
  color: #566b78;
}

code,
pre {
  background: f5f7f9;
  border-bottom: 1px solid d8dee9;
  color: a7adba;
}

pre {
  border-left: 2px solid #69c;
}


以上是原文簡單的CSS，可以通用美觀，總結如下：

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0 auto;
  max-width: 50em;
  font-family:'Segoe UI',SegoeUI,'Microsoft YaHei';
  line-height: 1.5;
  padding: 4em 1em;
  color: #555;
}
h2 {
  margin-top: 1em;
  padding-top: 1em;
}
h1,
h2,
strong {
  color: #333;
}
code,
pre {
  background: eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}
a {
  color: e81c4f;
}
body {
  color: #566b78;
}

code,
pre {
  background: f5f7f9;
  border-bottom: 1px solid d8dee9;
  color: a7adba;
}

pre {
  border-left: 2px solid #69c;
}

</style>
    </head>
<html>
<body>
    這是<a href="/">正文</a>
</body> 
</html>


 

相關文章