免费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>
人一旦觉悟，就会放弃追寻身外之物，而开始追寻内心世界的真正财富。
</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-red.css">
尝试一下 »
更多建议：