视觉样式手册

#01 字号

Small

一杯咖啡不够喝,就当时是一场误会。

Base

一杯咖啡不够喝,就当时是一场误会。

Medium

一杯咖啡不够喝,就当时是一场误会。

Large

一杯咖啡不够喝,就当时是一场误会。

XLarge

一杯咖啡不够喝,就当时是一场误会。

XXLarge

一杯咖啡不够喝,就当时是一场误会。

Huge

一杯咖啡不够喝,就当时是一场误会。

#02按钮

基础

使用我们的工具

辅助版本

使用我们的工具

#03列表

Default lists

ul

ol

  1. 一杯咖啡不够喝,就当时是一场误会
  2. 可以回答曼特宁,桌子上还散落几张滤纸
  3. 向日葵配太阳才存活咖啡要配曲奇才美味
  4. 一杯咖啡不够喝,就当时是一场误会
  5. 可以回答曼特宁,桌子上还散落几张滤纸
  6. 向日葵配太阳才存活咖啡要配曲奇才美味
  7. 一杯咖啡不够喝,就当时是一场误会
  8. 可以回答曼特宁,桌子上还散落几张滤纸
  9. 向日葵配太阳才存活咖啡要配曲奇才美味
  10. 一杯咖啡不够喝,就当时是一场误会
  11. 可以回答曼特宁,桌子上还散落几张滤纸
  1. 一杯咖啡不够喝,就当时是一场误会。
    1. 一杯咖啡不够喝,就当时是一场误会。
    2. 一杯咖啡不够喝,就当时是一场误会。
  2. 一杯咖啡不够喝,就当时是一场误会。
  1. 一杯咖啡不够喝,就当时是一场误会。
    • 一杯咖啡不够喝,就当时是一场误会。
    • 一杯咖啡不够喝,就当时是一场误会。
  2. 一杯咖啡不够喝,就当时是一场误会。

dl

Term
一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。讲,谁没有怨,百灵与夜莺,我,但我不仅不能尽我的责任,你去时也还是一个光亮,卻不是来作客。杭州西溪的芦雪与威尼市夕照的红潮,没福见着你的父亲,更无从悔。
Term
一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。讲,谁没有怨,百灵与夜莺,我,但我不仅不能尽我的责任,你去时也还是一个光亮,卻不是来作客。杭州西溪的芦雪与威尼市夕照的红潮,没福见着你的父亲,更无从悔。
Term
一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。讲,谁没有怨,百灵与夜莺,我,但我不仅不能尽我的责任,你去时也还是一个光亮,卻不是来作客。杭州西溪的芦雪与威尼市夕照的红潮,没福见着你的父亲,更无从悔。

默认连接列表

ul

ol

  1. 一杯咖啡不够喝,就当时是一场误会
  2. 可以回答曼特宁,桌子上还散落几张滤纸
  3. 向日葵配太阳才存活咖啡要配曲奇才美味
  1. 一杯咖啡不够喝,就当时是一场误会
  2. 可以回答曼特宁,桌子上还散落几张滤纸
  3. 向日葵配太阳才存活咖啡要配曲奇才美味

#05图标

圆图标

圆图标-主题

圆图标-大

#06面包屑

#07表格

元素 可用性 描述 描述
src 所有浏览器 提供视频地址(URL)。 提供视频地址(URL)。
poster 所有浏览器 浏览器在展示视频元素且尚未加载视频内容的时候,即刻展现的图像地址(URL)。 浏览器在展示视频元素且尚未加载视频内容的时候,即刻展现的图像地址(URL)。
元素 可用性 描述
src 所有浏览器 提供视频地址(URL)。
poster 所有浏览器 浏览器在展示视频元素且尚未加载视频内容的时候,即刻展现的图像地址(URL)。
元素 可用性
src 规则应用于所有浏览器宽度,覆盖在查询中定义的值。
poster 规则应用于所有浏览器宽度,覆盖在查询中定义的值。

注意: 表格内无法识别markdown,因此所有的代码块都要放在一对<code>标签内。

#08 网格

一致网格类

#09颜色

灰度

主题

Google

帮助

#10 高亮

谨记

Lorem ipsum dolor sit amet consectetur adipisicing elit.

关键要点

Lorem ipsum dolor sit amet consectetur adipisicing elit.

谨记

  • 一杯咖啡不够喝,就当时是一场误会
  • Fugit itaque sapiente earum quo expedita
  • labore aliquam cupiditate veritatis nihil

谨记

Lorem ipsum dolor sit amet consectetur adipisicing elit.

    <!DOCTYPE html>
    <html lang="en">
      <head>
            <title>Article Example: sample example</title>
      </head>
      <body>
        <div role="main">
          Hello, world.
        </div>
        </body>
    </html>
    
查看完整示例
<meta name="viewport" content="width=device-width, initial-scale=1.0">

你可以添加行内代码块来对你的内容进行说明。

关键要点

  • 一杯咖啡不够喝,就当时是一场误会
  • Fugit itaque sapiente earum quo expedita
  • labore aliquam cupiditate veritatis nihil

Remember

  • 一杯咖啡不够喝,就当时是一场误会
  • Fugit itaque sapiente earum quo expedita
  • labore aliquam cupiditate veritatis nihil

#11文章头部

布局基础

什么是viewport?

一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。好可爱,奇迹,滤纸是招你还是惹你了。好可爱,奇迹,滤纸是招你还是惹你了。

一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。好可爱,奇迹,滤纸是招你还是惹你了。像吃中成药一样吞速溶颗粒直接喝水的记忆实在比较惨烈;二是两年前发现速溶谱系里也有挂耳这么高端的一族之后,十大原罪可以哦,中午连眯一会的地方都没有。

#12文章部分

4 可用指导
  1. 一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。我对你,可是唱片只有这一盘吗?可愛是火柴盒包裝。

  2. 一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。我对你,可是唱片只有这一盘吗?可愛是火柴盒包裝。

  3. 一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。我对你,可是唱片只有这一盘吗?可愛是火柴盒包裝。

  4. 一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。我对你,可是唱片只有这一盘吗?可愛是火柴盒包裝。

#13指导部分

文档

用户可以在任何设备上随意浏览根据本指南建立的网站内容

#14 页面头部

#15 引用

一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。这次我再来欧洲你已经早一个星期回去,所以只有你单身奔赴大自然的怀抱时,今天已是壮年;昨天腮边还带着圆润的笑涡,是贝德花芬是槐格纳你就爱,他们是顶可爱的好友,我才觉着骨肉的关连?

名字 / 细节

#16 指导介绍

#17文章导航

#18 下一课

#19 相关项目

#20 你知道吗

为何移动先行

Body - 它当真简单。我们创建一个基础页面并加入一个“视口”。这个视口是你要建立一个移动先行体验站点的最关键部件。没有它,你的站点将无法在移动设备上表现良好。

课程

查看所有课程

#21最新焦点

#22媒体元素

#23 案例研究

标题扔这

一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。他音乐的兴趣已经很深:他比着手势告我他也有一张提琴,我想他听你欣欣的回报这番作客只尝甜浆,只要把话匣开上,觉着心里有一个尖锐的刺痛,我想他听你欣欣的回报这番作客只尝甜浆,这问的后身便是无限的隐痛。

一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。讲,谁没有怨,百灵与夜莺,我,但我不仅不能尽我的责任,你去时也还是一个光亮,卻不是来作客。杭州西溪的芦雪与威尼市夕照的红潮,没福见着你的父亲,更无从悔。
一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。讲,谁没有怨,百灵与夜莺,我,但我不仅不能尽我的责任,你去时也还是一个光亮,卻不是来作客。杭州西溪的芦雪与威尼市夕照的红潮,没福见着你的父亲,更无从悔。
一杯咖啡不够喝,就当时是一场误会若不在意它是老鼠。讲,谁没有怨,百灵与夜莺,我,但我不仅不能尽我的责任,你去时也还是一个光亮,卻不是来作客。杭州西溪的芦雪与威尼市夕照的红潮,没福见着你的父亲,更无从悔。
image placeholder

#24我们的观点

我们的观点

不错的地方

  • 欢迎来到篮球现在我们不推发酵的酵母。我是一个时而紧张。
  • 欢迎来到篮球现在我们不推发酵的酵母。我是一个时而紧张。
  • 欢迎来到篮球现在我们不推发酵的酵母。我是一个时而紧张。

仍待提高

  • 欢迎来到篮球现在我们不推发酵的酵母。我是一个时而紧张。
  • 欢迎来到篮球现在我们不推发酵的酵母。我是一个时而紧张。
  • 欢迎来到篮球现在我们不推发酵的酵母。我是一个时而紧张。

#25特性亮点

#26特性列表

回到顶部