什么是W3.CSS?

W3
CSS

现代响应式 CSS

所有浏览器的平等:Chrome。 火狐边缘。 IE。 苹果浏览器。 歌剧。

所有设备的平等:桌面。 笔记本电脑。 药片。 手机。

仅标准 CSS(无 jQuery 或 JavaScript 库)。


W3.CSS 快速入门

W3.CSS 是一个具有内置响应能力的现代 CSS 框架。 默认支持响应式移动优先设计,比同类CSS框架更小更快。

W3.CSS 还可以加快和简化 Web 开发,因为它比其他 CSS 框架更易于学习和使用。


Responsive Page

实例

<div class="w3-center w3-padding-64 w3-light-grey">
  <h1>My W3.CSS Page</h1>
  <p>Resize this page to see the responsive effect!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
Try W3.CSS » Try Bootstrap »

点击 "亲自试一试" 按钮查看运行结果。



W3.CSS 容器

w3-container 类是最重要的 W3.CSS 类之一。

它为大多数 HTML 元素提供正确的边距、填充、对齐等。

实例

<div class="w3-container">
    <h1>This is a paragraph</h1>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
</div>
Try W3.CSS » Try Bootstrap »

W3.CSS 颜色

w3-color 类的灵感来自现代色彩:

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

实例

<div class="w3-container w3-indigo">
  <p>London is the most populous city in the United Kingdom.</p>
</div>

<div class="w3-container w3-blue">
  <p>London is the most populous city in the United Kingdom.</p>
</div>

<div class="w3-container w3-red">
  <p>London is the most populous city in the United Kingdom.</p>
</div>

<div class="w3-container w3-amber">
  <p>London is the most populous city in the United Kingdom.</p>
</div>
Try W3.CSS » Try Bootstrap »

W3.CSS 警告、注释和引用

w3-panel类可以显示各种alertsnotesquotes

Danger!

Red often indicates a dangerous or negative situation.

Warning!

Yellow often indicates a warning that might need attention.

Success!

Green often indicates something successful or positive.

Info!

Blue often indicates a neutral informative change or action.

Danger!

Red often indicates a dangerous or negative situation.

Warning!

Yellow or orange often indicates a warning that might need attention.

Success!

Green often indicates something successful or positive.

Info!

Blue often indicates a neutral informative change or action.

实例

<div class="w3-panel w3-red">
    <h3>Danger!</h3>
    <p>Red often indicates a dangerous or negative situation.</p>
</div>

<div class="w3-panel w3-yellow">
    <h3>Warning!</h3>
    <p>Yellow or orange often indicates a warning that might need attention.</p>
</div>
Try W3.CSS » Try Bootstrap »

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

"Make it as simple as possible, but not simpler."

Albert Einstein

实例

<div class="w3-panel w3-light-grey w3-border w3-round-xlarge">
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-panel w3-pale-red w3-leftbar w3-border-red">
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
亲自试一试 »

W3.CSS 卡片

w3-card 类适用于图像和注释:

Amazing

Alps

French Alps

A Car

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, and to typically have four wheels.

(Wikipedia)


Avatar

John

Architect and Engineer

实例

<div class="w3-card-4" style="max-width:300px;">
  <img src="img_avatar3.png" alt="Avatar" style="width:100%">
  <div class="w3-container">
    <h4><b>John</b></h4>
    <p>Architect and Engineer</p>
  </div>
</div>
Try W3.CSS » Try Bootstrap »

W3.CSS 表格

w3-table 类可以处理各种表格:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Anja Bore 100

实例

<table class="w3-table w3-bordered w3-striped w3-border">
<thead class="w3-dark-grey">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</tbody>
</table>
Try W3.CSS » Try Bootstrap »

W3.CSS 列表

w3-ul 类可以处理各种列表:

  • × Mike
    Web Designer
  • × Jill
    Support
  • × Jane
    Accountant
  • × Jack
    Advisor

W3.CSS 按钮

w3-buttonw3-btn 类提供各种尺寸的按钮 和类型。

Wide buttons:

Circular or square buttons:

+ + +

+ + +


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

w3-tag w3-badge 类能够显示各种标签、标签、徽章和标志:

2 8 A B

New Warning Danger Info

Falcon Ridge Parkway

S
A
L
E

DO NOT
BREATHE
UNDER WATER

W3.CSS 响应式

响应式网格类为所有设备类型提供响应能力:PC、笔记本电脑、平板电脑和移动设备。

1/2

1/2

1/3

1/3

1/3

1/3

2/3

1/4

1/4

1/4

1/4

1/2

1/4

1/4

2/3

1/3

1/1

1/4

1/4

1/2

1/4

1/2

1/4

50px

rest

1/4

rest

100px

45px

rest

W3.CSS 还支持 12 列移动优先流体网格,包括小型、中型和 大班。


W3.CSS 显示

w3-display 类允许您在特定位置显示 HTML 元素:

Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle

Pants
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle

W3.CSS 模态

w3-modal 类在纯 HTML 中提供模式对话框:

×

Header

Some text. Some text. Some text.

Some text. Some text. Some text.

Footer



Modal Image:

Nature
×
Nature

W3.CSS 进度条

W3.CSS 进度条上了解更多信息

25%

50%

0


W3.CSS 下拉菜单

w3-dropdown 类提供下拉菜单:


W3.CSS 手风琴

W3.CSS Accordions 上阅读更多信息

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion with Images:

French Alps


W3.CSS 选项卡

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

London

London is the capital of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.


标签式图片库(点击其中一张图片):


Nature ×
Nature
Snow ×
Snow
Mountains ×
Mountains
Lights ×
Northern Lights

W3.CSS 导航

w3-bar类可用于创建导航栏:

Navigation bar with input:

Navigation bar with dropdown:


w3-sidebar 类创建侧边导航:


W3.CSS 分页

W3.CSS 为页面分页提供了简单的方法。

« 1 2 3 4 5 »



幻灯片

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

1 / 3
Beautiful Nature
2 / 3
French Alps
3 / 3
Mountains

灯箱

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

×

Nature and sunrise
French Alps
Mountains and fjords

W3.CSS 动画

w3-animate 类提供了一种滑动和淡入元素的简单方法:


Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!

W3.CSS 图像

在 W3CSS 中设置 图像 很简单:

Northern Lights
Forest
Mountains
Nature
Nature

W3.CSS 效果

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

Normal

Opacity

Grayscale

Sepia


W3.CSS 输入表单

w3-input 类用于输入表单:



Input Form


Input Form



W3.CSS 过滤器

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

名称 Country
Alfreds Futterkiste Germany
Berglunds snabbkop Sweden
Island Trading UK
Koniglich Essen Germany
Laughing Bacchus Winecellars Canada
Magazzini Alimentari Riuniti Italy
North/South UK
Paris specialites France

W3.CSS 字体

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

Making the web beautiful!
Making the web!

W3.CSS 工具提示

w3-tooltip类可以显示各种工具提示:

Hover over this text! Tooltip content

Hover over this text! Tooltip content


颜色主题

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

Theme Indigo

Movies 2014

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

  • The Avengers

    A huge success for Marvel and Disney

«»

Theme Teal

Movies 2014

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

  • The Avengers

    A huge success for Marvel and Disney

«»

Color themes are a perfect match for mobile applications.


完整的 W3.CSS 教程

这是对 W3.CSS 的简短描述。

如需完整的 W3.CSS 教程,请访问 W3Schools W3.CSS 教程

如需完整的 W3.CSS 参考,请访问 W3Schools W3.CSS 参考