免費(fèi)AI編程助手
W3.CSS Containers (容器)
實(shí)例
<div class="w3-container w3-black">
<h2><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">這是我的標(biāo)題</font></font></h2>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
集裝箱類
w3-container 類增加了一個16像素左右填充到任何HTML元素。
w3-container 類是用于所有HTML容器元素像是一個完美的類：
<div>，<article>，<section>，<header>，<footer>，<form>等。
容器提供平等
w3-container 提供了所有的 HTML 容器元素的平等：
- 共同利潤
- 常用填充
- 常見比對
- 常用字體
- 常用顏色
要使用容器，只需將 w3-container 類添加到任何元素：
實(shí)例
<div class="w3-container">
<p>w3-container 是最重要的 W3.CSS 類之一。</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
要添加顏色，只需添加 w3-color 類：
實(shí)例
<div class="w3-container w3-red">
<p>倫敦是英格蘭的首都。</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
頁眉和頁腳
w3-container 類可以用來風(fēng)格標(biāo)題：
實(shí)例
<div class="w3-container w3-teal">
<h1>標(biāo)頭</h1>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
W3.CSS處理<div>和<header>元素的方式?jīng)]有什么不同。
w3-container 類可以用來風(fēng)格頁腳：
頁腳信息在這里
實(shí)例
<div class="w3-container w3-teal">
<h5>頁腳</h5>
<p>頁腳信息在這里。</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
實(shí)例
<footer class="w3-container w3-teal">
<h5>頁腳</h5>
<p>頁腳信息在這里。</p>
</footer>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
許多網(wǎng)頁使用<div>元素而不是<header>和<footer>元素。
文章和章節(jié)
w3-container 類可以用來風(fēng)格<article>和<section>的元素：
實(shí)例
<div class="w3-container">
<h2>倫敦</h2>
<p>倫敦是英國人口最多的城市，擁有超過900萬居民。</p>
<hr>
</div>
<article class="w3-container">
<h2>巴黎</h2>
<p>巴黎地區(qū)是歐洲最大的人口中心之一，人口超過200萬。</p>
<hr>
</article>
<section class="w3-container">
<h2>東京</h2>
<p>東京是大東京地區(qū)的中心，也是世界上人口最多的都市區(qū)。</p>
<hr>
</section>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
許多網(wǎng)頁使用<div>元素而不是<article>和<section>元素。
網(wǎng)頁示例
汽車是用于運(yùn)輸?shù)妮喪阶怨╇娖?。該術(shù)語的大多數(shù)定義都指定汽車主要在道路上行駛。（維基百科）
使用HTML<div>元素的示例
<div class="w3-container">
<p>汽車是用于運(yùn)輸?shù)妮喪阶怨╇娖?。該術(shù)語的大多數(shù)定義都指定汽車主要在道路上行駛。（維基百科）</p>
</div>
<div class="w3-container w3-red">
<h5>頁腳</h5>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
使用HTML語義元素的示例
<header class="w3-container w3-teal">
<h1>標(biāo)頭</h1>
</header>
<img src="https://atts.w3cschool.cn/img_car.jpg" alt="Car" style="width:100%">
<article class="w3-container">
<p>汽車是用于運(yùn)輸?shù)妮喪阶怨╇娖?。該術(shù)語的大多數(shù)定義都指定汽車主要在道路上行駛。（維基百科）</p>
</article>
<footer class="w3-container w3-teal">
<h5>頁腳</h5>
</footer>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
容器填充
在 w3-container 類有一個默認(rèn)的 16px 的左右填充，沒有頂部或底部填充：
實(shí)例
<div class="w3-container w3-blue">
w3-container類具有默認(rèn)的16px左右填充，沒有頂部或底部填充。
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
通常，您不必更改容器的默認(rèn)填充，因?yàn)槎温浜蜆?biāo)題提供了可模擬填充的邊距。
我是一段
實(shí)例
<div class="w3-container w3-blue">
<h1>我是標(biāo)題</h1>
<p>我是一段。</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
更多建議：