精美响应式网站

使用 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

容器

使用容器来创建标题、部分和页脚。

标题

伦敦

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

伦敦位于泰晤士河畔,是一个拥有两千年历史的主要定居点,其历史可以追溯到罗马人建立它的时候,罗马人将其命名为伦敦。

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


颜色主题

颜色主题经过精心设计,能够彼此和谐地搭配。

主题靛蓝

2014 年电影

  • 冰雪奇缘

    动画的反馈真是太棒了

  • 星运里的错

    感人、扣人心弦,而且制作精良

  • 复仇者联盟

    漫威和迪士尼取得了巨大成功

下一个

主题

2014 年电影

  • 冰雪奇缘

    动画的反馈真是太棒了

  • 星运里的错

    感人、扣人心弦,而且制作精良

  • 复仇者联盟

    漫威和迪士尼取得了巨大成功

下一个

带阴影的类似纸张的卡片

Car

w3-card

Car

w3-card-4

Car

w3-card-4


表格

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

名字 姓氏 分数
吉尔 史密斯 50
伊芙 杰克逊 94
亚当 约翰逊 67

表单和列表

输入表单







列表

  • 吉尔
  • 伊芙
  • 亚当

  • 吉尔
  • 伊芙
  • 亚当
  • 史蒂夫


进度条

0


幻灯片


导航

首页 链接 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

带有图片的手风琴

法国阿尔卑斯山


标签

伦敦

伦敦是英格兰的首都。

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

巴黎

巴黎是法国的首都。

巴黎地区是欧洲最大的居民中心之一,拥有超过 1200 万居民。

东京

东京是日本的首都。

它是东京都市区的中心,也是世界上人口最多的都市区。


按钮


按钮 按钮 按钮



分页

« 1 2 3 4 5 »