codecamp

W3.CSS Versions(版本)



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.w3cschool.cn/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">

尝试一下 »


W3.CSS Validation(验证)
W3.CSS Mobile(移动)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }