W3.CSS 简介

2020-11-26 15:27 更新

W3.CSS 颜色

W3颜色 类别的灵感来自现代色彩,用于标记、路标以及便签: 

实例

<div class="w3-container w3-pink w3-center w3-padding-16"><p> </p></div>

<div class="w3-container w3-teal w3-center w3-padding-16"><p> </p></div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 容器

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

  • 共同利润
  • 常用填充
  • 常见的垂直对齐
  • 常见的水平路线
  • 常用字体
  • 常用颜色

w3-container 类通常与 HTML 容器元素一起使用,例如:

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

实例

<div class="w3-container w3-dark-grey">

<h2><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">这是标题</font></font></h2>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 面板,注释和引号

在 W3面板 类可以显示各种票据及报价:

实例

<div class="w3-container w3-round w3-border">

<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">伦敦是英国人口最多的城市,拥有超过900万居民。</font></font></p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 警报

在 W3面板 类也可用于各种警报:

实例

<div class="w3-panel w3-red w3-display-container">

   <span onclick="this.parentElement.style.display='none'" class="w3-button w3-red w3-large w3-display-topright"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">×</font></font></span>

   <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">危险!</font></font></h3>

   <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">红色通常表示危险或负面情况。</font></font></p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

<div class="w3-panel w3-yellow">

  <h3>警告!</h3>

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

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 卡片

在 W3卡片 类适用于图像和注意事项:

实例

 <div class="w3-panel w3-red w3-display-container">

   <span onclick="this.parentElement.style.display='none'" class="w3-button w3-red w3-large w3-display-topright"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">×</font></font></span>

   <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">危险!</font></font></h3>

   <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">红色通常表示危险或负面情况。</font></font></p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

<div class="w3-card-4"> 

  <img src="img_snowtops.jpg" alt="阿尔卑斯山">

  <div class="w3-container w3-center">

   <p>意大利/奥地利阿尔卑斯山</p>

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 表

在 W3表 类可处理各种表: 

实例

<table class="w3-table w3-striped w3-border">


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 列表

在 W3-UL 类可以处理所有类型的列表:

实例

<li class="w3-padding-16 w3-hover-light-grey">

<span onclick="this.parentElement.style.display='none'" class="w3-button w3-white w3-xlarge w3-right w3-hover-red"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">×</font></font></span>

     <img src="https://atts.w3cschool.cn/img_avatar2.png" class="w3-left w3-circle w3-margin-right" style="width:50px">

     <span class="w3-large"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">迈克</font></font></span><br>

     <span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">网页设计师</font></font></span>

   </li>


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

<ul class="w3-ul w3-border">

  <li><h2>名字</h2></li>

  <li>吉尔</li>

  <li>夏娃</li>

  <li>亚当</li>

</ul>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 按钮

W3-按钮和 W3-BTN 类提供所有尺寸和类型的按钮。 

实例

<button class="w3-button w3-ripple w3-red w3-padding"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">纽扣</font></font></button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

宽按钮:

实例

<button class="w3-button w3-block w3-border"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">纽扣</font></font></button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

圆形或方形按钮:

实例

<p><a class="w3-button w3-xlarge w3-circle w3-ripple w3-black"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+</font></font></a></p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 标签,标签,徽章和标志

在 W3标签 和 W3-徽章 类是能够显示各种吊牌,标签,徽章和标志:

实例

<span class="w3-badge w3-dark-grey"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2</font></font></span>


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例:

实例

<p>

<span class="w3-badge w3-dark-grey"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2</font></font></span>

</p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 响应式

该 响应网格 类提供了所有设备类型的响应:PC,笔记本电脑,平板电脑和移动。

实例

<div class="w3-col s6 w3-green w3-center">

<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">1/2</font></font></p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 还支持 具有小,中和大类的 12列移动优先流体网格 。


W3.CSS 显示

在 W3显示 类,可以显示特定位置的 HTML 元素:

实例

<div class="w3-display-topleft w3-padding"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">左上方</font></font></div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 模

在 W3模态  类提供了纯 HTML 模态对话框:

实例

<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;">点击打开模态</font></font></button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

模态图片:

实例

<div class="w3-modal-content w3-card-4 w3-animate-zoom">

        <img src="img_nature_wide.jpg" alt="自然" style="width:100%">

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 进度条

在 W3.CSS进度栏上 阅读更多内容:

实例

 <div class="w3-container w3-green w3-center w3-padding" style="width:25%"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">25%</font></font></div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

<div class="w3-dark-grey">

<div class="w3-container w3-green w3-center w3-padding" style="width:25%"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">25%</font></font></div>

</div>

<br>

<button class="w3-button w3-dark-grey" onclick="move()"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">点击我</font></font></button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 下拉菜单

在 W3-下拉列表 类提供的下拉列表:

实例

<button class="w3-button w3-dark-grey"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">悬停我!</font></font></button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

<div class="w3-col s6">

<div class="w3-dropdown-hover">

<button class="w3-button w3-dark-grey"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">悬停我!</font></font></button>

</div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 折叠块

在 W3.CSS 折叠块上 阅读更多内容:

实例

<button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">打开第一节</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 标签

标签 非常适合单页 Web 应用程序或能够显示不同主题的网页。

实例

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

    }


尝试一下 »
点击“尝试一下”按钮查看在线实例

选项卡式图像库(单击其中一张图片):

实例

<div class="w3-col s3 w3-container">

        <a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');">

            <img src="img_nature.jpg" alt="Nature" style="width:100%">

        </a>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 导航

在 W3导航 类可以用来创建一个导航栏:

实例

<div class="w3-bar w3-black">

    <a href="javascript:void(0)" class="w3-bar-item w3-button"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">家</font></font></a>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

带有输入的导航栏:

实例

<div class="w3-bar w3-light-grey w3-border">

  <a href="javascript:void(0)" class="w3-bar-item w3-button w3-green w3-mobile"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">家</font></font></a>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

带有下拉菜单的导航栏:

实例

<div class="w3-bar w3-light-grey">

    <a href="javascript:void(0)" class="w3-bar-item w3-button w3-mobile"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">家</font></font></a>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 分页

W3.CSS 提供了用于 页面分页的 简单方法:

实例

<a class="w3-bar-item w3-button" href="javascript:void(0)"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">«</font></font></a>


尝试一下 »
点击“尝试一下”按钮查看在线实例

幻灯片放映

W3.CSS 提供了用于循环浏览图像或其他内容的 幻灯片

实例

<script>

    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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

灯箱

结合情态动词幻灯片创建一个灯箱(模态图库):

实例

<script>

    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-动画 类提供了一种简单的方法来滑动和在元件褪色:

实例

<div class="w3-container">

    <h2>动画淡入和淡出</h2>

    <p>w3动画淡入类每10秒(连续)淡入和淡出元素。</p>

    <img class="w3-animate-fading" src="https://www.w3schools.com/w3css/img_rr_01.jpg" rel="external nofollow"  style="width:100%">

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 图像

在 W3CSS 中样式化 图像 很容易:

实例

 <div class="w3-col m3 s4">

<img src="img_lights.jpg" class="w3-round testsm" alt="北极光" style="width:85%">

    </div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS效果

为任何元素添加特殊 效果 :

实例

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

<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">正常</font></font></p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS输入表格

在 W3输入  类的输入形式:

实例

<input class="w3-input w3-border w3-light-grey" type="text" placeholder="名称">


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS过滤器

使用 W3.CSS过滤器 在列表,表格,下拉列表等中搜索特定元素:

实例

<th style="width:60%;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">名称</font></font></th>

<th style="width:40%;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">国家</font></font></th>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS字体

使用W3.CSS,将字体添加到网页非常容易:

实例

<div class="w3-tangerine"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    使网络美丽!

</font></font>

</div>

<div class="w3-lobster"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

    制作网页!

</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;">工具提示内容</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;">工具提示内容</font></font></span></p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

颜色主题

颜色主题可以轻松添加到任何Web应用程序中:

实例

<div class="w3-container w3-indigo">

<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">主题靛蓝</font></font></h3>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号