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