W3.CSS Versions（版本）

2020-12-01 17:10 更新


css 版本 4 于 3 月 24 日發(fā)布。

2017. 以下是一些設(shè)計(jì)要點(diǎn):

速度是版本3的兩倍
重新設(shè)計(jì)，允許顏色庫的分離
重新設(shè)計(jì)，允許更小更快的移動(dòng)版本

版本 4 可以從 W3.CSS.Donloads下載

版本 4 現(xiàn)在是 W3Schools 所有頁面使用的默認(rèn)樣式表。

W3.CSS - Pro

版本4附帶了一個(gè)專業(yè)版本:w3pro.css。

專業(yè)版更小更快，因?yàn)樗鼪]有定義顏色。

專業(yè)版是為使用主題或其他由開發(fā)者提供的顏色類而設(shè)計(jì)的。

專業(yè)版可從以下網(wǎng)站下載:

實(shí)例

function openCity(evt, cityName) {

      var i;

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

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

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

      }

      var activebtn = document.getElementsByClassName("testbtn");

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

        activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");

      }

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

      evt.currentTarget.className += " w3-dark-grey";

    }

    var mybtn = document.getElementsByClassName("testbtn")[0];

    mybtn.click();


嘗試一下 ?

W3.CSS Pro Colors

與 W3.CSS 專業(yè)你可以定義自己的顏色:

實(shí)例

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" >
<!-- Colors here -->
<body>
<!-- Content here -->
</body>
</html>
你可以用一個(gè) <style> 標(biāo)簽內(nèi)聯(lián)地定義你的顏色

實(shí)例

<style>
.w3-amber{color:#000!important;background-color:#ffc107!important}
</style>

嘗試一下 ?

或者你可以加載你自己的主題:

實(shí)例

<link rel="stylesheet" href="/lib/w3-theme-amber.css">

嘗試一下 ?

或者你可以加載你的顏色庫:

實(shí)例

<link rel="stylesheet" href="/lib/w3-colors-2018.css">

嘗試一下 ?

實(shí)例

<link rel="stylesheet" href="/lib/w3-colors-2017.css">

嘗試一下 ?


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)