免費(fèi)AI編程助手
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>
人一旦覺悟，就會(huì)放棄追尋身外之物，而開始追尋內(nèi)心世界的真正財(cái)富。
</p>
</div>
</div>
<div class="w3-row w3-margin">
嘗試一下 ?
報(bào)紙
<div class="w3-third w3-justify">
<h2>名人名言</h2>
<p>騏驥一躍，不能十步；駑馬十駕，功在不舍；鍥而舍之，朽木不折；鍥而不舍，金石可鏤?！髯?lt;/p>
<p>騏驥一躍，不能十步；駑馬十駕，功在不舍；鍥而舍之，朽木不折；鍥而不舍，金石可鏤?！髯?lt;/p>
<p>騏驥一躍，不能十步；駑馬十駕，功在不舍；鍥而舍之，朽木不折；鍥而不舍，金石可鏤?！髯?lt;/p>
</div>
嘗試一下 ?
報(bào)紙（更多空間）
<div class="w3-third w3-justify w3-container">
<h2>名人名言</h2>
<p>書籍是全世界的營養(yǎng)品，生活里沒有書籍就好像沒有陽光；智慧里沒有書籍就好像鳥兒沒有翅膀。——莎士比亞.</p>
<p>書籍是全世界的營養(yǎng)品，生活里沒有書籍就好像沒有陽光；智慧里沒有書籍就好像鳥兒沒有翅膀?！勘葋?</p>
<p>書籍是全世界的營養(yǎng)品，生活里沒有書籍就好像沒有陽光；智慧里沒有書籍就好像鳥兒沒有翅膀?！勘葋?</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>有勇氣并不表示恐懼不存在，而是敢面對(duì)恐懼、克服恐懼。.</p>
<p>2個(gè)小時(shí)前</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>金錢這種東西，只要能解決個(gè)人的生活就行，若是過多了，它會(huì)成為遏制人類才能的禍害?！Z貝爾</p>
</div>
</div>
嘗試一下 ?
材料設(shè)計(jì)
<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>沒有大膽的猜測就作不出偉大的發(fā)現(xiàn)?！ｎD...</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>
嘗試一下 ?
表單使用圖標(biāo)
<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>
嘗試一下 ?
表單使用圖標(biāo)Ⅱ
<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>
現(xiàn)在只要 $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>
現(xiàn)在只要 $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>高尚的人談話?！璧?lt;/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>
嘗試一下 ?
定價(jià)表
<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> 存儲(chǔ)</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>持續(xù)的</b> 支持</li>
<li class="w3-padding-16">
<h2 class="w3-wide">$ 10</h2>
<span class="w3-opacity">每個(gè)月</span>
</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-green w3-padding-large">報(bào)名</button>
</li>
</ul>
</div>
嘗試一下 ?
主頁
</div>
<a class="w3-bar-item w3-button" href="/html/default.asp">學(xué)習(xí) HTML</a>
<a class="w3-bar-item w3-button" href="/css/default.asp">學(xué)習(xí) CSS</a>
<a class="w3-bar-item w3-button" href="/w3css/default.asp">學(xué)習(xí) W3.CSS</a>
<a class="w3-bar-item w3-button" href="/colors/default.asp">學(xué)習(xí) Colors</a>
<a class="w3-bar-item w3-button" href="/js/default.asp">學(xué)習(xí) JavaScript</a>
<a class="w3-bar-item w3-button" href="/xml/default.asp">學(xué)習(xí) XML</a>
<a class="w3-bar-item w3-button" href="/sql/default.asp">學(xué)習(xí) SQL</a>
<a class="w3-bar-item w3-button" href="/php/default.asp">學(xué)習(xí) 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="#">學(xué)習(xí) HTML</a>
<a class="w3-bar-item w3-button" href="#">學(xué)習(xí) W3.CSS</a>
<a class="w3-bar-item w3-button" href="#">學(xué)習(xí) JavaScript</a>
<a class="w3-bar-item w3-button" href="#">學(xué)習(xí) SQL</a>
<a class="w3-bar-item w3-button" href="#">學(xué)習(xí) 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>截止時(shí)間</b></h1>
</div>
<div class="w3-display-bottomright w3-container">
<p class="w3-text-white w3-xlarge">威尼斯大街8月16-17日</p>
</div>
</div>
嘗試一下 ?
手機(jī)模板
紅色
<link rel="stylesheet" >
嘗試一下 ?
更多建議：