精美的响应式网站

使用 W3.CSS 构建

×

哦,天哪!我们刚向您展示了一个模态框。

因为我们可以

很酷吧?好吧,别再逗您了……

前往我们的 W3.CSS 教程 了解更多!

响应式


内置响应式

移动优先的流式栅格

适应任何屏幕尺寸

PC、平板和手机

标准 CSS


仅标准 CSS

易于学习

无需 jQuery

无 JavaScript 库

设计


纸质般的设计

鲜艳的色彩和阴影

跨平台一致

跨设备一致


颜色类

红色

蓝色

蓝灰色

水鸭色

黄色

橙子


内置响应式

调整页面大小以查看效果!


w3-half

`w3-half` 类使用屏幕窗口的一半(50%)。

在小屏幕上(最大 600 像素),它会自动调整为全屏宽度。

w3-half

w3-third

w3-third 类占据屏幕宽度的三分之一 (33.33%)。

在小屏幕上(最大 600 像素),它会自动调整为全屏宽度。

w3-third
w3-third

w3-quarter

`w3-quarter` 类使用屏幕窗口的四分之一(25%)。

在小屏幕上(最大 600 像素),它会自动调整为全屏宽度。

w3-quarter
w3-quarter
w3-quarter

容器

使用容器创建标题、节和页脚。

Header

London

伦敦是英格兰的首都。它是英国人口最多的城市,都市区有超过 1300 万居民。

伦敦坐落在泰晤士河畔,两千年来一直是一个重要的定居点,其历史可以追溯到罗马人建立并将其命名为伦敦尼亚姆。

顺便说一句,您可以为所有容器添加关闭图标,如果您想隐藏它们。看您右边!


颜色主题

颜色主题的设计旨在和谐共存。

靛蓝主题

电影 2014

  • 冰雪奇缘

    动画的反应很荒谬

  • 星运里的错

    感人、 gripping 且制作精良

  • 复仇者联盟

    对漫威和迪士尼来说是巨大的成功

下一步

主题

电影 2014

  • 冰雪奇缘

    动画的反应很荒谬

  • 星运里的错

    感人、 gripping 且制作精良

  • 复仇者联盟

    对漫威和迪士尼来说是巨大的成功

下一步

带有阴影的纸质卡片

Car

w3-card

Car

w3-card-4

Car

w3-card-4


表格

别担心。W3.CSS 会处理您的表格。

名字 姓氏 分数
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

表单和列表

输入表单







列表

  • Jill
  • Eve
  • Adam

  • Jill
  • Eve
  • Adam
  • 史蒂夫


进度条

5%


幻灯片


导航

主页 链接 1

手风琴

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.

链接 1 链接 2 链接 3

带图片的折叠面板

法国阿尔卑斯山


标签页

London

伦敦是英格兰的首都。

它是英国人口最多的城市,都会区拥有超过 1300 万居民。

巴黎

巴黎是法国的首都。

巴黎地区是欧洲最大的聚居地之一,人口超过 1200 万。

东京

东京是日本的首都。

它是大东京地区的核心,也是世界上人口最多的都会区。


按钮


按钮 按钮 按钮



分页

« 1 2 3 4 5 »