W3.CSS 案例研究
從頭開始構建響應式網站
在本章中，我們將從頭開始構建一個 W3.CSS 響應式網站。
首先，從一個簡單的 HTML 頁面開始，包含初始視口和對 W3.CSS 的連結。
示例
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS 案例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<body>
<h1>我的第一個 W3.CSS 網站！</h1>
<p>隨著我們新增更多內容，本網站將不斷發展……</p>
<p>這是另一個段落。</p>
<p>這是一個段落.</p>
<p>這是另一個段落。</p>
</body>
</html>
自己動手試一試 »
將元素放入容器
要新增常見的邊距和內邊距，請將 HTML 元素放入容器中（<div class="w3-container">）
使用兩個單獨的 <div> 元素將標題與其餘內容分開
示例
<div class="w3-container">
<h1>我的第一個 W3.CSS 網站！</h1>
<p>隨著我們新增更多內容，本網站將不斷發展……</p>
</div>
<div class="w3-container">
<p>這是另一個段落。</p>
<p>這是一個段落.</p>
<p>這是另一個段落。</p>
</div>
自己動手試一試 »
顏色類
顏色類定義元素的顏色。
此示例為第一個 <div> 元素添加了顏色
示例
<div class="w3-container w3-light-grey">
<h1>我的第一個 W3.CSS 網站！</h1>
<p>隨著我們新增更多內容，本網站將不斷發展……</p>
</div>
<div class="w3-container">
<p>這是另一個段落。</p>
<p>這是一個段落.</p>
<p>這是另一個段落。</p>
</div>
自己動手試一試 »
大小類
大小類定義元素的文字大小。
此示例為兩個標題元素都添加了大小
示例
<div class="w3-container w3-light-grey">
<h1 class="w3-jumbo">我的第一個 W3.CSS 網站！</h1>
<p class="w3-xxlarge">隨著我們新增更多內容，本網站將不斷發展……</p>
</div>
<div class="w3-container">
<p>這是另一個段落。</p>
<p>這是一個段落.</p>
<p>這是另一個段落。</p>
</div>
自己動手試一試 »
使用語義元素
如果您喜歡遵循 HTML5 語義建議，請這樣做！
對於 W3.CSS 來說，使用 <div> 還是 <header> 並不重要。
示例
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS 案例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<body>
<header class="w3-container w3-light-grey">
<h1 class="w3-jumbo">我的第一個 W3.CSS 網站！</h1>
<p class="w3-xxlarge">隨著我們新增更多內容，本網站將不斷發展……</p>
</header>
<div class="w3-container">
<p>這是另一個段落。</p>
<p>這是一個段落.</p>
<p>這是另一個段落。</p>
</div>
<footer class="w3-container">
<p>這是我的頁尾</p>
</footer>
</body>
</html>
自己動手試一試 »
多列響應式佈局
使用 W3.CSS，可以輕鬆建立多列響應式佈局。
當在不同螢幕尺寸上檢視時，列會自動重新排列。
一些網格規則
- 以行類 <div class="w3-row-padding"> 開始
- 使用預定義類，如“w3-third”，快速建立網格列
- 將您的文字內容放在網格列中
此示例顯示如何建立三等寬列
示例
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
自己動手試一試 »
此示例顯示如何建立四等寬列
示例
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
自己動手試一試 »
不同寬度的列
此示例建立一個三列布局，其中中間的列比第一列和最後一列更寬
示例
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
自己動手試一試 »
導航欄
導航欄是一個放置在頁面頂部的導航標題。
示例
<nav class="w3-bar w3-black w3-large">
<a href="#" class="w3-bar-item w3-button">主頁</a>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</nav>
自己試試 »
側邊導航
使用側邊導航，您有幾種選擇
- 始終將導航窗格顯示在頁面內容的左側。
- 使用可摺疊的“全自動”響應式側邊導航。
- 在頁面內容的左側開啟導航窗格。
- 在所有頁面內容上開啟導航窗格。
- 開啟導航窗格時將頁面內容向右滑動。
- 在右側顯示導航窗格，而不是在左側
此示例在頁面內容左側開啟導航窗格
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none" id="mySidebar">
<a class="w3-bar-item w3-button" href="#">連結 1</a>
<a class="w3-bar-item w3-button" href="#">連結 2</a>
<a class="w3-bar-item w3-button" href="#">連結 3</a>
</nav>
用於開啟和隱藏選單的 JavaScript
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
自己試試 »
