Water.css是一个可以让简单站点样式变得那么好一点的CSS样式合集。
现在你可以使用语义化的HTML书写简单的静态站点了，Water.css会帮你优化样式。
<head>元素中：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">| 文件 | |
|---|---|
| 尺寸 (min + gzip) | |
| 主题 |
没错！无需引入任何其他花里花哨的CSS就可以实现移动端响应式，只需要添加viewport相关的meta信息：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
事实上，你拉伸本页面，就可以看到响应式效果了。
浏览器中的书签本质上是一个JavaScript片段。
你可以把下面的链接拖动到书签栏中，这样原来不美观的那些网站会因为Water.css而看起来舒服一些：
Waterize比较是个演示页面，所以会示意很多元素。
下面是一些代码，你可以使用Ctrl-C进行复制。你知道吗？JavaScript中执行alert(1)会出现提示框。
// 下面代码会在控制台输入一点log信息，同时看看页面的滚动条
console.log('Hello, world!')这是一个水平方向的图像，因为不知道放哪里合适，所以就归类到“其他”了。
美化标记的表格元素
| 名称 | 质量 | 价格 |
|---|---|---|
| Godzilla | 2 | $299.99 |
| Mozilla | 10 | $100,000.00 |
| Quesadilla | 1 | $2.22 |
原文是“Lorem ipsum dolor sit blah blah”，表示一段毫无意义的文字巴拉巴拉……
短语“Lorem ipsum dolor sit amet consectetuer”出现在 Microsoft Word 联机帮助中。它看上去像一句睿智的拉丁习语，但实际上毫无意义。
尽管该短语毫无意义，但它却历史悠久。数个世纪以来，印刷工人一直使用该短语来表现其字体最与众不同的特点。使用该短语是因为其中的字母以及字母组合中的字母间距可以最好地展现所用字体的粗细、设计及其他重要特点。
dialog (form 和 menu) 标签
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字 strong加粗 正常 b标签加粗 em强调 以及链接。
HTML blockquote元素（或HTML Block quote元素）表示所附文本是扩展引号。通常，这是通过缩进直观地呈现的（请参阅注释了解如何更改它）。引用源的URL可以使用cite属性给出，而源的文本表示可以使用<cite>cite元素给出。
地址
zhangxinxu@zhangxinxu.com