W3.CSS 简介 (Kitchen Sink)

W3.CSS 容器

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

  • 常用边距
  • 常用填充
  • 常用的垂直对齐
  • 常用的水平路线
  • 常用字体
  • 常用颜色

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

<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, and more.

这是页眉

这篇文章是浅灰色的,正文是棕色的。 这篇文章是浅灰色的,正文是棕色的。 这篇文章是浅灰色的,正文是棕色的。 这篇文章是浅灰色的,正文是棕色的。 这篇文章是浅灰色的,正文是棕色的。

这是页脚。


W3.CSS 面板、注释和引号

w3-panel 面板类可以显示各种注释和引号:

伦敦是英国人口最多的城市,拥有超过900万居民的大都市区。


伦敦是英国人口最多的城市,拥有超过900万居民的大都市区。


伦敦是英国人口最多的城市,拥有超过900万居民的大都市区。


伦敦是英国人口最多的城市,拥有超过900万居民的大都市区。


"使它尽可能简单,但不要简单。"

艾尔伯特爱因斯


W3.CSS 警报

w3-panel 类还可用于各种警报:

×

危险!

红色通常表示危险或消极的情况。

×

警告!

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

×

成功!

绿色通常表示成功或积极的事情。

×

信息!

蓝色通常表示中性信息变化或行动。

实例

<div class="w3-panel w3-yellow">
  <h3>Warning!</h3>
  <p>Yellow often indicates a warning that might need attention.</p>
</div>
亲自试一试 »

W3.CSS 卡片

w3-card 卡片类适用于图像和注意事项:

A Car

汽车是一种用于运输的轮式、自驱动机动车。这个词的大多数定义都规定汽车主要在公路上行驶,有一到八个人的座位,通常有四个轮子。

(维基百科)

壮观

Car

法国阿尔卑斯山

实例

<div class="w3-card-4">
  <img src="img_snowtops.jpg" alt="Alps">
  <div class="w3-container w3-center">
   <p>French Alps</p>
  </div>
</div>
亲自试一试 »

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-striped w3-border">
亲自试一试 »

W3.CSS 列表

w3-ul 类可以处理所有类型的列表:

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

实例

<ul class="w3-ul w3-border">
  <li><h2>Names</h2></li>
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
亲自试一试 »

W3.CSS 按钮

w3-buttonw3-btn 类提供所有尺寸和类型的按钮。

宽按钮:

圆形或方形按钮:

+ + +

+ + +


W3.CSS Tags, Labels, Badges, 和 Signs

w3-tagw3-badge 类是能够显示各种吊牌,标签,徽章和标志:

2 8 A B

New Warning Danger Info

Falcon Ridge Parkway

S
A
L
E

DO NOT
BREATHE
UNDER WATER

W3.CSS 响应式

Responsive Grid 响应网格类为所有设备类型提供响应能力: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元素

左上角
右上角
左下角
右下角
左边
右边
中间
中上部
中下部

Pants
左上角
右上角
左下角
右下角
左边
右边
中间
中上部
中下部

W3.CSS 模态

w3-modal 模态类提供纯 HTML 格式的模态对话框:

×

标题

Some text. Some text. Some text.

Some text. Some text. Some text.

页脚



模态图像:

Nature
×
Nature

W3.CSS 进度条

W3.CSS 进度栏 阅读更多内容。

25%

50%

0


W3.CSS 下拉菜单

w3-dropdown 下拉列表类提供下拉列表:


W3.CSS 折叠块

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

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 选项卡

Tabs 选项卡非常适合于单页 web 应用程序,或者适合于能够显示不同主题的 web 页面。

伦敦

London is the capital of England.

It is the most populous city in the United Kingdom, 拥有超过 900 万居民的大都市区。

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 导航类可以用来创建一个导航栏:

带输入的导航栏:

带下拉菜单的导航栏:


w3-sidebar 类创建一个侧部导航:


W3.CSS 分页

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

« 1 2 3 4 5 »



幻灯片

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

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

灯箱

结合 ModalsSlideshows 创建灯箱(模态图像库):

×

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 效果

向任何元素添加特殊 效果(effects):

Normal

Opacity

Grayscale

Sepia


W3.CSS 输入表单

w3-input 输入类用于输入表单:



输入表单


输入表单



W3.CSS 过滤器

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

名称 地区
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 向网页添加 字体 非常容易:

Making the web beautiful!
Making the web!

W3.CSS 工具提示

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

Hover over this text! Tooltip content

Hover over this text! Tooltip content


色彩主题

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

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

«»

颜色主题非常适合移动端应用程序。