免費AI編程助手
W3.CSS Case（實例）
從頭開始構建一個響應性網站
在本章中，我們將從頭開始構建一個 W3.CSS 響應式網站。
首先，從一個簡單的 HTML 頁面開始，該頁面具有一個初始視口和一個指向 W3.CSS 的鏈接。
實例
<link rel="stylesheet" >
<body>
<h1>我的第一個W3.CSS網站!</h1>
<p>這個網站會隨著我們的增加而增長 ...</p>
<p>這是一個段落.</p>
<p>這是另一個段落.</p>
<p>這是一個段落.</p>
<p>這是另一個段落.</p>
</body>
嘗試一下 ?
將元素放入容器
要添加公共邊距和填充，請將 HTML 元素放入容器中（<div class =“ w3-container”>）
使用兩個單獨的 <div> 元素將標題與其余內容分開：
實例
<div class="w3-container">
<h1>我的第一個W3.CSS網站!</h1>
<p>這個網站會隨著我們的增加而增長 ...</p>
</div>
<p>這是一個段落.</p>
<p>這是另一個段落.</p>
<p>這是一個段落.</p>
<p>這是另一個段落.</p>
嘗試一下 ?
顏色分類
顏色類定義元素的顏色。
本示例向第一個 <div> 元素添加顏色：
實例
<div class="w3-container w3-light-grey">
<h1>我的第一個W3.CSS網站!</h1>
<p>這個網站會隨著我們的增加而增長 ...</p>
</div>
<p>這是一個段落.</p>
<p>這是另一個段落.</p>
<p>這是一個段落.</p>
<p>這是另一個段落.</p>
嘗試一下 ?
尺寸等級
大小類定義元素的文本大小。
本示例向兩個標頭元素添加大?。?/p>
實例
<div class="w3-container w3-light-grey">
<h1 class="w3-jumbo">我的第一個W3.CSS網站!</h1>
<p class="w3-xlarge">這個網站會隨著我們的增加而增長 ...</p>
</div>
<div class="w3-container">
<p>這是一個段落.</p>
<p>這是另一個段落.</p>
<p>這是一個段落.</p>
<p>這是另一個段落.</p>
</div>
嘗試一下 ?
使用語義元素
如果您想遵循 HTML5 語義建議。請做！
實例
<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>
<p>這是另一個段落.</p>
</div>
<footer class="w3-container w3-light-grey">
<p>這是一個頁腳</p>
</footer>
嘗試一下 ?
多列響應式布局
使用 W3.CSS，可以輕松創(chuàng)建多列響應式布局。
在不同屏幕尺寸上查看時，列將自動重新排列。
一些網格規(guī)則：
- 從行類 <div class =“ w3-row-padding”>開始
- 使用預定義的類（例如“ w3-third”）快速創(chuàng)建網格列
- 將您的文本內容放在網格列中
本示例說明如何創(chuàng)建寬度相等的三列：
實例
<div class="w3-row-padding">
<div class="w3-third">
<p>最快的腳步不是跨越，而是繼續(xù)；最慢的步伐不是緩慢，而是徘徊；最好的道路不是大道，而是坦蕩；最險的道路不是陡坡，而是陷阱；最大的幸福不是得到，而是擁有.</p>
</div>
<div class="w3-third">
<p>在這個世界上取得成就的人，都努力去尋找他們想要的機會，如果找不到機會，他們便自己創(chuàng)造機會.</p>
</div>
<div class="w3-third">
<p><strong>在大屏幕上，內容將顯示為三列布局。在一個小屏幕上，內容會自動調整為單列。調整瀏覽器窗口的大小以查看效果.</strong></p>
</div>
</div>
嘗試一下 ?
本示例說明如何創(chuàng)建四個寬度相等的列：
實例
<div class="w3-row-padding">
<div class="w3-quarter">
<p>最快的腳步不是跨越，而是繼續(xù)；最慢的步伐不是緩慢，而是徘徊；最好的道路不是大道，而是坦蕩；最險的道路不是陡坡，而是陷阱；最大的幸福不是得到，而是擁有.</p>
</div>
<div class="w3-quarter">
<p>在這個世界上取得成就的人，都努力去尋找他們想要的機會，如果找不到機會，他們便自己創(chuàng)造機會.</p>
</div>
<div class="w3-quarter">
<p><strong>在大屏幕上，內容將顯示為三列布局。在一個小屏幕上，內容會自動調整為單列。調整瀏覽器窗口的大小以查看效果.</strong></p>
</div>
<div class="w3-quarter">
<p><strong>偉人之所以偉大，是因為他與別人共處逆境時，別人失去了信心，他卻下決心實現(xiàn)自己的目標.</strong></p>
</div>
</div>
嘗試一下 ?
不同寬度的列
本示例創(chuàng)建一個三列布局，其中中間的列比第一列和最后一列寬：
實例
<div class="w3-row-padding">
<div class="w3-quarter">
<p>最快的腳步不是跨越，而是繼續(xù)；最慢的步伐不是緩慢，而是徘徊；最好的道路不是大道，而是坦蕩；最險的道路不是陡坡，而是陷阱；最大的幸福不是得到，而是擁有.</p>
</div>
<div class="w3-half">
<p><strong>在這個世界上取得成就的人，都努力去尋找他們想要的機會，如果找不到機會，他們便自己創(chuàng)造機會.</strong></p>
</div>
<div class="w3-quarter">
<p>在大屏幕上，內容將顯示為三列布局。在一個小屏幕上，內容會自動調整為單列。調整瀏覽器窗口的大小以查看效果.</p>
</div>
</div>
嘗試一下 ?
導航欄
導航欄是放置在頁面頂部的導航標題。
實例
<div 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>
</div>
嘗試一下 ?
側面導航
使用側面導航時，您有幾種選擇：
- 始終在頁面內容的左側顯示導航窗格。
- 使用可折疊的“全自動”響應式側面導航。
- 打開頁面內容左側的導航窗格。
- 在所有頁面內容上打開導航窗格。
- 打開導航窗格時，將頁面內容向右滑動。
- 在右側而不是左側顯示導航窗格
本示例打開頁面內容左側上方的導航窗格：
<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：
實例
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
嘗試一下 ?
更多建議：