我注意到很多網頁開發人員都在費勁的進行設計，他們認為他們沒有天生的設計天賦和不知道什么看起來很好，他們從頭開始創作的一切都注定看起來很業余和不專業。
為了解決這個問題，開發人員經常使用像Bootstrap和Foundation這樣的CSS框架，它們帶有一組合理的默認值和主題，可以添加它們以獲得自定義外觀。轉向其中一種解決方案并不羞恥，當然，為了保持一致性，他們可能必須使用這些解決方案。如果您只是想學習如何開始使用Bootstrap，我建議視頻教程《bootstrap框架基礎課程》或者什么是Bootstrap以及如何使用它?這篇文章
但是，您可能是一個想要改進自己設計的開發人員，或者使用獨特的樣式或自定義CSS構建自己的自定義產品組合。在這種情況下，您可能會發現很難找到任何類型的資源，并提供明確，具體的技巧來改進您的設計。當然，你會發現在谷歌搜索結果，告訴你的上篇為“學習設計理論”或“學會識別好設計”，但這些提示是模糊的，不利于你的設計現在。
因此，我決定列出一些我一直關注的特定于網頁設計的內容，您可以使用它來對比您自己的網站并進行改進。
我們將從頭開始創建一個網站元素（卡片），使用我在此列出的設計原則，一步一步。
先決條件
HTML和CSS的基礎知識（前端基礎教程）
目標
使用我們在此學習的每個設計指南從頭開發卡片元素。
了解您可以采取的具體行動，以改善您的設計并使其看起來更專業。
將這些指南應用于我們的成品元素，以展示我們如何通過一些代碼更改來自定義和創建完全不同的創意設計。
完成的產品
這是我們將要開始的。
以下是我們最終的結果。您可以在此處查看其可用的響應式編碼版本演示。
為什么布拉格和芝加哥 因為我來自芝加哥，所以我開始在布拉格寫這篇文章。（現在在慕尼黑......當我完成時，我們會看到我的位置）。
請注意，開始實際上并不是糟糕的設計，而是沒有樣式。從無到有，做一個好的設計比改善一個好的設計更容易。但是，可以逐個使用所有這些指南來檢查設計中的問題。
設計指南
首先是結構布局
使用更多填充
在身體上使用比標題更多的線高
不要使用純黑色
使用較少的字體，或與字體一致
使用較少的顏色或補色
與邊界和角落保持一致
細節，過渡和動畫持久
不要過分使用陰影，漸變或動畫
那么，讓我們開始吧！
第0步：HTML
首先，我將在這里設置HTML，本文的其余部分將只關注CSS。這里有關于卡結構的基本概述。（我正在遺漏圖像，因為它不是焦點。我們最后會添加它。）
index.html
<div class="card">
? <div class="card-content">
? ? <!-- title and content will go here -->
? ? <div class="card-details">
? ? ? <!-- read article, comments, and likes will go here -->
? ? </div>
? </div></div>
這是一張卡的實際最終HTML。它位于容器內部以保持形狀，但是沒有其他樣式，規范化器，重置或應用的任何CSS。
index.html
<div class="card">
? <div class="card-content">
? ? <h1>The Second City</h1>
? ? <div class="subtitle">City of Big Shoulders</div>
? ? <p>
? ? ? Chicago is the home of the blues and the truth of jazz, the heart of comedy and the idea of
? ? ? the skyscraper. It's a city with a swagger, but without the surliness or even the fake smiles
? ? ? found in other cities of its size.
? ? </p>
? ? <div class="card-details">
? ? ? <div class="card-details-inner">
? ? ? ? <div class="read-more">
? ? ? ? ? <a class="button" >Read Article</a>
? ? ? ? </div>
? ? ? ? <div class="options">
? ? ? ? ? <div class="comments">
? ? ? ? ? ? <a href="#!">
? ? ? ? ? ? ? <i class="fa fa-comments-o"></i>
? ? ? ? ? ? ? 16 comments
? ? ? ? ? ? </a>
? ? ? ? ? </div>
? ? ? ? ? <div class="likes">
? ? ? ? ? ? <a href="#!">
? ? ? ? ? ? ? <i class="fa fa-heart-o"></i>
? ? ? ? ? ? ? 322 likes
? ? ? ? ? ? </a>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</div>
這是我們開始的地方。
在整個事情中都會有一個錯字，所以請忽略它。
首先是結構布局
在進行任何設計之前，您應首先確定布局的結構。這意味著任何使用flex，float，position等，而不讓風格和設計的方式獲得。由于本文側重于設計，我不會詳細介紹如何工作flex和absolute定位工作，但我會解釋發生了什么。這是我們的代碼，在scss中。
.card {
? flex: 1 1 50%;
? position: relative;
? border: 1px solid #efefef;
}
.card-content {
? padding: 0 0 30px;
}
.card-details {
? position: absolute;
? width: 100%;
? bottom: 0;
? left: 0;
}
.card-details-inner {
? display: flex;
? justify-content: space-between;
? align-items: center;
}
好吧，它看起來像很多代碼幾乎沒有任何變化。但這是發生了什么：
每張卡的尺寸相同，但不超過外部容器的50％寬度，這意味著只有兩張卡并排放置。
底部的詳細信息部分（閱讀更多，評論等）絕對位于底部。為什么？無論卡中有多少內容，它們都將始終放在底部。
細節部分的兩半將放置在左側和右側并垂直居中。左側的“閱讀更多”，右側的“評論”和“喜歡”。
我只包括邊框，所以我們可以看到現在所有與卡的布局有關的事情都得到了處理，我們可以開始設計它。
使用更多padding填充
這是我看到的第一個問題，它向我表明某人在設計上是業余愛好者：沒有足夠的填充，或填充和邊距不一致。
我們將在卡片的四邊添加相同數量的填充（30px），添加額外的底部以考慮absolute定位。
.card-content {
? padding: 30px 30px 110px;
}
.card-details-inner {
? border-top: 1px solid #efefef;
? margin: 0 30px;
? padding: 30px 0;
}
我也將刪除它的上邊距，<h1>因此它不會干擾元素的相等填充。我更喜歡刪除所有頂部邊距并僅使用底部邊距。這是個人偏好，但它最適合我。
.card h1 {
? margin: 0;
}
.card p {
? margin: 0 0 30px;
}
.subtitle {
? margin: 0 0 15px;
}
我認為它已經開始變得更好了。您可能會注意到底部細節區域周圍似乎有太多空間，但這只是因為“讀取文章”鏈接將成為一個按鈕 - 否則我們會少用。
在body上使用行高 line-height要大于標題
標題應該比正文更少行高。一個良好的數額是1.2為標題，并1.5以1.6正文文本。據說“黃金比例” 1.61803399，但沒有人有時間可以獲得這么多數字。這是我通常用作所有網站標準的代碼，只在必要時進行調整。
html {
? line-height: 1.6;
}
h1,h2,h3,h4,h5 {
? line-height: 1.2;
}
它現在變得更加分散和可讀。
不要使用純黑色
對于文字和背景，純黑色，如black或在#000000，特別嚴酷，應該避免。
#444444對于正文，我將使用堅固的漂亮灰色，對于#666666卡體字體，我將使用靜音。
眼睛不那么刺激，更舒適。
使用較少的字體，或與字體一致
如果你真的不知道你在使用字體做什么，這里有一些簡單的建議：只使用一個字體系列（字體）。字體是整個字體系列，包括所有粗體和斜體版本。我們只是將它們全部稱為字體，因為這比較熟悉。
Google字體當然是查找要在項目中使用的自定義字體的絕佳資源。按“流行”排序，其中任何前20種字體都應該完全可以使用。我將使用Nunito，一種很流行的字體，有一個常規寬度和一個粗體寬度。（400和700）。
加載它...
<link rel="stylesheet" />
html {
? font-family: 'Nunito', sans-serif;
}
在這里。
另一個提示：將此代碼添加到您的所有項目中，以使文本更清晰，更清晰并在所有瀏覽器上定義。
html {
? -webkit-font-smoothing: antialiased;
? -moz-osx-font-smoothing: grayscale;
}
標題默認設置為粗體，但我也希望我的副標題是粗體。
.subtitle {
? font-weight: 700;
}
好吧，也許你不喜歡只有一種字體，而且你想使用多種字體。這很有道理，但是在嘗試遵循這個規則時：**將所有標題設為一種字體，將所有標題設為另一種字體**。例如，您可以選擇將所有標題設置為serif字體（帶有尾部的字體，例如Times New Roman），并且所有正文文本都是sans-serif字體（沒有尾部的字體，例如Arial）。或者相反。
一致性是關鍵。當你不熟悉設計時，試圖成為超級創意和不同的是大多數糟糕設計的來源。保持簡單直到你了解更多。
使用較少的顏色或補色
當您剛開始設計時，相同的建議適用于字體顏色：如果您不知道自己在做什么，只需使用一種顏色即可。我們制作的例子只使用一種顏色。
想要使用多種顏色？這是有道理的，但至少使用補色輪。這是你要看的一個。
如果您對一年級的藝術課不熟悉，只需看看輪子的兩端并匹配它們。藍色和橙色。紫色和黃色。通常，更柔和的顏色在網絡上看起來更好。
我選擇了#E76C67一個平坦的紅橙色作為我們設計的顏色。我可以很容易地選擇藍色，紫色或綠色，因為所有這些都看起來很好用黑色和白色，但我選擇了這個。
a {
? color: #e76c67;
? text-decoration: none;
}
.subtitle {
? margin: 0 0 15px;
? font-weight: 700;
? font-size: 1.25rem;
? color: #e76c67;
}
現在我們對設計有一些顏色，因為它只有一個，它沒有什么可碰撞的。
與邊界和角落保持一致
如果你想要圓角，在你的所有元素中使用圓角：形狀，按鈕，卡片等。如果你要有方角，在你的所有元素中使用方角。保持邊框和邊框半徑一致。我確信你注意到一致性是本文的一個共同主題，這是有充分理由的。
在我們的示例中，我將使用尖角 - 我的任何元素都沒有邊界半徑。這意味著我的卡和按鈕（如果它是一個完整的網站，我的表格輸入）都將是矩形。如果我想使用圓角，我應該確保所有東西都有圓角。
如果您的按鈕有1px邊框，請確保您的表單也有1px邊框。確保懸停和活動狀態與常規元素的邊框大小匹配，因此懸停和選項卡上的形狀不會更改。
這是我們按鈕的CSS。
.button {
? display: block;
? font-size: 1rem;
? background: #e76c67;
? border: 1px solid #e76c67;
? padding: 0.75rem 1rem;
? color: white;
? text-decoration: none;
? font-weight: 700;
? text-align: center;
}
.button:hover,
.button:focus {
? background: darken(#e76c67, 10%);
? border: 1px solid darken(#e76c67, 10%);
}
細節，過渡和動畫持久
如果你要做的第一件事就是在你的空設計中加入漸變或盒子陰影，那就有問題了。在選擇了布局，字體和顏色后，應最后添加過渡，動畫，框陰影和其他小細節。
我要給卡元素添加一個微妙的盒子陰影。
.card {
? box-shadow: 2px 6px 25px rgba(0, 0, 0, 0.1);
? transition: all 0.3s ease;
? position: relative;
}
.card:hover {
? box-shadow: 2px 6px 30px rgba(0, 0, 0, 0.2);
}
我也更喜歡底卡的細節是灰色的，元素之間的空間更大一些。
.options a {
? color: #666666;
}
.options a:hover {
? color: #222222;
}
.fa {
? margin-right: 0.25rem;
}
這是我們的最后的顯示效果
讓我們快速添加圖像。
.card-image {
? height: 200px;
? background-size: cover;
? background-position: center center;
? background-repeat: no-repeat;
}
HTML，設置為允許通過CMS加載圖像。
<div class="card-image" style="background-image: url(images/chicago.jpg)"></div>
在這里，我們是最終版本！
不要過分使用陰影，漸變或動畫
沒什么好說的。如果您的元素在整個頁面中從各個方向俯沖，那么您的網站將很難導航。
此外，我剛剛意識到我把“大肩膀之城”改為“大肩膀之城”，所以請忽略錯字。我不會重做整個事情！
玩一下吧
也許你想要“舊金山科技公司的大時代”。
電子游戲？
任何你想要的！
結論
還迷惑嗎？有什么要補充的嗎？歡迎文章末尾進行評論！
您可以使用這些指南來對比自己的設計。你需要更多的padding填充嗎？你有太多或不一致的字體嗎？你使用了三種不同的邊界半徑嗎？
這是演示和源代碼。
1.查看最終產品
2.查看源代碼
