阅读(3290) (0)

W3.CSS Versions(版本)

2020-11-23 14:40:12 更新


css 版本 4 于 3 月 24 日发布。

2017. 以下是一些设计要点:

速度是版本3的两倍
重新设计,允许颜色库的分离
重新设计,允许更小更快的移动版本

版本 4 可以从 W3.CSS.Donloads下载

版本 4 现在是 W3Schools 所有页面使用的默认样式表。

W3.CSS - Pro

版本4附带了一个专业版本:w3pro.css。

专业版更小更快,因为它没有定义颜色。

专业版是为使用主题或其他由开发者提供的颜色类而设计的。

专业版可从以下网站下载:

实例

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 专业你可以定义自己的颜色:

实例

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://7npmedia.zijiebao.com/w3pro.css">
<!-- Colors here -->
<body>
<!-- Content here -->
</body>
</html>
你可以用一个 <style> 标签内联地定义你的颜色

实例

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

尝试一下 »

或者你可以加载你自己的主题:

实例

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

尝试一下 »

或者你可以加载你的颜色库:

实例

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

尝试一下 »

实例

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

尝试一下 »