W3.CSS Demos（演示）

<div class="w3-third">

   <div class="w3-card">

   <img src="img_5terre.jpg" style="width:100%">

      <div class="w3-container">

           <h4>5 Terre</h4>

       </div>

   </div>

</div>

<div class="w3-third">

  <img src="img_5terre.jpg" style="width:100%;min-height:200px">

    </div>

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

          <h2>5 Terre</h2>

          <p>

          人一旦觉悟，就会放弃追寻身外之物，而开始追寻内心世界的真正财富。

          </p>

        </div>

    </div>

<div class="w3-row w3-margin">

<div class="w3-third w3-justify">

    <h2>名人名言</h2>

    <p>骐骥一跃，不能十步；驽马十驾，功在不舍；锲而舍之，朽木不折；锲而不舍，金石可镂。——荀子</p>

    <p>骐骥一跃，不能十步；驽马十驾，功在不舍；锲而舍之，朽木不折；锲而不舍，金石可镂。——荀子</p>

    <p>骐骥一跃，不能十步；驽马十驾，功在不舍；锲而舍之，朽木不折；锲而不舍，金石可镂。——荀子</p> 

</div>

 <div class="w3-third w3-justify w3-container">

        <h2>名人名言</h2>

        <p>书籍是全世界的营养品，生活里没有书籍就好像没有阳光；智慧里没有书籍就好像鸟儿没有翅膀。——莎士比亚.</p>

        <p>书籍是全世界的营养品，生活里没有书籍就好像没有阳光；智慧里没有书籍就好像鸟儿没有翅膀。——莎士比亚.</p>    

        <p>书籍是全世界的营养品，生活里没有书籍就好像没有阳光；智慧里没有书籍就好像鸟儿没有翅膀。——莎士比亚.</p>    

</div>

  <div class="w3-twothird">

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

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

        <img src="img_car.jpg" alt="Car" style="width:100%">

        <div class="w3-display-bottomleft w3-container w3-xlarge w3-text-black"><p>Nice Car</p></div>

      </div>

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

        <p>有勇气并不表示恐惧不存在，而是敢面对恐惧、克服恐惧。.</p>

        <p>2个小时前</p>

      </div>

    </div>

  </div>

  <div class="w3-twothird">

    <img src="img_notebook.jpg" alt="Notebook" style="width:100%">

    <h2>杂志</h2>

    <div class="w3-justify">

      <p>金钱这种东西，只要能解决个人的生活就行，若是过多了，它会成为遏制人类才能的祸害。——诺贝尔</p>

      </div>

  </div>

  <div>

    <a class="w3-bar-item w3-button" onclick="myAccordion('demo')" href="javascript:void(0)">下拉列表 <i class="fa fa-caret-down"></i></a>

    <div id="demo" class="w3-hide">

      <a class="w3-bar-item w3-button" href="#">链接</a>

      <a class="w3-bar-item w3-button" href="#">链接</a>

      <a class="w3-bar-item w3-button" href="#">链接</a>

    </div>

  </div>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-grey" onclick="openMail('Jane');w3_close();">

   <div class="w3-container">

      <img class="w3-round w3-margin-right" src="https://atts.w3cschool.cn/img_avatar1.png" style="width:15%;"><span class="w3-opacity w3-large">Jane Doe</span>

      <p>没有大胆的猜测就作不出伟大的发现。——牛顿...</p>

   </div>

</a>

<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-green w3-large">登录</button>

<input class="w3-input" type="text" style="width:90%" required>

<label>姓名</label></p>

<input class="w3-input" type="password" style="width:90%" required>

<label>密码</label></p>

<div class="w3-row w3-section">

   <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>

   <div class="w3-rest">

         <input class="w3-input w3-border" name="first" type="text" placeholder="First Name">

   </div>

</div>

<div class="w3-display-container w3-text-white">

   <img src="img_london.jpg" alt="Lights" style="width:100%">

   <div class="w3-xlarge w3-display-bottomleft w3-padding">伦敦 60° F</div>

</div>

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

    <p>最新的<br>

    <i><b>按摩椅</b></i><br>

    <span class="w3-xxlarge w3-text-red"><b>哇哦</b></span></p>

    <p><del>$400</del> <span class="w3-tag w3-yellow">全新!</span><br>

    现在只要 $299 !!!</p>

</div>

<div class="w3-third">

  <div class="w3-card-4 w3-container w3-blue w3-round-large">

    <h1><b class="w3-opacity">种树</b></h1>

    <h1><i>拯救世界</i></h1>

  </div>

  <br>

  <div class="w3-card-4 w3-container w3-xlarge w3-yellow w3-round-xlarge">

    <p>新品<br>

    <i><b>按摩椅</b></i><br>

    <span class="w3-jumbo w3-text-red"><b>哇哦</b></span></p>

    <p><del>$400</del> <span class="w3-badge w3-red">6</span><br>

    现在只要 $299 !!!</p>

  </div>

  <br>

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

    <img src="img_vernazza.jpg" alt="Italy" style="width:100%">

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

      <p>读一本好书，就是和许多<br>高尚的人谈话。——歌德</p>

    </div>

  </div>

</div>

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

    <thead class="w3-teal"><th style="width:30%">食物</th><th>种类</th></thead>

    <tr><td style="width:30%">海鲜</td><td>虾, 螃蟹, 龙虾</td></tr>

    <tr><td>肉</td><td>鸡肉, 猪肉</td></tr>

    <tr><td>奶酪</td><td>布里干酪, 格鲁耶尔干酪</td></tr>

    <tr><td>其他</td><td>奶油酱汁</td></tr>

  </table>

<div class="w3-third w3-margin-bottom">

  <ul class="w3-ul w3-border w3-center w3-hover-shadow">

    <li class="w3-black w3-xlarge w3-padding-32">基本</li>

    <li class="w3-padding-16"><b>10GB</b> 存储</li>

    <li class="w3-padding-16"><b>10</b> 电子邮件</li>

    <li class="w3-padding-16"><b>10</b> 域名</li>

    <li class="w3-padding-16"><b>持续的</b> 支持</li>

    <li class="w3-padding-16">

      <h2 class="w3-wide">$ 10</h2>

      <span class="w3-opacity">每个月</span>

    </li>

    <li class="w3-light-grey w3-padding-24">

      <button class="w3-button w3-green w3-padding-large">报名</button>

    </li>

  </ul>

</div>

  </div>

      <a class="w3-bar-item w3-button" href="/html/default.asp">学习 HTML</a>

      <a class="w3-bar-item w3-button" href="/css/default.asp">学习 CSS</a>

      <a class="w3-bar-item w3-button" href="/w3css/default.asp">学习 W3.CSS</a>

      <a class="w3-bar-item w3-button" href="/colors/default.asp">学习 Colors</a>

      <a class="w3-bar-item w3-button" href="/js/default.asp">学习 JavaScript</a>

      <a class="w3-bar-item w3-button" href="/xml/default.asp">学习 XML</a>

      <a class="w3-bar-item w3-button" href="/sql/default.asp">学习 SQL</a>

      <a class="w3-bar-item w3-button" href="/php/default.asp">学习 PHP</a>

  </div>

<div id="nav01" class="w3-bar-block">

  <a class="w3-button w3-hover-teal w3-hide-large w3-large w3-right" href="javascript:void(0)" onclick="w3_close()">×</a>

  <a class="w3-bar-item w3-button w3-border-bottom w3-large" href="#"><img src="https://www.w3schools.com/images/w3schools.png" rel="external nofollow"  style="width:80%;"></a>

  <a class="w3-bar-item w3-button" href="#">学习 HTML</a>

  <a class="w3-bar-item w3-button" href="#">学习 W3.CSS</a>

  <a class="w3-bar-item w3-button" href="#">学习 JavaScript</a>

  <a class="w3-bar-item w3-button" href="#">学习 SQL</a>

  <a class="w3-bar-item w3-button" href="#">学习 PHP</a>

</div>

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

  <img src="img_lights.jpg"  style="width:100%;height:400px">

  <div class="w3-display-middle w3-large">

    <h1 class="w3-jumbo w3-text-white w3-wide"><b>截止时间</b></h1>

  </div>

   <div class="w3-display-bottomright w3-container">

      <p class="w3-text-white w3-xlarge">威尼斯大街8月16-17日</p>

   </div>

</div>

<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3-theme-blue.css">

<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3-theme-teal.css">

<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3-theme-red.css">

尝试一下 »

<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3-theme-green.css">

<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3-theme-black.css">

<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3-theme-amber.css">