閱讀(4k) 書簽贊(1) 我要糾錯

W3.CSS 簡介

2022-07-24 09:37 更新

W3.CSS 顏色

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

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 容器

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

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

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

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

實例

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 面板，注釋和引號

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

實例

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

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 警報

在 W3面板 類也可用于各種警報：

實例

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

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

實例

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

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 卡片

在 W3卡片 類適用于圖像和注意事項：

實例

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

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

實例

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

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 表

在 W3表 類可處理各種表：

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 列表

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

實例

</li>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

實例

</ul>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 按鈕

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

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

寬按鈕：

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

圓形或方形按鈕：

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 標簽，標簽，徽章和標志

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

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

實例：

實例

<p>

</p>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 響應(yīng)式

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

實例

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

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

W3.CSS 顯示

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

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 模

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

實例

<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;">點擊打開模態(tài)</font></font></button>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

模態(tài)圖片：

實例

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 進度條

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

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

實例

</div>

<br>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 下拉菜單

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

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

實例

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 折疊塊

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

實例

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

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 標簽

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

實例

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";

}

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

選項卡式圖像庫（單擊其中一張圖片）：

實例

</a>

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 導(dǎo)航

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

實例

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

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

實例

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

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

實例

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 分頁

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

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

幻燈片放映

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

實例

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>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

燈箱

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

實例

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>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS動畫

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

實例

<h2>動畫淡入和淡出</h2>

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

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 圖像

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

實例

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS效果

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

實例

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

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS輸入表格

在 W3輸入 類的輸入形式：

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS過濾器

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

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS字體

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

實例

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

</font></font>

</div>

制作網(wǎng)頁！

</font></font>

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS工具提示

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

實例

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

</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;">將鼠標懸停在此文本上！

</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>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

顏色主題

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

實例

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

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

W3.CSS Colors (顏色) →

寫筆記

我要補充

W3.CSS 簡介

W3.CSS 顏色

實例

W3.CSS 容器

實例

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

實例

W3.CSS 警報

實例

實例

W3.CSS 卡片

實例

實例

W3.CSS 表

實例

W3.CSS 列表

實例

實例

W3.CSS 按鈕

實例

實例

實例

W3.CSS 標簽，標簽，徽章和標志

實例

實例

W3.CSS 響應(yīng)式

實例

W3.CSS 顯示

實例

W3.CSS 模

實例

實例

W3.CSS 進度條

實例

實例

W3.CSS 下拉菜單

實例

實例

W3.CSS 折疊塊

實例

W3.CSS 標簽

實例

實例

W3.CSS 導(dǎo)航

實例

實例

實例

W3.CSS 分頁

實例

幻燈片放映

實例

燈箱

實例

W3.CSS動畫

實例

W3.CSS 圖像

實例

W3.CSS效果

實例

W3.CSS輸入表格

實例

W3.CSS過濾器

實例

W3.CSS字體

實例

W3.CSS工具提示

實例

顏色主題

實例

推薦文章

推薦教程

推薦課程

W3.CSS 面板，注釋和引號

W3.CSS 標簽，標簽，徽章和標志