如何使用 CSS 創建完整的首頁佈局

已發表: 2020-07-08

網站的設計為網站注入了活力。有很多不同類型的佈局的網站。網站佈局由顏色、圖像、內容和視頻組成。這些東西可以作為網站內容。網站佈局是網站的骨骼和骨架，它決定了網站材料的位置。它負責在網頁上安排網站的元素。

目錄隱藏

1.頁眉：

2.導航欄：

3.網頁內容：

不等列：

4. 網站頁腳：

5.響應式網站佈局：

定義明確的網站佈局可以增強用戶的瀏覽體驗。它可以直觀地導航到網站並鼓勵用戶參與。

此外，良好的網站佈局決定並控制用戶在頁面上停留的時間。它還會影響他們訪問的頁面數量以及他們訪問網站的頻率。網站佈局將網站分為頁眉、菜單、內容和頁腳。有許多不同類型的佈局可用於設計網站結構。但是，我們將遵循圖像中給定的結構並相應地編寫代碼。

1.頁眉：

別針

標題定義了帶有公司徽標和導航菜單的網頁的最頂部部分。它是網頁上的一條條帶，還保留了聯繫信息和有關網站的其他信息。一個好的標題使您的網站易於與品牌建立一起瀏覽。它還專注於在整個網站上創造良好的瀏覽體驗。

有兩種類型的標題：固定和浮動。當您在底部閱讀內容時，固定的標題會停留在網頁的頂部。當您向上或向下滾動頁面時，一個浮動標題會在屏幕周圍跟隨您。

標題的常規特徵包含公司的徽標、導航和頁面標題。在某些情況下，標題還可能包含搜索欄、購物車、登錄/註銷按鈕、用戶配置文件、用戶通知。

下面是設計一個簡單標題的代碼：

<!DOCTYPE html>

<頭部>

<元字符集=”utf-8″>

<風格>

身體 {

邊距：0；

}

/* 設置頁眉樣式——這會為頁眉創建樣式*/

.header {

背景顏色：#f1f1f1；

填充：20px；

文本對齊：居中；

}

</style>

</head>

<正文>

</div>

</正文>

</html>

2.導航欄：

別針

導航欄是結構化鏈接的集合，可幫助您的網站用戶訪問網站頁面並在其中導航。導航菜單是連接網站頁面的用戶界面元素。導航菜單通常在網站頁面上可用。這意味著導航菜單顯示在所有網頁上或僅顯示在所選網頁上。

通常，導航欄水平放置在網頁標題的正下方，在網頁內容開始之前。在具體設計中，導航欄垂直設置在網頁的左側或右側。在這裡，導航欄被稱為側邊欄，因為它出現在主要內容的“側面”。

作為網站最重要的部分，在沒有導航欄的情況下，網站導航變得很困難。您必須單擊後退按鈕才能到達某個頁面。但是，值得慶幸的是，近年來網站導航已經標準化。如今，很難找到沒有導航欄的網站。讓我們看一下設計簡單導航欄背後的 CSS 代碼：

/* 導航欄容器 - 這是包含導航的條帶*/
.topnav {
溢出：隱藏；
背景顏色：#333；
}

/* 導航欄鏈接——指向網站不同頁面的鏈接*/
.topnav {
向左飄浮;
顯示：塊；
顏色：#f2f2f2；
文本對齊：居中；
填充：14px 16px；
文字裝飾：無；
}

/* 鏈接 – 鼠標懸停時鏈接改變顏色 */
.topnav a:懸停{
背景顏色：#ddd；
顏色：黑色;
}

導航欄容器是一個包含網站導航的框。導航鏈接在導航欄鏈接中可用。單擊這些鏈接時，會將您帶到網站中選定的網頁。還有一個代碼，您可以在鼠標移到鏈接上時更改鏈接顏色。

3.網頁內容：

別針

內容是您在任何網頁上看到的一組內容，位於導航欄和網站頁腳之間。內容的佈局通常取決於站點或網頁的目標用戶。移動瀏覽器使用 1 列 Web 內容。 2 列內容佈局適用於平板電腦和筆記本電腦上的網站。桌面計算機的目標站點使用 3 列網站佈局。

網頁內容不僅限於文本內容。網頁內容可以是任何內容，包括視頻、音頻、圖像和圖形，包括文本。如今，網絡內容還可以包括來自 Instagram 和 Facebook 等社交媒體平台的帖子。博客也有資格作為網頁內容。

讓我們看一下創建網頁內容佈局的代碼。

/* 這將創建三個大小相等的列，它們彼此並排放置 */
。柱子 {
向左飄浮;
寬度：33.33%；
}

/* 清除列後的浮動 */
.row:{之後
內容： ””;
顯示：表格；
明確：兩者；
}

/* 響應式佈局 - 使三列堆疊在一起，而不是在較小的屏幕（600px 寬或更小）上彼此相鄰 */
@media screen and (max-width: 600px) {
。柱子 {
寬度：100%；
}
}

如果要創建 2 列佈局，則必須將寬度更改為 50%。這意味著屏幕空間分為兩半。要創建 4 列佈局，您必須將寬度設置為 25%。因此，如果您只有一列要創建，對於移動設備，您必須將寬度指定為 100%。

不等列：

不必為您的網頁內容設置相同大小的列。您可以在主要內容位於較大列中的網頁上設置不同大小的列。小列可以包含其他內容，如廣告、圖像、社交媒體按鈕或側邊欄導航。巨大的列用於指定任何網頁上的主要內容。當然，沒有必要遵循這個確切的模式。一些網頁設計愛好者改變了佈局，結果非常好。

您可以將列寬編輯為任意數字。但是你唯一記得的是列寬的總和應該是 100%。我們將查看 CSS 代碼以在中間創建一個更實質的列，在中間內容的每一側都有兩個較小的列。

。柱子 {
向左飄浮;
}

/* 左右列的代碼 */
.column.side {
寬度：25%；
}

/* 中間列的代碼 */
.column.middle {
寬度：50%；
}

/* 響應式佈局——三列相互堆疊，而不是彼此相鄰。不同類型的網站佈局設計 */
@media screen and (max-width: 600px) {
.column.side，.column.middle {
寬度：100%；
}
}

4. 網站頁腳：

別針

頁腳是網頁的最底部部分，其中包含精美印刷品、版權信息、快速鏈接和聯繫信息。和網站頁眉一樣，它使用頁腳來放置標准信息，這對網站來說不是很關鍵。眾所周知，頁腳可以保持網站的一致性，因為它具有一些您可以在網站標題中找到的鏈接。由於用戶行為不斷發展，因此必須在網站功能中創建一致性。

為了讓頁腳保持有趣，您可以包含號召性用語、聯繫表格、地圖、圖像、社交媒體按鈕或最新的博客文章。如今，在網站頁腳戰略性地呼籲採取行動已成為一種趨勢。除此之外，地圖、最新博客文章、社交媒體按鈕也會出現在頁腳上。這些東西也有助於用戶查看網站的其他部分。

讓我們看一下 CSS 中定義的簡單頁腳代碼：

.footer {
背景顏色：#F1F1F1；
文本對齊：居中；
填充：10px；
}

5.響應式網站佈局：

別針

我們看到了網頁每個元素的代碼，即網站標題、導航欄、內容和網站頁腳。下面是響應式網站佈局的代碼，它在兩列和全寬列之間變化。列寬取決於屏幕寬度的大小。

<!DOCTYPE html>

<html>

<頭部>

<風格>

* {

box-sizing：邊框框；

}

身體 {

字體系列：宋體；

填充：10px；

背景：#f1f1f1；

}

/* 標題/博客標題 - 您定義標題或博客的標題 */

.header {

內邊距：30px；

文本對齊：居中；

背景：白色；

}

.header h1 {

字體大小：50px；

}

/* 設置頂部導航欄的樣式 */

.topnav {

溢出：隱藏；

背景顏色：#333；

}

/* 設置導航欄頂部導航鏈接的樣式*/

.topnav {

向左飄浮;

顯示：塊；

顏色：#f2f2f2；

文本對齊：居中；

填充：14px 16px；

文字裝飾：無；

}

/* 懸停時更改顏色 – 當您在鏈接上移動鼠標光標時，鏈接會更改顏色*/

.topnav a:懸停{

背景顏色：#ddd；

顏色：黑色;

}

/* 這會生成兩個相鄰的不相等的列 */

/* 左列 */

.leftcolumn {

向左飄浮;

寬度：75%；

}

/* 右列 */

.rightcolumn {

向左飄浮;

寬度：25%；

背景顏色：#f1f1f1；

填充左：20px；

}

/* 這添加了一個假圖像 */

.fakeimg {

背景顏色：#aaa；

寬度：100%；

填充：20px；

}

/* 為文章添加卡片效果 */

。卡片 {

背景顏色：白色；

填充：20px；

邊距頂部：20px；

}

/* 清除列後的浮動 */

.row:{之後

內容： ””;

顯示：表格；

明確：兩者；

}

/* 頁腳 - 這定義了網站的頁腳部分 */

.footer {

填充：20px；

文本對齊：居中；

背景：#ddd；

邊距頂部：20px；

}

/* 響應式佈局 - 當屏幕寬度小於 800px 時，這會使兩列相互重疊*/

@media screen and (max-width: 800px) {

.leftcolumn, .rightcolumn {

寬度：100%；

填充：0；

}

/* 響應式佈局 - 當屏幕寬度小於 400px 時，使導航鏈接堆疊在一起而不是彼此相鄰 */

@media screen and (max-width: 400px) {

.topnav {

浮動：無；

寬度：100%；

}

</style>

</head>

<正文>

<p>調整瀏覽器窗口大小以查看效果。</p>

</div>

</div>

<p>Sunt in culpa qui officia deserunt mollit anim id est labourum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exercitation ullamco。</p>

</div>

</div>

<p>一些關於我的文字在 culpa qui officia deserunt mollit anim..</p>

</div>

</div>

</div>

</div>

</正文>

</html>

您必須在記事本或任何其他可用的文本編輯器中編寫上述代碼，並將文件保存為帶有 .html 文件擴展名的 HTML 文件。當您想在網頁設計中放置圖片時，您應該將所有照片保存在與 HTML 文件夾相同的文件夾中。要使用圖像，您應該在樣式表或 CSS 文件中使用圖像的完整位置。

結論：

現在我們已經詳細討論了網站佈局以及代碼，您可以定義您的網站應該具有什麼樣的外觀。糟糕的佈局勢必會讓您網站的用戶感到沮喪，並可能很快離開您的網站。它會導致高跳出率，這會影響您在搜索引擎結果頁面上的排名。說到這裡，您可以得出結論，您應該投入合理的時間來決定您的網站佈局。一旦你決定了，你需要確定哪些內容屬於哪一列。此外，良好的佈局有助於在用戶和公司之間建立情感紐帶。