閱讀(4.1k) 書簽贊(1) 我要糾錯(cuò)

W3.CSS 簡介

2022-07-24 09:37 更新

W3.CSS 顏色

W3顏色 類別的靈感來自現(xiàn)代色彩，用于標(biāo)記、路標(biāo)以及便簽：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 容器

在 W3容器類是最重要的 W3.CSS 類。它提供如下的相等性：

共同利潤
常用填充
常見的垂直對齊
常見的水平路線
常用字體
常用顏色

w3-container 類通常與 HTML 容器元素一起使用，例如：

<div>，<header>，<footer>，<article>，<section>，<blockquote>，<form>等。

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 面板，注釋和引號

在 W3面板 類可以顯示各種票據(jù)及報(bào)價(jià)：

實(shí)例

<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">倫敦是英國人口最多的城市，擁有超過900萬居民。</font></font></p>

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 警報(bào)

在 W3面板 類也可用于各種警報(bào)：

實(shí)例

<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">紅色通常表示危險(xiǎn)或負(fù)面情況。</font></font></p>

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

實(shí)例

<p>黃色通常表示可能需要注意的警告。</p>

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 卡片

在 W3卡片 類適用于圖像和注意事項(xiàng)：

實(shí)例

<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">紅色通常表示危險(xiǎn)或負(fù)面情況。</font></font></p>

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

實(shí)例

<p>意大利/奧地利阿爾卑斯山</p>

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 表

在 W3表 類可處理各種表：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 列表

在 W3-UL 類可以處理所有類型的列表：

實(shí)例

</li>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

實(shí)例

</ul>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 按鈕

W3-按鈕和 W3-BTN 類提供所有尺寸和類型的按鈕。

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

寬按鈕：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

圓形或方形按鈕：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 標(biāo)簽，標(biāo)簽，徽章和標(biāo)志

在 W3標(biāo)簽 和 W3-徽章 類是能夠顯示各種吊牌，標(biāo)簽，徽章和標(biāo)志：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

實(shí)例：

實(shí)例

<p>

</p>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 響應(yīng)式

該 響應(yīng)網(wǎng)格 類提供了所有設(shè)備類型的響應(yīng)：PC，筆記本電腦，平板電腦和移動(dòng)。

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 還支持具有小，中和大類的 12列移動(dòng)優(yōu)先流體網(wǎng)格。

W3.CSS 顯示

在 W3顯示 類，可以顯示特定位置的 HTML 元素：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 模

在 W3模態(tài) 類提供了純 HTML 模態(tài)對話框：

實(shí)例

<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-dark-grey w3-hover-black w3-padding-16"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">點(diǎn)擊打開模態(tài)</font></font></button>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

模態(tài)圖片：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 進(jìn)度條

在 W3.CSS進(jìn)度欄上 閱讀更多內(nèi)容：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

實(shí)例

</div>

<br>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 下拉菜單

在 W3-下拉列表 類提供的下拉列表：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 折疊塊

在 W3.CSS 折疊塊上 閱讀更多內(nèi)容：

實(shí)例

<button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">打開第一節(jié)</button>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 標(biāo)簽

標(biāo)簽 非常適合單頁 Web 應(yīng)用程序或能夠顯示不同主題的網(wǎng)頁。

實(shí)例

function openCity(evt, cityName) {

var i, x, tablinks;

x = document.getElementsByClassName("city");

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

tablinks = document.getElementsByClassName("tablink");

for (i = 0; i < x.length; i++) {

tablinks[i].className = tablinks[i].className.replace(" w3-red", "");

}

document.getElementById(cityName).style.display = "block";

evt.currentTarget.className += " w3-red";

}

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

選項(xiàng)卡式圖像庫（單擊其中一張圖片）：

實(shí)例

</a>

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 導(dǎo)航

在 W3導(dǎo)航 類可以用來創(chuàng)建一個(gè)導(dǎo)航欄：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

帶有輸入的導(dǎo)航欄：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

帶有下拉菜單的導(dǎo)航欄：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 分頁

W3.CSS 提供了用于 頁面分頁的 簡單方法:

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

幻燈片放映

W3.CSS 提供了用于循環(huán)瀏覽圖像或其他內(nèi)容的 幻燈片：

實(shí)例

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {

showDivs(slideIndex += n);

}

function currentDiv(n) {

showDivs(slideIndex = n);

}

function showDivs(n) {

var i;

var x = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("demo");

if (n > x.length) {slideIndex = 1}

if (n < 1) {slideIndex = x.length}

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" w3-white", "");

}

x[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " w3-white";

}

</script>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

燈箱

結(jié)合情態(tài)動(dòng)詞和幻燈片創(chuàng)建一個(gè)燈箱（模態(tài)圖庫）：

實(shí)例

function openModal() {

document.getElementById('myModal').style.display = "block";

}

function closeModal() {

document.getElementById('myModal').style.display = "none";

}

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {

showDivs(slideIndex += n);

}

function currentDiv(n) {

showDivs(slideIndex = n);

}

function showDivs(n) {

var i;

var x = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("demo");

var captionText = document.getElementById("caption");

if (n > x.length) {slideIndex = 1}

if (n < 1) {slideIndex = x.length}

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" w3-opacity-off", "");

}

x[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " w3-opacity-off";

captionText.innerHTML = dots[slideIndex-1].alt;

}

</script>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS動(dòng)畫

的 W3-動(dòng)畫 類提供了一種簡單的方法來滑動(dòng)和在元件褪色：

實(shí)例

<h2>動(dòng)畫淡入和淡出</h2>

<p>w3動(dòng)畫淡入類每10秒（連續(xù)）淡入和淡出元素。</p>

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS 圖像

在 W3CSS 中樣式化圖像很容易：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS效果

為任何元素添加特殊效果：

實(shí)例

div class="w3-red w3-container">

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS輸入表格

在 W3輸入 類的輸入形式：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS過濾器

使用 W3.CSS過濾器在列表，表格，下拉列表等中搜索特定元素：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS字體

使用W3.CSS，將字體添加到網(wǎng)頁非常容易：

實(shí)例

使網(wǎng)絡(luò)美麗！

</font></font>

</div>

制作網(wǎng)頁！

</font></font>

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

W3.CSS工具提示

在W3-提示 類可以顯示各種提示的：

實(shí)例

<p class="w3-tooltip"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">將鼠標(biāo)懸停在此文本上！

</font></font><span class="w3-text w3-tag"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">工具提示內(nèi)容</font></font></span></p>

<p class="w3-tooltip"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">將鼠標(biāo)懸停在此文本上！

</font></font><span class="w3-text w3-tag w3-theme w3-animate-opacity w3-round-large"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">工具提示內(nèi)容</font></font></span></p>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

顏色主題

顏色主題可以輕松添加到任何Web應(yīng)用程序中：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

以上內(nèi)容是否對您有幫助：

W3.CSS Colors (顏色) →

寫筆記

我要補(bǔ)充

W3.CSS 簡介

W3.CSS 顏色

實(shí)例

W3.CSS 容器

實(shí)例

W3.CSS 面板，注釋和引號

實(shí)例

W3.CSS 警報(bào)

實(shí)例

實(shí)例

W3.CSS 卡片

實(shí)例

實(shí)例

W3.CSS 表

實(shí)例

W3.CSS 列表

實(shí)例

實(shí)例

W3.CSS 按鈕

實(shí)例

實(shí)例

實(shí)例

W3.CSS 標(biāo)簽，標(biāo)簽，徽章和標(biāo)志

實(shí)例

實(shí)例

W3.CSS 響應(yīng)式

實(shí)例

W3.CSS 顯示

實(shí)例

W3.CSS 模

實(shí)例

實(shí)例

W3.CSS 進(jìn)度條

實(shí)例

實(shí)例

W3.CSS 下拉菜單

實(shí)例

實(shí)例

W3.CSS 折疊塊

實(shí)例

W3.CSS 標(biāo)簽

實(shí)例

實(shí)例

W3.CSS 導(dǎo)航

實(shí)例

實(shí)例

實(shí)例

W3.CSS 分頁

實(shí)例

幻燈片放映

實(shí)例

燈箱

實(shí)例

W3.CSS動(dòng)畫

實(shí)例

W3.CSS 圖像

實(shí)例

W3.CSS效果

實(shí)例

W3.CSS輸入表格

實(shí)例

W3.CSS過濾器

實(shí)例

W3.CSS字體

實(shí)例

W3.CSS工具提示

實(shí)例

顏色主題

實(shí)例

推薦文章

推薦教程

推薦課程

W3.CSS 面板，注釋和引號

W3.CSS 標(biāo)簽，標(biāo)簽，徽章和標(biāo)志