如何做 - 製作網站
瞭解如何建立一個響應式網站，該網站適用於所有裝置，包括PC、筆記型電腦、平板電腦和手機。
從零開始建立網站
一個“佈局草圖”
在建立網站之前，繪製頁面設計的佈局草圖是明智的
導航欄
側邊內容
一些文字一些文字..
主內容
一些文字一些文字..
一些文字一些文字..
一些文字一些文字..
頁尾
第一步 - 基本HTML頁面
HTML是建立網站的標準標記語言，CSS是描述HTML文件樣式的語言。我們將結合HTML和CSS來建立一個基本的網頁。
注意: 如果您不瞭解HTML和CSS，我們建議您先閱讀我們的HTML教程。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>頁面標題</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>我的網站</h1>
<p>一個由我建立的網站。</p>
</body>
</html>
自己動手試一試 »
示例解釋
<!DOCTYPE html>宣告定義此文件為HTML5<html>元素是HTML頁面的根元素<head>元素包含有關文件的元資訊<title>元素為文件指定一個標題<meta>元素應定義字元集為UTF-8<meta name="viewport">元素使網站在所有裝置和螢幕解析度上看起來都很好<style>元素包含網站的樣式（佈局/設計）<body>元素包含可見的頁面內容<h1>元素定義一個大標題<p>元素定義一個段落
建立頁面內容
在網站的<body>元素內部，我們將使用我們的“佈局草圖”來建立
- 一個頁首
- 一個導航欄
- 主內容
- 側邊內容
- 一個頁尾
Header
頁首通常位於網站頂部（或頂部導航選單下方）。它通常包含一個Logo或網站名稱
<div class="header">
<h1>我的網站</h1>
<p>一個由我建立的網站。</p>
</div>
然後我們使用CSS來設定頁首的樣式
.header {
padding: 80px; /* 一些內邊距 */
text-align: center; /* 居中文字 */
background: #1abc9c; /* 綠色背景 */
color: white; /* 白色文字顏色 */
}
/* 增大<h1>元素的字型大小 */
.header h1 {
font-size: 40px;
}
導航欄
導航欄包含一個連結列表，幫助訪問者瀏覽您的網站
<div class="navbar">
<a href="#">連結</a>
<a href="#">連結</a>
<a href="#">連結</a>
<a href="#" class="right">連結</a>
</div>
使用CSS為導航欄設定樣式
/* 樣式化頂部導航欄 */
.navbar {
overflow: hidden; /* 隱藏溢位 */
background-color: #333; /* 深色背景色 */
}
/* 樣式化導航欄連結 */
.navbar a {
float: left; /* 確保連結保持並排 */
display: block; /* 更改顯示為塊，以實現響應式（見下文） */
color: white; /* 白色文字顏色 */
text-align: center; /* 居中文字 */
padding: 14px 20px; /* 新增一些內邊距 */
text-decoration: none; /* 刪除下劃線 */
}
/* 右對齊連結 */
.navbar a.right {
float: right; /* 將連結浮動到右側 */
}
/* 懸停/滑鼠移上時更改顏色 */
.navbar a:hover {
background-color: #ddd; /* 灰色背景色 */
color: black; /* 黑色文字顏色 */
}
內容
建立2列布局，分為“側邊內容”和“主內容”。
<div class="row">
<div class="side">...</div>
<div class="main">...</div>
</div>
我們使用CSS Flexbox來處理佈局
/* 確保正確的大小 */
* {
box-sizing: border-box;
}
/* 列容器 */
.row {
display: flex;
flex-wrap: wrap;
}
/* 建立兩個不相等的列，它們並排顯示 */
/* 側邊欄/左列 */
.side {
flex: 30%; /* 設定側邊欄的寬度 */
background-color: #f1f1f1; /* 灰色背景色 */
padding: 20px; /* 一些內邊距 */
}
/* 主列 */
.main {
flex: 70%; /* 設定主內容的寬度 */
background-color: white; /* 白色背景色 */
padding: 20px; /* 一些內邊距 */
}
然後新增媒體查詢以實現響應式佈局。這將確保您的網站在所有裝置（桌面、筆記型電腦、平板電腦和手機）上看起來都很棒。調整瀏覽器視窗大小以檢視結果。
/* 響應式佈局 - 當螢幕寬度小於700px時，使兩列堆疊在彼此之上，而不是並排 */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* 響應式佈局 - 當螢幕寬度小於400px時，使導航連結堆疊在彼此之上，而不是並排 */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
提示: 要建立不同型別的佈局，只需更改flex寬度（但要確保它們加起來為100%）。
提示: 想知道@media規則是如何工作的嗎？ 在我們的CSS媒體查詢章節中瞭解更多。
提示: 要了解更多關於Flexbox佈局模組的資訊，閱讀我們的CSS Flexbox章節。
什麼是box-sizing?
您可以輕鬆建立三個並排的浮動框。但是，當您新增會放大每個框寬度（例如，內邊距或邊框）的元素時，該框會中斷。box-sizing屬性允許我們將內邊距和邊框包含在框的總寬度（和高度）中，確保內邊距保留在框內且不會中斷。
您可以在我們的CSS Box Sizing教程中瞭解更多關於box-sizing屬性的資訊。
頁尾
最後，我們將新增一個頁尾。
<div class="footer">
<h2>頁尾</h2>
</div>
併為其設定樣式
.footer {
padding: 20px; /* 一些內邊距 */
text-align: center; /* 居中文字 */
background: #ddd; /* 灰色背景 */
}
恭喜！您已從零開始構建了一個響應式網站。
W3Schools Spaces
如果您想建立自己的網站並託管您的.html檔案，請嘗試我們的網站構建器，名為W3schools Spaces
