CSS 经典实例汇总

css3基础 2022-05-23 12:10:36小码哥的IT人生shichen

CSS 实例

CSS 语法

完整实例【CSS 语法】：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
  text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>这些段落是通过 CSS 设置样式的。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 选择器

实例解释：CSS 选择器

完整实例【元素选择器】：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>
<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【id 选择器】：

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【类选择器（针对所有元素）】：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【类选择器（只针对 <p> 元素）】：

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落将是红色并居中对齐的。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【引用两个类的 HTML 元素】：

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
p.large {
  font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">本段将是红色并居中对齐。</p>
<p class="center large">本段将是红色、居中对齐，并使用大字体。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【通用选择器】：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【分组选择器】：

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>更小的标题</h2>
<p>这是一个段落。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 使用

实例解释：如何添加 CSS

完整实例【外部 CSS】：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/demo/css/mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【内部 CSS】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【行内 CSS】：

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">这是标题</h1>
<p style="color:red;">这是一个段落。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【多个样式表】：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/demo/css/mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>本文档的样式是外部样式表和内部样式的组合。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【层叠顺序】：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/demo/css/mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>多重样式会层叠为一</h1>
<p>在此处，本页面的背景色同时由行内 CSS、内部 CSS 或外部 CSS 设置。</p>
<p>请尝试通过删除样式来查看级联样式表的工作方式（尝试首先删除行内 CSS，然后是内部，最后是外部）。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 注释

实例解释：CSS 注释

完整实例【单行注释】：

<!DOCTYPE html>
<html>
<head>
<style>
/* 这是单行注释 */
p {
  color: red;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>这段文本由 CSS 设置样式。</p>
<p>CSS 注释不会在输出中显示。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【多行注释】：

<!DOCTYPE html>
<html>
<head>
<style>
/* 这是
多行的
注释 */
p {
  color: red;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>这段文本由 CSS 设置样式。</p>
<p>CSS 注释不会在输出中显示。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 颜色

实例解释：CSS 颜色

完整实例【设置颜色的背景色】：

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置文本颜色】：

<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p style="color:MediumSeaGreen;">The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置边框颜色】：

<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置不同的颜色值】：

<!DOCTYPE html>
<html>
<body>
<p>与颜色名称 "Tomato" 等同：</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>与颜色名称 "Tomato" 等同，但是有 50% 透明度：</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
<p>除了预定义的颜色名称之外，还可以使用 RGB、HEX、HSL 指定颜色，甚至可以使用 RGBA 或 HSLA 颜色值指定带透明度的颜色。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置 RGB 值】：

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
<p>在 HTML 中，您可使用 RGB 值规定颜色。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置 HEX 值】：

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
<p>在 HTML 中，您可以使用十六进制值规定颜色。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置 HSL 值】：

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>
<p>在 HTML 中，您可以使用 HSL 值来设置颜色。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 背景

实例解释：背景属性

完整实例【设置页面的背景色】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>此页面拥有浅蓝色背景色！</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置不同元素的背景色】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color 实例</h1>
<div>
这是 div 元素内的文本。
<p>本段有其自己的背景色。</p>
我们仍然在 div 元素中。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【把图像设置为页面背景】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("/i/paper.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>此页面以图像为背景！</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【如何只在水平方向重复背景图像】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("/i/css/gradient_bg.png");
  background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>在这里，背景图像仅在水平方向上重复！</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【如何定位背景图像】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("/i/photo/tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>phpcodeweb 不重复并设置位置的背景实例。</p>
<p>现在，背景图像仅显示一次，并且位置与文本分开。</p>
<p>在此例中，我们还在右侧添加了外边距，因此背景图片将永远不会干扰文本。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【固定的背景图像（该图像不会随着页面的其余部分滚动）】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("/i/photo/tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: fixed;
}
</style>
</head>
<body>
<h1>background-attachment 属性</h1>
<p>background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分滚动）。</p>
<p><b>提示：</b>如果看不到任何滚动条，请尝试调整浏览器窗口的大小。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【所有背景属性在一条声明中】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: #ffffff url("/i/photo/tree.png") no-repeat right top;
  margin-right: 200px;
}
</style>
</head>
<body>
<h1>background 属性</h1>
<p>background 属性是在一条声明中指定所有背景属性的简写属性。</p>
<p>在这里，背景图像只显示一次，并位于右上角。</p>
<p>我们还添加了右外边距，以使文本不会覆盖背景图片。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【高级背景实例】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin-left: 200px;
  background: #5d9ab2 url("/i/photo/tree.png") no-repeat top left;
}
.center_div {
  border: 1px solid gray;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  background-color: #d0f0f6;
  text-align: left;
  padding: 8px;
}
</style>
</head>
<body>
<div class="center_div">
  <h1>Hello World!</h1>
  <p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 边框

实例解释：边框属性

完整实例【设置左边框的宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: solid;
  border-left-width: 15px;
}
</style>
</head>
<body>
<p><b>注释：</b>如果单独使用，"border-left-width" 属性不起作用。请首先使用 "border-style" 属性来设置边框。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置四条边框的样式】：

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h1>border-style 属性</h1>
<p>此属性规定要显示的边框类型：</p>
<p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置下边框的样式】：

<!DOCTYPE html>
<html>
<head>
<style>
p {border-style: solid;}
p.none {border-bottom-style: none;}
p.dotted {border-bottom-style: dotted;}
p.dashed {border-bottom-style: dashed;}
p.solid {border-bottom-style: solid;}
p.double {border-bottom-style: double;}
p.groove {border-bottom-style: groove;}
p.ridge {border-bottom-style: ridge;}
p.inset {border-bottom-style: inset;}
p.outset {border-bottom-style: outset;}
</style>
</head>
<body>
<p class="none">无下边框。</p>
<p class="dotted">点状下边框。</p>
<p class="dashed">虚线下边框。</p>
<p class="solid">实线下边框。</p>
<p class="double">双线下边框。</p>
<p class="groove">凹槽下边框。</p>
<p class="ridge">垄状下边框。</p>
<p class="inset">内陷下边框。</p>
<p class="outset">凸出下边框。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置四条边框的颜色】：

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: #0000ff;
}
p.two {
  border-style: solid;
  border-color: #ff0000 #0000ff;
}
p.three {
  border-style: solid;
  border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
  border-style: solid;
  border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="one">一种颜色的边框！</p>
<p class="two">两种颜色的边框！</p>
<p class="three">三种颜色的边框！</p>
<p class="four">四种颜色的边框！</p>
<p><b>注释：</b>如果单独使用，"border-color" 属性不起作用。请首先使用 "border-style" 属性来设置边框。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置右边框的颜色】：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: solid;
  border-right-color: #ff0000;
}
</style>
</head>
<body>
<p>这是段落中的一些文本。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【所有边框属性在一条声明中】：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>
<h1>border 属性</h1>
<p>此属性是 border-width、border-style 以及 border-color 的简写属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【为元素添加圆角】：

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
}
p.round1 {
  border: 2px solid red;
  border-radius: 5px;
}
p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}
p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}
</style>
</head>
<body>
<h1>border-radius 属性</h1>
<p>此属性用于为元素添加圆角：</p>
<p class="normal">普通边框</p>
<p class="round1">圆角边框</p>
<p class="round2">角更圆的边框</p>
<p class="round3">角最圆的边框</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【所有上边框属性在一条声明中】：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: solid;
  border-top: thick double #ff0000;
}
</style>
</head>
<body>
<p>这是段落中的一些文本。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 外边距

实例解释：外边距属性

完整实例【为元素的各边规定不同的外边距】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>使用单独的外边距属性</h1>
<div>这个 div 元素的上外边距为 100 像素，右外边距是 150 像素，下外边距是 100 像素，左外边距是 80 像素。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用带有四个值的简写 margin 属性】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>简写属性 margin - 4 个值</h1>
<div>这个 div 元素的上外边距是 25 像素，右外边距是 50 像素，下外边距是 75 像素，左外边距是 100 像素。</div>
<hr>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用带有三个值的简写 margin 属性】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>简写属性 margin - 3 个值</h1>
<div>div 元素的上外边距是 25 像素，左右外边距是 50 像素，而下外边距是 75 像素。</div>
<hr>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用带有两个值的简写 margin 属性】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>简写属性 margin - 2 个值</h1>
<div>div 元素的上下外边距是 25 像素，左右外边距是 50 像素。</div>
<hr>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用带有一个值的简写 margin 属性】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>简写属性 margin - 1 个值</h1>
<div>div 元素的上、下、左、右外边距均为 25 像素。</div>
<hr>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【把外边距设置 auto，来居中其容器内的元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width:300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>
<h1>使用 margin:auto</h1>
<p>您可以将 margin 属性设置为 auto 以自动将元素在其容器中水平居中。然后，该元素将占据指定的宽度，剩余空间将在左右外边距之间平均分配：</p>
<div>
由于 margin: auto;，这个 div 将水平居中。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【让左外边距继承父元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>
<h1>使用继承值</h1>
<p>左外边距继承自父元素：</p>
<div>
<p class="ex1">本段落继承了 div 元素的左外边距。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【外边距合并】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  margin: 0 0 50px 0;
}
h2 {
  margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>在此例中，h1 元素的下外边距为 50px，h2 元素的上外边距为 20px。然后，h1 和 h2 之间的垂直外边距应为 70px（50px + 20px）。但是，由于外边距叠加，实际外边距最终为 50px。</p>
<h1>标题 1</h1>
<h2>标题 2</h2>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 内边距

实例解释：内边距属性

完整实例【为元素的各边规定不同的内边距】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>
<h1>使用单独的内边距属性</h1>
<div>这个 div 元素的上内边距是 50px，右内边距是 30px，下内边距是 50px，左内边距是 80px。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用带有四个值的简写内边距】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>简写的内边距属性 - 4 个值</h1>
<div>这个 div 元素的上内边距是 25px，右内边距是 50px，下内边距是 75px，而左内边距是 100px。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用带有三个值的简写内边距】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>简写的内边距属性 - 3 个值</h1>
<div>这个 div 元素的上内边距是 25px，左右内边距是 50px，下内边距是 75px。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用带有两个值的简写内边距】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>简写的内边距属性 - 2 个值</h1>
<div>这个 div 元素的上、下内边距为 25 像素，左、右内边距为 50 像素。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用带有一个值的简写内边距】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>简写的内边距属性 - 1 个值</h1>
<div>这个 div 元素的上、下、左、右内边距均为 25 像素。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【内边距和元素宽度（不设置 box-sizing）】：

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}
div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>内边距和元素宽度</h1>
<div class="ex1">这个 div 是 300 像素宽。</div>
<br>
<div class="ex2">这个 div 是 350 像素宽，即使在 CSS 中它被定义为 300 像素。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【内边距和元素宽度（设置 box-sizing）】：

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}
div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>内边距和元素宽度 - 设置  box-sizing</h1>
<div class="ex1">这个 div 是 300 像素宽。</div>
<br>
<div class="ex2">div 的宽度保持在 300 像素，尽管总的左右内边距为 50 像素，因为设置了 box-sizing: border-box 属性。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 高度/宽度

实例解释：定位属性

完整实例【设置元素的高度和宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</style>
</head>
<body>
<h1>设置元素的高度和宽度</h1>
<p>这个 div 元素的高度为 200 像素，宽度为 50%：</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置元素的最大宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>
<h1>设置元素的最大宽度</h1>
<p>这个 div 元素的高度为 100 像素，最大宽度为 500 像素：</p>
<div></div>
<p>请调整浏览器窗口来查看效果。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置不同元素的高度和宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
img.one {
  height: auto;
}
img.two {
  height: 200px;
  width: 200px;
}
div.three {
  height: 300px;
  width: 300px;
  background-color: powderblue;
}
</style>
</head>
<body>
<h1>设置元素的高度和宽度</h1>
<p>原始图像：</p>
<img class="one" src="/i/photo/tulip.jpg" width="300" height="300"><br>
<p>尺寸调整后的图像 (200x200 像素)：</p>
<img class="two" src="/i/photo/tulip.jpg" width="300" height="300"><br>
<p>这个 div 的高度和宽度是 300px：</p>
<div class="three"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用百分百来设置图像的高度和宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
}
img.one {
  height: auto;
  width: auto;
}
img.two {
  height: 50%;
  width: 50%;
}
</style>
</head>
<body>
<h1>以百分比设置元素的高度和宽度</h1>
<p>请调整浏览器窗口大小以查看效果。</p>
<p>原始图像：</p>
<img class="one" src="/i/photo/tulip.jpg" width="300" height="300"><br>
<p>尺寸调整后的图像（以百分比计）：</p>
<img class="two" src="/i/photo/tulip.jpg" width="300" height="300">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置元素的最小宽度和最大宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 400px;
  min-width: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>
<h1>设置元素的最大宽度和最小宽度</h1>
<p>请调整浏览器窗口大小以查看效果。</p>
<div>这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置元素的最小高度和最大高度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-height: 600px;
  min-height: 400px;
  background-color: powderblue;
}
</style>
</head>
<body>
<h1>设置元素的最大高度和最小高度</h1>
<p>请调整浏览器窗口大小以查看效果。</p>
<div>这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 盒模型

实例解释：盒模型

完整实例【演示盒模型】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>
<h1>演示</h1>
<p>CSS 盒模型（框模型）实质上是一个包装每个 HTML 元素的盒子。它包括：边框、内边距（填充）、外边距以及实际的内容。</p>
<div>此文本是盒子里的内容。我们添加了 50px 的内边距，20px 的外边距和 15px 的绿色边框。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定总宽度为 250 像素的元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>
<h1>计算总宽度：</h1>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>上面的图片宽 350 像素。此因素的总宽也是 350 像素。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 轮廓

实例解释：轮廓属性

完整实例【设置轮廓的样式】：

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<h1>outline-style 属性</h1>
<p class="dotted">点状轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓。效果取决于 outline-color 值。</p>
<p class="ridge">凸脊轮廓。效果取决于 outline-color 值。</p>
<p class="inset">凹边轮廓。效果取决于 outline-color 值。</p>
<p class="outset">凸边轮廓。效果取决于 outline-color 值。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置轮廓的颜色】：

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}
p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}
p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}
</style>
</head>
<body>
<h1>outline-color 属性</h1>
<p>outline-color 属性用于设置轮廓的颜色。</p>
<p class="ex1">红色的实线轮廓。</p>
<p class="ex2">蓝色的点状轮廓。</p>
<p class="ex3">灰色的实线轮廓。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 outline-color：翻转轮廓】：

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}
</style>
</head>
<body>
<h1>使用 outline-color:invert</h1>
<p class="ex1">invert 实线轮廓</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置轮廓的宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}
p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}
p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}
p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}
</style>
</head>
<body>
<h1>outline-width 属性</h1>
<p class="ex1">细的轮廓。</p>
<p class="ex2">中等的轮廓。</p>
<p class="ex3">粗的轮廓。</p>
<p class="ex4">4 像素的粗轮廓。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用简写的轮廓属性】：

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>
<h1>outline 属性</h1>
<p class="ex1">点状轮廓。</p>
<p class="ex2">红色的点状轮廓。</p>
<p class="ex3">5 像素的黄色实线轮廓。</p>
<p class="ex4">粗的粉色凸脊轮廓。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【在元素的轮廓与边框之间添加空间】：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>
<h1>outline-offset 属性</h1>
<p>本段落在边框边缘外 15 像素处有一条轮廓线。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 文本

实例解释：文本属性

完整实例【设置不同元素的文本色】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}
h1 {
  color: green;
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<p>这是一段普通的段落。请注意文本为蓝色。页面的默认文本颜色在 body 选择器中定义。</p>
<p>另一段文本。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【对齐文本】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}
</style>
</head>
<body>
<h1>标题 1（居中对齐）</h1>
<h2>标题 2（左对齐）</h2>
<h3>标题 3（右对齐）</h3>
<p>上面的三个标题是居中、左和右对齐。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【删除链接下面的线】：

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>
<p>没有下划线的链接：<a href="https://www.phpcodeweb.com">phpcodeweb.com</a></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【修饰文本】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}
h2 {
  text-decoration: line-through;
}
h3 {
  text-decoration: underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【控制文本中的字母大小写】：

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【缩进文本】：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 50px;
}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定字符间距】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  letter-spacing: 3px;
}
h2 {
  letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定行间距】：

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
  line-height: 0.7;
}
p.big {
  line-height: 1.8;
}
</style>
</head>
<body>
<p>
这是有标准行高的段落<br>
大多数浏览器中的默认行高大概是 110% 到 120%。<br>
</p>
<p class="small">
这是行高更小的段落。<br>
这是行高更小的段落。<br>
</p>
<p class="big">
这是行高更大的段落。<br>
这是行高更大的段落。<br>
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置元素的文本方向】：

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【增加字间距】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  word-spacing: 10px;
}
h2 {
  word-spacing: -5px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定元素的文本阴影】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 3px 2px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 text-shadow 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【在元素内禁用文本换行】：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>
<h2>空白</h2>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>请尝试删除 white-space 属性来看一下区别。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【垂直对齐文本内的图像】：

<!DOCTYPE html>
<html>
<head>
<style>
img.top {
  vertical-align: top;
}
img.middle {
  vertical-align: middle;
}
img.bottom {
  vertical-align: bottom;
}
</style>
</head>
<body>
<p>一幅 <img src="/i/logo/w3logo-3.png" alt="phpcodeweb" width="180" height="167"> 默认对齐方式的图像。</p><br>
<p>一幅 <img class="top" src="/i/logo/w3logo-3.png" alt="phpcodeweb" width="180" height="167"> 上对齐的图像。</p><br>
<p>一幅 <img class="middle" src="/i/logo/w3logo-3.png" alt="phpcodeweb" width="180" height="167"> 居中对齐的图像。</p><br>
<p>一幅 <img class="bottom" src="/i/logo/w3logo-3.png" alt="phpcodeweb" width="180" height="167"> 下对齐的图像。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 字体

实例解释：字体属性

完整实例【设置文本的字体】：

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p>这是一个段落，以 Times New Roman 字体显示：</p>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p>这是一个段落，以 Arial 字体显示：</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p>这是一个段落，以 Lucida Console 字体显示：</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置字体的大小】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 250%;
}
h2 {
  font-size: 200%;
}
p {
  font-size: 100%;
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是一个段落。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【以 px 为单位设置字体大小】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【以 em 为单位设置字体大小】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
 }
p {
  font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是一个段落。</p>
<p>用 em 设置字体大小允许所有主要浏览器调整文本大小。不幸的是，旧版本的 IE 仍然存在问题。在调整文本大小时，会变得比原来更大或更小。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【以百分百和 em 为单位设置字体大小】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是一个段落。</p>
<p>以 ％ 和 em 中设置字体大小会在所有主要浏览器中显示相同的大小，并允许所有浏览器调整文本大小！</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置字体的样式】：

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置字体的变体】：

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-variant: normal;
}
p.small {
  font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">My name is Bill Gates.</p>
<p class="small">My name is Bill Gates.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置字体的粗细】：

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}
p.light {
  font-weight: lighter;
}
p.thick {
  font-weight: bold;
}
p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【所有字体属性在一条声明中】：

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font: 20px Arial, sans-serif;
}
p.b {
  font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<h1>The font Property</h1>
<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>
<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 图标

实例解释：图标

完整实例【Font Awesome 图标】：

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<p>一些 Font Awesome 图标：</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
<p>有样式的 Font Awesome 图标（尺寸和颜色）：</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【Bootstrap 图标】：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">
<p>一些 Bootstrap 图标：</p>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<br><br>
<p>有样式的 Bootstrap 图标（尺寸和颜色）：</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【Google 图标】：

<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<p>一些 Google 图标：</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>
<p>有样式的 Google 图标（尺寸和颜色）：</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 链接

实例解释：链接属性

完整实例【为已访问/未访问链接添加不同的颜色】：

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}
/* visited link */
a:visited {
  color: green;
}
/* mouse over link */
a:hover {
  color: hotpink;
}
/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>
<h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【在链接上使用 text-decoration】：

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
</style>
</head>
<body>
<h1>CSS 链接</h1>
<p><b><a href="http://www.phpcodeweb.com/news/741.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【为链接规定背景色】：

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}
</style>
</head>
<body>
<h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【为超链接添加其他样式】：

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>请把鼠标移到链接上并观察样式的变化：</p>
<p><b><a class="one" href="/index.html" target="_blank">此链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">此链接改变字体大小</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">此链接改变背景色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">此链接改变字体族</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">此链接改变文本装饰</a></b></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【不同类型的指针】：

<!DOCTYPE html>
<html>
<body>
<p>请把鼠标移动到单词上，以查看指针效果：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【高级 - 创建链接框】：

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>
<h1>链接按钮</h1>
<p>把链接样式设置为按钮：</p>
<a href="/index.html" target="_blank">这是一个链接</a>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【高级 - 创建带边框的链接框】：

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: green;
  color: white;
}
</style>
</head>
<body>
<a href="/index.html" target="_blank">这是一个链接</a>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 列表

实例解释：列表属性

完整实例【列表中的所有不同的列表项标记】：

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}
ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
</style>
</head>
<body>
<ul class="a">
  <li>Circle type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ul class="b">
  <li>Disc type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ul class="c">
  <li>Square type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ol class="d">
  <li>Armenian type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="e">
  <li>Cjk-ideographic type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="f">
  <li>Decimal type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="g">
  <li>Decimal-leading-zero type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="h">
  <li>Georgian type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="i">
  <li>Hebrew type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="j">
  <li>Hiragana type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="k">
  <li>Hiragana-iroha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="l">
  <li>Katakana type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="m">
  <li>Katakana-iroha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="n">
  <li>Lower-alpha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="o">
  <li>Lower-greek type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="p">
  <li>Lower-latin type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="q">
  <li>Lower-roman type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="r">
  <li>Upper-alpha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="s">
  <li>Upper-latin type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="t">
  <li>Upper-roman type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="u">
  <li>None type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="v">
  <li>inherit type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【把图像设置为列表项标记】：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('/i/photo/sqpurple.gif');
}
</style>
</head>
<body>
<h1>CSS 列表</h1>
<p>list-style-image 属性规定图像作为列表项标记：</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【定位列表项标记】：

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}
</style>
</head>
<body>
<h1>list-style-position 属性</h1>
<h2>list-style-position: outside（默认）：</h2>
<ul class="a">
  <li>咖啡-用烘焙过的咖啡豆制成的冲泡饮料，烘焙过的咖啡豆是来自咖啡植物的浆果的种子</li>
  <li>茶-一种芳香饮料，通常通过将热水或沸水倒在茶树的固化叶子上而制得，茶树是一种原产于亚洲的常绿灌木（灌木）</li>
  <li>可口可乐-由可口可乐公司生产的碳酸软饮料。该饮料的名称指的是其两种原始成分，即可乐果（一种咖啡因）和古柯叶。</li>
</ul>
<h2>list-style-position: inside：</h2>
<ul class="b">
  <li>咖啡-用烘焙过的咖啡豆制成的冲泡饮料，烘焙过的咖啡豆是来自咖啡植物的浆果的种子</li>
  <li>茶-一种芳香饮料，通常通过将热水或沸水倒在茶树的固化叶子上而制得，茶树是一种原产于亚洲的常绿灌木（灌木）</li>
  <li>可口可乐-由可口可乐公司生产的碳酸软饮料。该饮料的名称指的是其两种原始成分，即可乐果（一种咖啡因）和古柯叶。</li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【删除默认列表设置】：

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>
<p>Default list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<p>删除项目符号、外边距和内边距：</p>
<ul class="demo">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【所有列表属性在一条声明中】：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<h1>CSS 列表</h1>
<p>list-style 属性是简写属性，用于在一条声明中设置所有列表属性。</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【用颜色设置列表样式】：

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}
</style>
</head>
<body>
<h1>设置列表的颜色样式：</h1>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【全宽带边框的列表】：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  padding: 0;
  border: 1px solid #ddd;
}
ul li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}
ul li:last-child {
  border-bottom: none
}
</style>
</head>
<body>
<p>全宽的带边框的列表：</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 表格

实例解释：表格属性

完整实例【规定 table、th 以及 td 元素的黑色边框】：

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<h1>为表格添加边框：</h1>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 border-collapse】：

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}
table {
  width: 100%;
  border-collapse: collapse;
}
</style>
</head>
<body>
<h1>Let the borders collapse</h1>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【围绕表格的单一边框】：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
}
</style>
</head>
<body>
<h1>单边框表格</h1>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定表格的宽度和高度】：

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  height: 70px;
}
</style>
</head>
<body>
<h1>width 和 height 属性</h1>
<p>设置表格的宽度，以及表格标题行的高度：</p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置内容的水平对齐（text-align）】：

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  text-align: left;
}
</style>
</head>
<body>
<h1>text-align 属性</h1>
<p>这个属性设置 th 或 td 中内容的水平对齐方式（比如左、右或居中对齐）。</p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置内容的垂直对齐（vertical-align）】：

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
td {
  height: 50px;
  vertical-align: bottom;
}
</style>
</head>
<body>
<h1>vertical-align 属性</h1>
<p>这个属性设置 th 或 td 中内容的垂直对齐方式（比如上、下或居中对齐）。</p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定 th 和 td 元素的内边距】：

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid #ddd;
  text-align: left;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 15px;
}
</style>
</head>
<body>
<h1>padding 属性</h1>
<p>这个属性在表格的内容与边框之间添加空间。</p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【水平分隔符】：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>表格分隔线</h1>
<p>为 th 和 td 添加 border-bottom，已实现水平分隔线：</p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【可悬停的表格】：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
tr:hover {background-color:#f5f5f5;}
</style>
</head>
<body>
<h1>可悬停表格</h1>
<p>将鼠标移到表格行上可以查看效果。</p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【条状表格】：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>
<h1>条纹表格</h1>
<p>为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加背景色：</p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定表格边框的颜色】：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>
<h1>有颜色的表格标题</h1>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置表格标题的位置】：

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}
caption {
  caption-side: bottom;
}
</style>
</head>
<body>
<table>
<caption>Table 1.1 Customers</caption>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alibaba</td>
    <td>Ma Yun</td>
    <td>Hangzhou</td>
  </tr>
  <tr class="alt">
    <td>Hangzhou</td>
    <td>Tim Cook</td>
    <td>Cupertino</td>
  </tr>
  <tr>
    <td>BAIDU</td>
    <td>Li YanHong</td>
    <td>Beijing</td>
  </tr>
  <tr class="alt">
    <td>HUAWEI</td>
    <td>Ren Zhengfei</td>
    <td>Shenzhen</td>
  </tr>
  <tr>
    <td>Tencent</td>
    <td>Ma Huateng</td>
    <td>Shenzhen</td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式表格】：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>
<h1>响应式表格</h1>
<p>如果屏幕太小无法显示全部内容，响应表将显示水平滚动条。请调整浏览器窗口的大小以查看效果：</p>
<p>如需创建响应式表格，请用 <strong>overflow-x:auto</strong> 的容器元素（比如 div）包围表格元素：</p>
<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Bill</td>
      <td>Gates</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Steve</td>
      <td>Jobs</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Elon</td>
      <td>Musk</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建美观的表格】：

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>
<table id="customers">
	<tr>
		<th>Company</th>
		<th>Contact</th>
		<th>Address</th>
		<th>City</th>
	</tr>
	<tr>
		<td>Alibaba</td>
		<td>Ma Yun</td>
		<td>No. 699, Wangshang Road, Binjiang District</td>
		<td>Hangzhou</td>
	</tr>
	<tr>
		<td>APPLE</td>
		<td>Tim Cook</td>
		<td>1 Infinite Loop Cupertino, CA 95014</td>
		<td>Cupertino</td>
	</tr>
	<tr>
		<td>BAIDU</td>
		<td>Li YanHong</td>
		<td>Lixiang guoji dasha,No 58, beisihuanxilu</td>
		<td>Beijing</td>
	</tr>
	<tr>
		<td>Canon</td>
		<td>Tsuneji Uchida</td>
		<td>One Canon Plaza Lake Success, NY 11042</td>
		<td>New York</td>
	</tr>
	<tr>
		<td>Google</td>
		<td>Larry Page</td>
		<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
		<td>Mountain View</td>
	</tr>
	<tr>
		<td>HUAWEI</td>
		<td>Ren Zhengfei</td>
		<td>Putian Huawei Base, Longgang District</td>
		<td>Shenzhen</td>
	</tr>
	<tr>
		<td>Microsoft</td>
		<td>Bill Gates</td>
		<td>15700 NE 39th St Redmond, WA 98052</td>
		<td>Redmond</td>
	</tr>
	<tr>
		<td>Nokia</td>
		<td>Olli-Pekka Kallasvuo</td>
		<td>P.O. Box 226, FIN-00045 Nokia Group</td>
		<td>Helsinki</td>
	</tr>
	<tr>
		<td>SONY</td>
		<td>Kazuo Hirai</td>
		<td>Park Ridge, NJ 07656</td>
		<td>Park Ridge</td>
	</tr>
	<tr>
		<td>Tencent</td>
		<td>Ma Huateng</td>
		<td>Tencent Building, High-tech Park, Nanshan District</td>
		<td>Shenzhen</td>
	</tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 显示

实例解释：display 属性

完整实例【如何隐藏元素（visibility:hidden）】：

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  visibility: hidden;
}
</style>
</head>
<body>
<h1>这是可见的标题</h1>
<h1 class="hidden">这是隐藏的标题</h1>
<p>请注意，隐藏的标题仍然占据空间。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【如何不显示元素（display:none）】：

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  display: none;
}
</style>
</head>
<body>
<h1>这是一个可见的标题</h1>
<h1 class="hidden">这是一个隐藏的标题</h1>
<p>请注意， display: none; 的标题不会占用任何空间。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【如何把块级元素显示为行内元素】：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: inline;
}
</style>
</head>
<body>
<p>这两个段落会生成行内框，</p>
<p>这会导致两元素间没有距离。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【如何把行内元素显示为块级元素】：

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>
<span>值为 "block" 的 display 属性会导致</span><span>两元素间的换行。</span>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【如何将 CSS 与 JavaScript 一起使用来显示隐藏内容】：

<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}
#panel {
  display: none;
}
</style>
</head>
<body>
<p class="flip" onclick="myFunction()">点击这里来显示面板</p>
<div id="panel">
  <p>该面板包含一个 div 元素，默认情况下该元素是隐藏的（display: none）。</p>
  <p>它使用 CSS 进行样式设置，我们使用 JavaScript 来显示它（display: block）。</p>
  <p>工作原理：请注意，带有 class="flip" 的 p 元素有 onclick 属性。当用户单击 p 元素时，将执行一个名为 myFunction() 的函数，该函数将 id="panel" 的 div 样式从 display:none（隐藏）更改为 display:block（可见）。</p>
  <p>您将在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识。</p>
</div>
<script>
function myFunction() {
  document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 定位

实例解释：定位属性

完整实例【相对于浏览器窗口来放置元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h1>position: fixed;</h1>
<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
<div class="fixed">
这个 div 元素设置 position: fixed;
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【相对于元素正常位置来放置元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h1>position: relative;</h1>
<p>设置 position: relative; 的元素相对于其正常位置进行定位：</p>
<div class="relative">
这个 div 元素设置 position: relative;
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【用绝对值定位元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h1>position: absolute;</h1>
<p>设置 position: absolute; 的元素会相对于最近的定位祖先进行定位（而不是相对于视口进行定位，比如 fixed）：</p>
<div class="relative">这个 div 元素设置 position: relative;
  <div class="absolute">这个 div 元素设置 position: absolute;</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【粘性定位】：

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>请试着在这个框架内<b>滚动</b>页面，以理解粘性定位的原理。</p>
<div class="sticky">我是有粘性的！</div>
<div style="padding-bottom:2000px">
  <p>在此例中，当您到达元素的滚动位置时，粘性元素将停留在页面顶部（top: 0）。</p>
  <p>向上滚动以消除粘性。</p>
  <p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【重叠元素】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<img src="/i/logo/w3logo-1.png" width="188" height="267">
<p>由于图像的 z-index 为 -1，它将被置于文本之后。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置元素的形状】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="/i/logo/w3logo-1.png" width="188" height="267">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用像素值设置图像的上边缘】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  top: 0px;
}
</style>
</head>
<body>
<img src="smiley.gif" width="42" height="42">
<h1>This is a heading</h1>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用像素值设置图像的下边缘】：

<!DOCTYPE html>
<html>
<head>
<style>
img.ex1 {
  position: absolute;
  bottom: 0px;
}
img.ex2 {
  position: relative;
  bottom: -100px;
}
</style>
</head>
<body>
<img class="ex1" src="smiley.gif" width="42" height="42">
<h1>This is a heading</h1>
<img class="ex2" src="smiley.gif" width="42" height="42">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用像素值设置图像的左边缘】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="smiley.gif" width="42" height="42">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用像素值设置图像的右边缘】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  right: 50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="smiley.gif" width="42" height="42">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【定位图像文本（左上角）】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像左上角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="topleft">Top Left</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【定位图像文本（右上角）】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像右上角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="topright">Top Right</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【定位图像文本（左下角）】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像左下角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="bottomleft">Bottom Left</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【定位图像文本（右下角）】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像右下角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="bottomright">Bottom Right</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【定位图像文本（居中）】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>居中图像中的文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="center">Centered</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 溢出

实例解释：溢出属性

完整实例【使用 overflow: visible - 溢出没有被裁剪。它在元素框之外渲染。】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: visible;
}
</style>
</head>
<body>
<h1>CSS 溢出</h1>
<p>默认情况下，溢出是可见的，这意味着它不会被裁剪，而是在元素框外渲染：</p>
<div>当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 overflow: hidden - 溢出被裁剪，其余内容被隐藏。】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: hidden;
}
</style>
</head>
<body>
<h1>CSS 溢出</h1>
<p>若使用 hidden 值，会剪裁溢出，并隐藏内容的其余部分：</p>
<p>尝试删除 overflow 属性以了解其工作原理。</p>
<div>当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 overflow: scroll - 溢出被裁剪，但是添加了滚动条以查看其余内容。】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: scroll;
}
</style>
</head>
<body>
<h1>CSS 溢出</h1>
<p>将溢出值设置为 scroll，溢出将被裁剪，并添加滚动条以在框内滚动。请注意，这将在水平和垂直方向上添加滚动条（即使您不需要它）：</p>
<div>当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 overflow: auto - 如果裁剪了溢出，则应添加滚动条以查看其余内容。】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: auto;
}
</style>
</head>
<body>
<h1>CSS 溢出</h1>
<p>值 auto 类似 scroll，只是在必要时添加滚动条：</p>
<div>当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 overflow-x 和 overflow-y】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
</head>
<body>
<h1>CSS 溢出</h1>
<p>您还可以水平或垂直地改变内容的溢出（方式）。</p>
<p>overflow-x 规定如何处理内容的左/右边缘。<br>
overflow-y 规定如何处理内容的上/下边缘。</p>
<div>当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 浮动

实例解释：浮动属性

完整实例【float 属性的简单使用】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p><img src="/i/logo/w3logo-1.png" width="188" height="267">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带有边框和外边距的图像浮动到段落的右侧】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
  border: 1px dotted black;
  margin: 0px 0px 15px 20px;
}
</style>
</head>
<body>
<p>
在下面的段落中，图像将向右浮动。黑色的虚线边框被添加到图像。
我们还为图像添加了外边距以将文本推离图像：
图像的上、右外边距为 0px，下外边距为 15px，左外边距为 20px。
</p>
<p><img src="/i/logo/w3logo-1.png" width="188" height="267">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带标题的图像向右浮动】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  float: right;
  width: 120px;
  margin: 0 0 15px 20px;
  padding: 15px;
  border: 1px solid black;
  text-align: center;
}
</style>
</head>
<body>
<div>
<img src="/i/logo/w3logo-1.png" width="188" height="267"><br>CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中，div 元素的宽度为 120 像素，其中包含图像。
div 元素将向右浮动。外边距被添加到 div 以将文本推离 div。
将边框和内边距（填充）添加到 div 中，以凸显图片和标题。
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【让段落的第一个字母向左浮动】：

<!DOCTYPE html>
<html>
<head>
<style>
span {
  float: left;
  width: 0.7em;
  font-size: 400%;
  font-family: algerian, courier;
  line-height: 80%;
}
</style>
</head>
<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中，文本的第一个字母嵌入 span 元素中。
span 元素的宽度是当前字体大小的 0.7 倍。
span 元素的字体大小为 400％（很大），行高为 80％。
span 中字母的字体将是 "Algerian"。
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【关闭浮动（使用 clear 属性）】：

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div2 {
  border: 1px solid red;
}
.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div4 {
  border: 1px solid red;
  clear: left;
}
</style>
</head>
<body>
<h1>不使用 clear</h1>
<div class="div1">div1</div>
<div class="div2">div2 - 请注意，在 HTML 代码中 div2 在 div1 之后。不过，由于 div1 向左浮动，div2 中的文本会流动到 div1 周围。</div>
<br><br>
<h1>使用 clear</h1>
<div class="div3">div3</div>
<div class="div4">div4 - 在此处，clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素。您也可以清除 "right" 和 "both"。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【关闭浮动（使用 clearfix hack）】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}
.img1 {
  float: right;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.img2 {
  float: right;
}
</style>
</head>
<body>
<p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p>
<div>
  <h1>Without Clearfix</h1>
  <img class="img1" src="/i/logo/w3logo-3.png" alt="phpcodeweb" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
<p style="clear:right">请为包含元素添加 clearfix hack，以解决此问题：</p>
<div class="clearfix">
  <h1>With Clearfix</h1>
  <img class="img2" src="/i/logo/w3logo-3.png" alt="phpcodeweb" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建浮动框】：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>
<h1>网格框</h1>
<p>并排浮动的框：</p>
<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <p>框中的一些文本。</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <p>框中的一些文本。</p>
  </div>
  <div class="box" style="background-color:#ddd">
  <p>框中的一些文本。</p>
  </div>
</div>
<p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性，以确保框不会由于额外的内边距（填充）而损坏。尝试删除此代码以查看效果。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建并排图像】：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
.img-container {
  float: left;
  width: 33.33%;
  padding: 5px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>
<h1>并排的图像</h1>
<p>并排浮动图像：</p>
<div class="clearfix">
  <div class="img-container">
  <img src="/i/photo/tulip.jpg" alt="Tulip" style="width:100%">
  </div>
  <div class="img-container">
  <img src="/i/photo/tulip-2.jpg" alt="Tulip" style="width:100%">
  </div>
  <div class="img-container">
  <img src="/i/photo/flower-4.jpg" alt="Flower" style="width:100%">
  </div>
</div>
<p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性以确保图像容器不会由于额外的内边距（填充）而损坏。请尝试删除此代码以查看效果。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建等高框（通过 flexbox）】：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}
.flex-container .box {
  background-color: #f1f1f1;
  width: 50%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>弹性框</h1>
<div class="flex-container">
  <div class="box">框 1 - 这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。</div>
  <div class="box">框 2 - 我的高度与框 1 保持一致。</div>
</div>
<p>请尝试调整浏览器窗口的大小，以查看弹性布局。</p>
<p><b>注释：</b>Internet Explorer 10 或更早的版本不支持 Flexbox。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建水平菜单】：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
.active {
  background-color: red;
}
</style>
</head>
<body>
<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建 web 布局实例】：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 8px;
  background-color: #33b5e5;
  color: #ffffff;
}
.menu li:hover {
  background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
  <h1>Shanghai</h1>
</div>
<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>
  <div class="column content">
    <h1>The City</h1>
    <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
    <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
  </div>
</div>
<div class="footer">
  <p>Footer Text</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS Inline-block

实例解释：Inline-block

完整实例【展示行内、行内块、块级元素的区别】：

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}
span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}
span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}
</style>
</head>
<body>
<h1>display 属性</h1>
<h2>display: inline</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="a">the People's Republic of China</span>. Welcome to <span class="a">Shanghai</span>!</div>
<h2>display: inline-block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="b">the People's Republic of China</span>. Welcome to <span class="b">Shanghai</span>!</div>
<h2>display: block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="c">the People's Republic of China</span>. Welcome to <span class="c">Shanghai</span>!</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 inline-block 来创建导航链接】：

<!DOCTYPE html>
<html>
<head>
<style>
.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}
.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}
</style>
</head>
<body>
<h1>水平导航链接</h1>
<p>默认地，列表项是垂直显示的。在本例中，我们使用 display: inline-block 来水平地显示它们（并排）。</p>
<p class="note"><span>注释：</span>如果您调整浏览器的大小，链接会在变得拥挤时自动换行。</p>
<ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#clients">Our Clients</a></li>
  <li><a href="#contact">Contact Us</a></li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 对齐元素

实例解释：对齐属性

完整实例【通过外边距进行居中对齐】：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>
<h1>居中对齐元素</h1>
<p>要使块元素（例如 div）水平居中，请使用 margin: auto;</p>
<div class="center">
  <p>Hello World!</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【居中对齐文本】：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  border: 3px solid green;
}
</style>
</head>
<body>
<h2>居中文本</h2>
<div class="center">
  <p>这段文本是居中的。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【居中对齐图像】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<h1>居中图像</h1>
<p>要使图像居中，请将左右外边距设置为 auto，并使其成为一个块元素。</p>
<img src="/i/photo/tulip.jpg" alt="Tulip" style="width:40%" />
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【通过 position 实现左对齐/右对齐】：

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>
<h1>右对齐</h1>
<p>如何用 position 属性将元素右对齐的例子：</p>
<div class="right">
  <p>在我更年轻，更脆弱的岁月中，父亲给了我一些建议，从那以后我就一直在思考。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【通过 position 实现左对齐/右对齐 - 跨浏览器方案】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  width: 100%;
}
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  background-color: #b0e0e6;
}
</style>
</head>
<body>
<h1>右对齐</h1>
<div class="container">
  <div class="right">
    <p><b>注释：</b>如果使用 position 属性实现对齐，请始终包含 !DOCTYPE 声明！如果省略，IE 浏览器会产生奇怪的结果。</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【通过 float 实现左对齐/右对齐】：

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>
<h1>右对齐</h1>
<p>如何使用 float 属性将元素右对齐的例子：</p>
<div class="right">
  <p>在我更年轻，更脆弱的岁月中，父亲给了我一些建议，从那以后我就一直在思考。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【通过 float 实现左对齐/右对齐 - 跨浏览器方案】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  padding: 0;
}
.right {
  float: right;
  width: 300px;
  background-color: #b0e0e6;
}
</style>
</head>
<body>
<h1>右对齐</h1>
<div class="right">
  <p><b>注释：</b>如果使用 float 属性实现对齐，请始终包含 !DOCTYPE 声明！如果省略，IE 浏览器会产生奇怪的结果。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【通过 padding 垂直居中】：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
}
</style>
</head>
<body>
<h1>垂直居中</h1>
<p>在此例中，我们使用 padding 属性将 div 元素垂直居中：</p>
<div class="center">
  <p>我是垂直居中的。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【垂直和水平居中】：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
</style>
</head>
<body>
<h1>居中</h1>
<p>在此例中，我们使用 padding 和 text-align 将 div 元素垂直和水平居中：</p>
<div class="center">
  <p>我是垂直和水平居中。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【通过 line-height 垂直居中】：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>
<h1>居中</h1>
<p>在此例中，我们使用 line-height 属性，其值等于 height 属性，以使 div 元素居中：</p>
<div class="center">
  <p>我是垂直和水平居中。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【通过 position 实现垂直和水平居中】：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h1>居中</h1>
<p>在此例中，我们使用 position 和 transform 属性将 div 元素垂直和水平居中：</p>
<div class="center">
  <p>我是垂直和水平居中。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 组合器

实例解释：组合器选择器

完整实例【后代选择器】：

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>
<h1>后代选择器</h1>
<p>后代选择器匹配作为指定元素后代的所有元素。</p>
<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section>
</div>
<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【子选择器】：

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: yellow;
}
</style>
</head>
<body>
<h1>子选择器</h1>
<p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>
<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
  <p>div 中的段落 4。</p>
</div>
<p>段落 5。不在 div 中。</p>
<p>段落 6。不在 div 中。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【相邻同胞选择器】：

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>
<h1>相邻兄弟选择器</h1>
<p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p>
<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【通用同胞选择器】：

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>
<h1>通用兄弟选择器</h1>
<p>通用的兄弟选择器（~）选择指定元素的所有同级元素。</p>
<p>段落 1。</p>
<div>
  <p>段落 2。</p>
</div>
<p>段落 3。</p>
<code>一些代码。</code>
<p>段落 4。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 伪类

实例解释：伪类

完整实例【给链接添加不同的颜色】：

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}
/* visited link */
a:visited {
  color: green;
}
/* mouse over link */
a:hover {
  color: hotpink;
}
/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>
<h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【为链接添加其他样式】：

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>请把鼠标移到链接上并观察样式的变化：</p>
<p><b><a class="one" href="/index.html" target="_blank">此链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">此链接改变字体大小</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">此链接改变背景色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">此链接改变字体族</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">此链接改变文本装饰</a></b></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 :focus】：

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>
<form action="/demo/demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【:first-child - 匹配首个 p 元素】：
```
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
}
</style>
</head>
<body>
<p>这是一段文本。</p>
<p>这是一段文本。</p>
</body>
</html>
```
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【:first-child - 匹配所有 p 元素内的首个 i 元素】：

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
}
</style>
</head>
<body>
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【:first-child - 匹配所有第一个子 p 元素中的所有 i 元素】：

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
}
</style>
</head>
<body>
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 :lang】：

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>
<p>在本例中，:lang 为 lang="en" 的 q 元素定义引号：</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 伪元素

实例解释：伪元素

完整实例【制作文本中特别的首字母】：

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>
<p>您可以使用 ::first-letter 伪元素为文本的第一个字符添加特殊效果！</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【制作文本中特别的首行】：

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>
<p>您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【制作特别的首字母和首行】：

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>
</head>
<body>
<p>您可以结合 ::first-letter 和 ::first-line 伪元素来为文本的首字母和首行添加特殊效果！</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 :before 在元素之前插入内容】：

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(/i/photo/smile.gif);
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>::before 伪元素在一个元素的内容之前插入内容。</p>
<h1>这是一个标题</h1>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 :after 在元素之后插入内容】：

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(/i/photo/smile.gif);
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>::after 伪元素在一个元素之后插入内容。</p>
<h1>这是一个标题</h1>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 内容生成

实例解释：CSS 计数器

完整实例【在每个带有 content 属性的链接之后的括号中插入 URL】：

<!DOCTYPE html>
<html>
<head>
<style>
a:after {
  content: " (" attr(href) ")";
}
</style>
</head>
<body>
<p><a href="https://www.phpcodeweb.com">phpcodeweb</a> contains free tutorials and references.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【用 "Section 1"、"1.1"、"1.2" 等为节和子节编号】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1:before {
  counter-increment: section;
  content: "板块 " counter(section) ". ";
}
h2:before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML 教程</h1>
<h2>HTML 教程</h2>
<h2>XHTML 教程</h2>
<h2>CSS 教程</h2>
<h1>Scripting 教程</h1>
<h2>JavaScript</h2>
<h2>JQuery</h2>
<h1>XML 教程</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【用 quotes 属性指定引号】：
```
<html lang="en">
<head>
<style>
q:lang(en) {
  quotes: "«" "»" "'" "'";
}
</style>
</head>
<body>
<p><q>This is a <q>big</q> quote.</q></p>
</body>
</html>
```
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 不透明度

实例解释：图像不透明度

完整实例【创建透明图像】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<p>opacity 属性规定元素的透明度。值越低，越透明：</p>
<p>50% 不透明度的图像：</p>
<img src="/i/photo/tulip-red.jpg" alt="Tulip" width="600" height="400">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建透明图像 - mouseover 效果】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<p>opacity 属性常与 :hover 选择器一起使用，改变鼠标悬停时的不透明度：</p>
<img src="/i/photo/tulip.jpg" alt="Tulip" width="170" height="170">
<img src="/i/photo/tulip-2.jpg" alt="Tulip" width="170" height="170">
<img src="/i/photo/flower-4.jpg" alt="Flower" width="170" height="170">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【透明图像的反转的 mouseover 效果】：

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
  opacity: 0.5;
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<p>opacity 属性常与 :hover 选择器一起使用，改变鼠标悬停时的不透明度：</p>
<img src="/i/photo/tulip.jpg" alt="Tulip" width="170" height="170">
<img src="/i/photo/tulip-2.jpg" alt="Tulip" width="170" height="170">
<img src="/i/photo/flower-4.jpg" alt="Flower" width="170" height="170">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【透明框（div）】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #4CAF50;
  padding: 10px;
}
div.first {
  opacity: 0.1;
}
div.second {
  opacity: 0.3;
}
div.third {
  opacity: 0.6;
}
</style>
</head>
<body>
<h1>透明框</h1>
<p>当使用 opacity 属性为元素背景添加透明度时，其所有子元素也将变为透明。这可能会使完全透明的元素内的文本难以阅读：</p>
<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【用了 RGBA 值的透明框】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(76, 175, 80);
  padding: 10px;
}
div.first {
  background: rgba(76, 175, 80, 0.1);
}
div.second {
  background: rgba(76, 175, 80, 0.3);
}
div.third {
  background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>
<h1>透明框</h1>
<p>使用 opacity：</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>
<p>使用 RGBA 颜色值：</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
<p>注意使用 opacity 属性时文本以及背景颜色如何变得透明。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建一个文本位于背景图像上的透明框】：

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
  background: url(/i/photo/tulip_peach_blossom_s.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>
<div class="background">
  <div class="transbox">
    <p>这段文本被放置在一个透明框中。</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 导航栏

实例解释：导航栏

完整实例【拥有完整样式的垂直导航栏】：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
li a.active {
  background-color: #4CAF50;
  color: white;
}
li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>
<h1>垂直导航栏</h1>
<p>在此例中，我们创建一个具有绿色背景色和白色文本的 "active" 类。该类将添加到 "Home" 链接。</p>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【拥有完整样式的水平导航栏】：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
a:hover:not(.active) {
  background-color: #111;
}
.active {
  background-color:#4CAF50;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【全高的固定垂直导航栏】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
li a.active {
  background-color: #4CAF50;
  color: white;
}
li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h1>全高的固定侧导航栏</h1>
  <h2>请尝试滚动此区域，并查看 sidenav 如何粘在页面上。</h2>
  <p>请注意，此 div 元素的左外边距为 25％。这是因为侧导航栏被设置为 25％ 宽。如果删除这个外边距，则 sidenav 将叠加到该 div 上。</p>
  <p>还要注意，我们已为 sidenav 设置 overflow：auto。如果 sidenav 太长时（例如，如果其中有超过 50 个链接），会添加滚动条。</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【固定的水平导航栏】：

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
  <h1>固定的顶部导航栏</h1>
  <h2>请滚动页面以查看效果。</h2>
  <h2>页面滚动时导航栏将位于页面顶部。</h2>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【粘性导航栏（在 IE 或 Edge 15 及更早版本中不起作用）】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 28px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="header">
  <h1>向下滚动</h1>
  <p>请向下滚动以查看粘性效果。</p>
</div>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<h2>粘性导航栏实例</h2>
<p>如果导航栏到了滚动位置，它会<strong>粘</strong>到顶部。</p>
<p><b>注释：</b>Internet Explorer 不支持粘性定位并且 Safari 需要 -webkit- 前缀。</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式的顶部导航栏】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #4CAF50;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px) {
  ul.topnav li.right,
  ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li class="right"><a href="#about">About</a></li>
</ul>
<div style="padding:0 16px;">
  <h1>响应式顶部导航栏实例</h1>
  <p>此示例使用媒体查询在屏幕尺寸小于或等于 600 像素时垂直堆叠 topnav。</p>
  <p>您稍后将在我们的 CSS 教程中学到有关媒体查询和响应式 Web 设计的更多知识。</p>
  <p><b>请调整浏览器窗口的大小以查看效果。</b></p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式的侧边导航栏】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}
ul.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
ul.sidenav li a.active {
  background-color: #4CAF50;
  color: white;
}
ul.sidenav li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
div.content {
  margin-left: 25%;
  padding: 1px 16px;
  height: 1000px;
}
@media screen and (max-width: 900px) {
  ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }
  ul.sidenav li a {
    float: left;
    padding: 15px;
  }
  div.content {margin-left: 0;}
}
@media screen and (max-width: 400px) {
  ul.sidenav li a {
    text-align: center;
    float: none;
  }
}
</style>
</head>
<body>
<ul class="sidenav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<div class="content">
  <h1>响应式侧导航栏实例</h1>
  <p>当屏幕尺寸为 900 像素或更小时，此例使用媒体查询将 sidenav 转换为顶部导航栏。</p>
  <p>我们还为屏幕小于等于 400 像素的屏幕添加了媒体查询，它将垂直堆叠并居中放置导航链接。</p>
  <p>您稍后将在我们的 CSS 教程中学到有关媒体查询和响应式 Web 设计的更多知识。</p>
  <p><b>请调整浏览器窗口的大小以查看效果。</b></p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 下拉列表

实例解释：下拉菜单

完整实例【下拉文本】：

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>
<h1>可悬停的下拉菜单</h1>
<p>请把鼠标移到文本上，已查看下拉内容。</p>
<div class="dropdown">
  <span>把鼠标移到我上面</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【下拉菜单】：

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>下拉菜单</h1>
<p>请把鼠标移到按钮上，以打开下拉菜单。</p>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>
<p><b>Note:</b>我们的测试链接用了 href="#"。真实的网站会用 URL。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【右对齐的下拉菜单】：

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>对齐的下拉内容</h1>
<p>通过 left 和 right 属性，决定下拉内容是左到右还是右到左。</p>
<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>
<div class="dropdown" style="float:right;">
  <button class="dropbtn">Right</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【下拉图像】：

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>
<h1>下拉图片</h1>
<p>请把鼠标移动到图像上，以打开下拉内容。</p>
<div class="dropdown">
  <img src="/i/photo/coffee.jpg" alt="Coffee" width="100">
  <div class="dropdown-content">
  <img src="/i/photo/coffee.jpg" alt="Coffee" width="300" height="200">
  <div class="desc">Coffee</div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【下拉导航栏】：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
<h1>导航栏内的下拉菜单</h1>
<p>请悬停到 "Dropdown" 链接上，以查看下拉菜单。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 图片库

实例解释：图片库

完整实例【图片库】：

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
  <a target="_blank" href="/i/photo/tulip-yellow.jpg">
    <img src="/i/photo/tulip-yellow.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">在此处添加图像描述</div>
</div>
<div class="gallery">
  <a target="_blank" href="/i/photo/tulip-red.jpg">
    <img src="/i/photo/tulip-red.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">在此处添加图像描述</div>
</div>
<div class="gallery">
  <a target="_blank" href="/i/photo/flower-1.jpg">
    <img src="/i/photo/flower-1.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">在此处添加图像描述</div>
</div>
<div class="gallery">
  <a target="_blank" href="/i/photo/flower-2.jpg">
    <img src="/i/photo/flower-2.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">在此处添加图像描述</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式图片库】：

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  border: 1px solid #ccc;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
* {
  box-sizing: border-box;
}
.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>
<h1>响应式图片库</h1>
<h2>请调整窗口大小来查看效果。</h2>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="/i/photo/tulip-yellow.jpg">
      <img src="/i/photo/tulip-yellow.jpg" alt="黄色郁金香" width="600" height="400">
    </a>
    <div class="desc">在此处添加图像描述</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="/i/photo/tulip-red.jpg">
      <img src="/i/photo/tulip-red.jpg" alt="红色郁金香" width="600" height="400">
    </a>
    <div class="desc">在此处添加图像描述</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="/i/photo/flower-1.jpg">
      <img src="/i/photo/flower-1.jpg" alt="花花草草" width="600" height="400">
    </a>
    <div class="desc">在此处添加图像描述</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="/i/photo/flower-2.jpg">
      <img src="/i/photo/flower-2.jpg" alt="花花草草" width="600" height="400">
    </a>
    <div class="desc">在此处添加图像描述</div>
  </div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
  <p>本例使用媒体查询来重新排列不同屏幕尺寸的图像：对于宽于 700 像素的屏幕，它将并排显示四幅图像；对于小于 700 像素的屏幕，将并排显示两幅图像。对于小于 500 像素的屏幕，图像将垂直堆叠（100％）。</p>
  <p>您稍后将在我们的 CSS 教程中学到有关媒体查询和响应式 Web 设计的更多知识。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 图像精灵

实例解释：图像精灵

完整实例【图像精灵】：

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(/i/css/navsprites.gif) 0 0;
}
#next {
  width: 43px;
  height: 44px;
  background: url(/i/css/navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img id="home" src="/i/css/trans.gif" width="1" height="1">
<img id="next" src="/i/css/trans.gif" width="1" height="1">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【图像精灵 - 导航列表】：

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 43px;
  background: url('/i/css/navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 42px;
  background: url('/i/css/navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 42px;
  background: url('/i/css/navsprites.gif') -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
  <li id="home"><a href="http://www.phpcodeweb.com/news/741.html"></a></li>
  <li id="prev"><a href="http://www.phpcodeweb.com/news/742.html"></a></li>
  <li id="next"><a href="http://www.phpcodeweb.com/news/743.html"></a></li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【有悬停效果的图像精灵】：

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 43px;
  background: url('/i/css/navsprites_hover.gif') 0 0;
}
#prev {
  left: 63px;
  width: 42px;
  background: url('/i/css/navsprites_hover.gif') -47px 0;
}
#next {
  left: 129px;
  width: 42px;
  background: url('/i/css/navsprites_hover.gif') -91px 0;
}
#home a:hover {
  background: url('/i/css/navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('/i/css/navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('/i/css/navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>
<ul id="navlist">
  <li id="home"><a href="http://www.phpcodeweb.com/news/741.html"></a></li>
  <li id="prev"><a href="http://www.phpcodeweb.com/news/742.html"></a></li>
  <li id="next"><a href="http://www.phpcodeweb.com/news/743.html"></a></li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 属性选择器

实例解释：属性选择器

完整实例【选取带有 target 属性的所有 <a> 元素】：

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
  background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute] 选择器</h1>
<p>带有 target 属性的链接获得颜色背景：</p>
<a href="https://www.phpcodeweb.com">www.phpcodeweb.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【选取带有 target="_blank" 属性的所有 <a> 元素】：

<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
  background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute="value"] 选择器</h1>
<p>target="_blank" 的链接会有黄色背景：</p>
<a href="https://www.phpcodeweb.com">www.phpcodeweb.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【选取所有带有 title 属性的元素，其中 title 属性包含以空格分隔的单词列表，单词之一是 "flower"】：

<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
  border: 5px solid yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute~="value"] 选择器</h1>
<p>title 属性包含 "flower" 的所有图像会有黄色边框。</p>
<img src="/i/photo/klematis.jpg" title="klematis flower" width="150" height="113">
<img src="/i/photo/flower.gif" title="flower" width="224" height="162">
<img src="/i/photo/tree.png" title="tree" width="200" height="358">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【选取所有带有以 "top" 开头的 class 属性值的元素（必须是整个单词）】：

<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
  background: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute|="value"] 选择器</h1>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【选取所有带有以 "top" 开头的 class 属性值的元素（一定不能是整个单词）】：

<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
  background: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute^="value"] 选择器</h1>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【选取所有带有以 "test" 结尾的 class 属性值的元素】：

<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
  background: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute$="value"] 选择器</h1>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【选择带有包含 "te" 的 class 属性值的所有元素】：

<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
  background: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute*="value"] 选择器</h1>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 表单

实例解释：表单

完整实例【全宽的输入字段】：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  width: 100%;
}
</style>
</head>
<body>
<p>全宽的输入字段：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【填充的输入字段】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>
<p>已填充的文本字段：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带边框的输入字段】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;
}
</style>
</head>
<body>
<p>带边框的文本字段：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带下边框的输入字段】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid red;
}
</style>
</head>
<body>
<p>只有下边框的文本字段：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带颜色的输入字段】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #3CBC8D;
  color: white;
}
</style>
</head>
<body>
<p>有颜色的文本字段：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="Bill">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Gates">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【获得焦点的输入字段】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
}
input[type=text]:focus {
  background-color: lightblue;
}
</style>
</head>
<body>
<p>在本例中，我们使用了 :focus 选择器，在文本字段获得焦点时（被点击）为其添加背景色：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="Bill">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Gates">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【获得焦点的输入字段 2】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}
input[type=text]:focus {
  border: 3px solid #555;
}
</style>
</head>
<body>
<p>在本例中，我们使用了 :focus 选择器，在文本字段获得焦点时（被点击）为其添加黑色边框：</p>
<p>请注意，我们已添加 CSS 过渡属性以设置边框颜色的动画（改变颜色需 0.5 秒）。</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="Bill">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Gates">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带图标的输入字段】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>
<p>带图标的输入框：</p>
<form>
  <input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【有动画效果的搜索框】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}
</style>
</head>
<body>
<p>有动画效果的输入字段：</p>
<form>
  <input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置文本框的样式】：

<!DOCTYPE html>
<html>
<head>
<style>
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
</style>
</head>
<body>
<p><b>提示：</b>使用 resize 属性可防止调整 textareas 的大小（禁用右下角的“抓取器”）：</p>
<form>
  <textarea>Some text...

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置选择菜单的样式】：

<!DOCTYPE html>
<html>
<head>
<style>
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>
<p>有样式的选择菜单：</p>
<form>
  <select id="country" name="country">
  <option value="au">Australia</option>
  <option value="ca">Canada</option>
  <option value="usa">USA</option>
  </select>
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置按钮的样式】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>
<h1>有样式的输入按钮</h1>
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式表单】：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
input[type=submit]:hover {
  background-color: #45a049;
}
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 响应式布局 - 当屏幕的宽度小于 600 像素时，使两列相互堆叠而不是彼此并排。 */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
</style>
</head>
<body>
<h1>响应式表单</h1>
<p>请调整浏览器窗口的大小以查看效果。当屏幕的宽度小于 600 像素时，使两列相互堆叠而不是彼此并排。</p>
<div class="container">
  <form action="/demo/demo_form.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px">

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 计数器

实例解释：计数器

完整实例【创建计数器】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>使用 CSS 计数器：</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h2>JavaScript 教程</h2>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【嵌套计数器 1】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML 教程：</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML 教程：</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【嵌套计数器 2】：

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
  <li>item</li>
  <li>item
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>
<ol>
  <li>item</li>
  <li>item</li>
</ol>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 网站布局

实例解释：网站布局

完整实例【简单的响应式网站布局】：

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 网站布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
/* 设置页眉样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
/* 设置顶部导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* 创建并排的三个非等列 */
.column {
  float: left;
  padding: 10px;
}
/* 左和右列 */
.column.side {
  width: 25%;
}
/* 中间列 */
.column.middle {
  width: 50%;
}
/* 清除列之后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 响应式布局 - 创建堆叠而非并排的三列 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}
/* 设置页脚的样式 */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
</style>
</head>
<body>
<div class="header">
  <h1>Header</h1>
  <p>请调整浏览器窗口的大小以查看响应效果。</p>
</div>
<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
<div class="row">
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
  <div class="column middle">
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
</div>
<div class="footer">
  <p>Footer</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【一个网站的实例】：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
/* 页眉/Blog 标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
.header h1 {
  font-size: 50px;
}
/* 设置上导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* 创建两个不相等的彼此并排的浮动列 */
/* 左列 */
.leftcolumn {
  float: left;
  width: 75%;
}
/* 右列 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
/* 伪图像 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* 为文章添加卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
/* 清除列之后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
/* 响应式布局 - 当屏幕的宽度小于 800 像素时，使两列堆叠而不是并排 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}
/* 响应式布局 - 当屏幕的宽度小于 400 像素时，使导航链接堆叠而不是并排 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>
<div class="header">
  <h1>My Website</h1>
  <p>Resize the browser window to see the effect.</p>
</div>
<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float:right">Link</a>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>About Me</h2>
      <div class="fakeimg" style="height:100px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Footer</h2>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 圆角

实例解释：CSS 圆角边框

完整实例【为元素添加圆角】：

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
#rcorners3 {
  border-radius: 25px;
  background: url(/i/paper.jpg);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}
</style>
</head>
<body>
<h1>border-radius 属性</h1>
<p>拥有指定背景颜色的元素的圆角：</p>
<p id="rcorners1">Rounded corners!</p>
<p>带边框元素的圆角：</p>
<p id="rcorners2">Rounded corners!</p>
<p>拥有背景图片的元素的圆角：</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【单独设置每个圆角】：

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
</style>
</head>
<body>
<h1>border-radius 属性</h1>
<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>
<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>
<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>
<p>一个值 - border-radius: 15px:</p>
<p id="rcorners4"></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建椭圆角】：

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
</style>
</head>
<body>
<h1>border-radius 属性</h1>
<p>椭圆边框 - border-radius: 50px / 15px:</p>
<p id="rcorners1"></p>
<p>椭圆边框 - border-radius: 15px / 50px:</p>
<p id="rcorners2"></p>
<p>椭圆边框 - border-radius: 50%:</p>
<p id="rcorners3"></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 边框图像

实例解释：CSS 边框图像

完整实例【创建围绕元素的图像边框，使用 round 关键字】：

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}
</style>
</head>
<body>
<h1>border-image 属性</h1>
<p>在这里，重复图像的中间部分，来创建边框：</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>
<p>这是原始图像：</p><img src="border.png">
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 border-image 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建围绕元素的图像边框，使用 stretch 关键字】：

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<h1>border-image 属性</h1>
<p>在这里，图像的中间部分被拉伸，来创建边框：</p>
<p id="borderimg">border-image: url(border.png) 30 stretch;</p>
<p>这是原始图像：</p><img src="border.png">
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 border-image 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【图像边框 - 不同的 slice 边框】：

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}
</style>
</head>
<body>
<h1>border-image 属性</h1>
<p id="borderimg1">border-image: url(border.png) 50 round;</p>
<p id="borderimg2">border-image: url(border.png) 20% round;</p>
<p id="borderimg3">border-image: url(border.png) 30% round;</p>
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 border-image 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 背景

实例解释：CSS 背景

完整实例【为元素添加多个背景图像】：

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  background-image: url(/i/photo/flower.gif), url(/i/paper.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
</style>
</head>
<body>
<h1>多重背景</h1>
<p>下面的 div 元素有两副背景图像：</p>
<div id="example1">
  <h1>Welcome to Shanghai</h1>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定背景图像的大小】：

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 1px solid black;
  background: url(/i/photo/flower.gif);
  background-size: 100px 80px;
  background-repeat: no-repeat;
  padding: 15px;
}
#example2 {
  border: 1px solid black;
  background: url(/i/photo/flower.gif);
  background-repeat: no-repeat;
  padding: 15px;
}
</style>
</head>
<body>
<h1>background-size 属性</h1>
<p>被调整大小的 background-image:</p>
<div id="example1">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>
<p>background-image 的原始尺寸：</p>
<div id="example2">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 "contain" 和 "cover" 缩放背景图像】：

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(/i/photo/flower.gif);
  background-repeat: no-repeat;
  background-size: contain;
}
.div2 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(/i/photo/flower.gif);
  background-repeat: no-repeat;
  background-size: cover;
}
.div3 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(/i/photo/flower.gif);
  background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>background-size 属性</h1>
<h2>background-size: contain:</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h2>background-size 未定义：</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<p>原始图像：</p>
<img src="/i/photo/flower.gif" alt="Flowers" width="224" height="162">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【定义背景图像的大小】：

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  background: url(/i/photo/tree.png) left top no-repeat, url(/i/photo/flower.gif) right bottom no-repeat, url(/i/paper.jpg) left top repeat;
  padding: 15px;
  background-size: 50px, 130px, auto;
}
</style>
</head>
<body>
<div id="example1">
  <h1>Welcome to Shanghai</h1>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【全尺寸的背景图像（完全覆盖内容区域）】：

<!DOCTYPE html>
<html>
<head>
<style>
html {
  background: url(/i/photo/tiyugongyuan.jpg) no-repeat center fixed;
  background-size: cover;
}
body {
  color: white;
}
</style>
</head>
<body>
<h1>完整页面的背景图像</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai! The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 background-origin 来规定放置背景图像的位置】：

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(/i/photo/flower.gif);
  background-repeat: no-repeat;
}
#example2 {
  border: 10px solid black;
  padding: 35px;
  background: url(/i/photo/flower.gif);
  background-repeat: no-repeat;
  background-origin: border-box;
}
#example3 {
  border: 10px solid black;
  padding: 35px;
  background: url(/i/photo/flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>
</head>
<body>
<h1>background-origin 属性</h1>
<p>未设置 background-origin (padding-box 为默认):</p>
<div id="example1">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>
<p>background-origin: border-box:</p>
<div id="example2">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>
<p>background-origin: content-box:</p>
<div id="example3">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 background-clip 来规定背景的绘制区域】：

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
}
#example2 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: padding-box;
}
#example3 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}
</style>
</head>
<body>
<h1>background-clip 属性</h1>
<p>No background-clip (border-box is default):</p>
<div id="example1">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 渐变

实例解释：CSS 渐变

完整实例【线性渐变 - 从上到下】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>线性渐变 - 从上到下</h1>
<p>此线性渐变从顶部开始为红色，然后在底部过渡为黄色：</p>
<div id="grad1"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【线性渐变 - 从左到右】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<h1>线性渐变 - 从左到右</h1>
<p>此线性渐变从左开始为红色，然后过渡到黄色（向右）：</p>
<div id="grad1"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【线性渐变 - 对角线】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<h1>线性渐变 - 对角线</h1>
<p>此线性渐变从左上开始为红色，然后过渡到黄色（到右下）：</p>
<div id="grad1"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【线性渐变 - 特定角度】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 100px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
  height: 100px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
  height: 100px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
  height: 100px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>
<h1>线性渐变 - 使用不同的角度</h1>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【线性渐变 - 多个色标】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(red, yellow, green);
}
#grad2 {
  height: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
#grad3 {
  height: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>
<h1>线性渐变 - 多个色标</h1>
<p><b>注释：</b>如果不规定百分百，则会均匀分布色标。</p>
<h2>三个色标 (evenly spaced)：</h2>
<div id="grad1"></div>
<h2>七个色标 (evenly spaced)：</h2>
<div id="grad2"></div>
<h2>三个色标 (not evenly spaced):</h2>
<div id="grad3"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【线性渐变 - 彩虹色 + 文本】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
彩虹背景
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【线性渐变 - 透明度】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<h1>线性渐变 - 透明度</h1>
<p>为了增加透明度，我们使用 rgba() 函数定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全色（不透明）。</p>
<div id="grad1"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【线性渐变 - 重复的线性渐变】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
#grad2 {
  height: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}
#grad3 {
  height: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}
#grad4 {
  height: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}
</style>
</head>
<body>
<h1>重复线性渐变</h1>
<div id="grad1"></div>
<p>在 45deg 轴上重复的渐变，从红色开始到绿色结束：</p>
<div id="grad2"></div>
<p>在 190deg 轴上重复的渐变，从红色开始到绿色结束：</p>
<div id="grad3"></div>
<p>在 90deg 轴上重复的渐变，从红色开始到绿色结束：</p>
<div id="grad4"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【径向渐变 - 均匀分布的色标】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>径向渐变 - 均匀间隔的色标</h1>
<div id="grad1"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【径向渐变 - 间距不同的色标】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>
<h1>径向渐变 - 不均匀间隔的色标</h1>
<div id="grad1"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【径向渐变 - 设置形状】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(red, yellow, green);
}
#grad2 {
  height: 150px;
  width: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<h1>径向渐变 - 形状</h1>
<h2>椭圆（默认）：</h2>
<div id="grad1"></div>
<h2>圆：</h2>
<div id="grad2"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【径向渐变 - 不同的尺寸关键字】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}
#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>
<h1>径向渐变 - 不同的 size 关键字s</h1>
<h2>closest-side:</h2>
<div id="grad1"></div>
<h2>farthest-side:</h2>
<div id="grad2"></div>
<h2>closest-corner:</h2>
<div id="grad3"></div>
<h2>farthest-corner (默认):</h2>
<div id="grad4"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【径向渐变 - 重复的径向渐变】：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>
<h1>重复的径向渐变</h1>
<div id="grad1"></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 阴影效果

实例解释：CSS 阴影效果

完整实例【简单的阴影效果】：
```
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>
```
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【向阴影添加颜色】：
```
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>
```
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【向阴影添加模糊效果】：
```
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>
```
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带黑色阴影的白色文本】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【红色霓虹灯发光阴影】：
```
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>
```
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【红色和蓝色霓虹灯发光阴影】：
```
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>
```
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【黑色、蓝色和深蓝色阴影的白色文本】：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【向元素添加简单的 box-shadow】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px;
}
</style>
</head>
<body>
<h1>box-shadow 属性</h1>
<div>已设置 box-shadow 的 div 元素</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【向 box-shadow 添加颜色】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px grey;
}
</style>
</head>
<body>
<div>已设置 box-shadow 的 div 元素</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【向 box-shadow 添加颜色和模糊效果】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px 5px grey;
}
</style>
</head>
<body>
<div>已设置 box-shadow 的 div 元素</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建类似纸质卡片（文本）】：

<!DOCTYPE html>
<html>
<head>
<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
div.header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 40px;
}
div.container {
  padding: 10px;
}
</style>
</head>
<body>
<h2>Cards</h2>
<p>box-shadow 属性可用于创建类似纸质的卡片：</p>
<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>
  <div class="container">
    <p>January 1, 2021</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建类似纸质卡片（宝丽来图像）】：

<!DOCTYPE html>
<html>
<head>
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
div.container {
  padding: 10px;
}
</style>
</head>
<body>
<h1>宝丽来图像 / 卡片</h1>
<p>box-shadow 属性可用于创建类似纸质的卡片：</p>
<div class="polaroid">
  <img src="/i/photo/coffee.jpg" alt="Shanghai" style="width:100%">
  <div class="container">
    <p>Shanghai, China</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 文本效果

实例解释：CSS 文本

完整实例【指定应如何向用户呈现未显示的溢出内容】：

<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}
p.test2 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>text-overflow 属性</h1>
<p>以下两段包含不适合其框的长文本。</p>
<h2>text-overflow: clip:</h2>
<p class="test1">这里有一些无法容纳在框中的长文本</p>
<h2>text-overflow: ellipsis:</h2>
<p class="test2">这里有一些无法容纳在框中的长文本</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【将鼠标悬停在元素上时如何显示溢出的内容】：

<!DOCTYPE html>
<html>
<head>
<style>
div.test {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  border: 1px solid #000000;
}
div.test:hover {
  overflow: visible;
}
</style>
</head>
<body>
<p>请把鼠标移动到下面的 div 上，来查看完整文本。</p>
<div class="test" style="text-overflow:ellipsis;">这里有一些无法容纳在框中的长文本</div>
<br>
<div class="test" style="text-overflow:clip;">这里有一些无法容纳在框中的长文本</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【允许长文字能够被折断并换到下一行】：

<!DOCTYPE html>
<html>
<head>
<style>
p.test {
  width: 11em;
  border: 1px solid #000000;
  word-wrap: break-word;
}
</style>
</head>
<body>
<h1>word-wrap 属性</h1>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定换行规则】：

<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
  width: 140px;
  border: 1px solid #000000;
  word-break: keep-all;
}
p.test2 {
  width: 140px;
  border: 1px solid #000000;
  word-break: break-all;
}
</style>
</head>
<body>
<h1>word-break 属性</h1>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>
<p class="test2">This paragraph contains some text. The lines will break at any character.</p>
<p><b>注释：</b>Opera 12 和更早版本不支持 word-break 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定文本的书写模式（横着写还是竖着写）】：

<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
  writing-mode: horizontal-tb;
}
span.test2 {
  writing-mode: vertical-rl;
}
p.test2 {
  writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1>writing-mode 属性</h1>
<p class="test1">Some text with default writing-mode.</p>
<p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>
<p class="test2">Some text with writing-mode: vertical-rl.</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS Web 字体

实例解释：CSS web 字体

完整实例【在 @font-face 规则中使用您自己的字体】：

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}
* {
   font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>@font-face 规则</h1>
<div>
通过 CSS，网站可以使用<b>预选的 "web-safe" 字体以外的其他字体</b>。
</div>
<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持 @font-face 规则。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【在 @font-face 规则中使用您自己的字体（粗体）】：

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}
@font-face {
   font-family: myFirstFont;
   src: url(sansation_bold.woff);
   font-weight: bold;
}
* {
   font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>@font-face 规则</h1>
<div>
通过 CSS，网站可以使用<b>预选的 "web-safe" 字体以外的其他字体</b>。
</div>
<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持 @font-face 规则。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 2D 转换

实例解释：CSS 2D 转换

完整实例【translate() - 从当前位置删除元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  transform: translate(50px,100px); /* 标准语法 */
}
</style>
</head>
<body>
<h1>translate() 方法</h1>
<p>translate() 方法从元素当前位置对其进行移动：</p>
<div>
该 div 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【rotate() - 顺时针旋转元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}
div#myDiv {
  -ms-transform: rotate(20deg); /* IE 9 */
  transform: rotate(20deg); /* 标准语法 */
}
</style>
</head>
<body>
<h1>rotate() 方法</h1>
<p>rotation() 方法顺时针或逆时针旋转元素。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
这个 div 元素顺时针旋转 20 度。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【rotate() - 逆时针旋转元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}
div#myDiv {
  -ms-transform: rotate(-20deg); /* IE 9 */
  transform: rotate(-20deg); /* 标准语法 */
}
</style>
</head>
<body>
<h1>rotate() 方法</h1>
<p>rotation() 方法顺时针或逆时针旋转元素。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
这个 div 元素逆时针旋转 20 度。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【scale() - 增加元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scale(2,3); /* IE 9 */
  transform: scale(2,3); /* 标准语法 */
}
</style>
</head>
<body>
<h1>scale() 方法</h1>
<p>scale() 方法增加或缩减元素的尺寸。</p>
<div>
该 div 元素是其原始宽度的两倍，是其原始高度的三倍。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【scale() - 减少元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scale(0.5,0.5); /* IE 9 */
  transform: scale(0.5,0.5); /* 标准语法 */
}
</style>
</head>
<body>
<h1>scale() 方法</h1>
<p>scale() 方法增加或缩减元素的尺寸。</p>
<div>
该 div 元素减小到其原始宽度和高度的一半。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【skewX() - 沿 X 轴倾斜元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}
div#myDiv {
  -ms-transform: skewX(20deg); /* IE 9 */
  transform: skewX(20deg); /* Standard syntax */
}
</style>
</head>
<body>
<h1>skewX() 方法</h1>
<p>skewX() 方法使元素沿 X 轴倾斜给定角度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素沿 X 轴倾斜 20 度。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【skewY() - 沿 Y 轴倾斜元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}
div#myDiv {
  -ms-transform: skewY(20deg); /* IE 9 */
  transform: skewY(20deg); /* 标准语法 */
}
</style>
</head>
<body>
<h1>skewY() 方法</h1>
<p>skewY() 方法使元素沿 Y 轴倾斜给定角度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素沿 Y 轴倾斜 20 度。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【skew() - 沿 X 和 Y 轴倾斜元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}
div#myDiv {
  -ms-transform: skew(20deg,10deg); /* IE 9 */
  transform: skew(20deg,10deg); /* 标准语法 */
}
</style>
</head>
<body>
<h1>skew() 方法</h1>
<p>skew() 方法将元素倾斜到给定角度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【matrix() - 旋转、缩放、移动和倾斜元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}
div#myDiv1 {
  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
  transform: matrix(1, -0.3, 0, 1, 0, 0); /* 标准语法 */
}
div#myDiv2 {
  -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
  transform: matrix(1, 0, 0.5, 1, 150, 0); /* 标准语法 */
}
</style>
</head>
<body>
<h1>matrix() 方法</h1>
<p>matrix() 方法将所有 2D 转换方法组合为一个。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv1">
使用 matrix() 方法。
</div>
<div id="myDiv2">
matrix() 方法的另一种用法。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 3D 转换

实例解释：CSS 3D 转换

完整实例【rotateX() - 将元素绕其 X 轴旋转给定角度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}
#myDiv {
  transform: rotateX(150deg);
}
</style>
</head>
<body>
<h1>rotateX() 方法</h1>
<p>rotationX() 方法将元素围绕其 X 轴旋转给定程度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素旋转了 150 度。
</div>
<p><b>注释：</b>Internet Explorer 9（以及更早的版本）不支持 rotateX() 方法。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【rotateY() - 将元素绕其 Y 轴旋转给定角度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}
#myDiv {
  transform: rotateY(150deg);
}
</style>
</head>
<body>
<h1>rotateY() 方法</h1>
<p>rotateY() 方法将元素围绕其 Y 轴旋转给定程度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素旋转了 150 度。
</div>
<p><b>注释：</b>Internet Explorer 9（以及更早的版本）不支持 rotateY() 方法。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【rotateZ() - 将元素绕其 Z 轴旋转给定角度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}
#myDiv {
  transform: rotateZ(90deg);
}
</style>
</head>
<body>
<h1>rotateZ() 方法</h1>
<p>rotateZ() 方法将元素围绕其 Z 轴旋转给定程度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素旋转了 90 度。
</div>
<p><b>注释：</b>Internet Explorer 9（以及更早的版本）不支持 rotateZ() 方法。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 过渡

实例解释：CSS 过渡

完整实例【过渡 - 更改元素的宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
div:hover {
  width: 300px;
}
</style>
</head>
<body>
<h1>transition 属性</h1>
<p>请把鼠标悬停在下面的 div 元素上，来查看过渡效果：</p>
<div></div>
<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【过渡 - 更改元素的宽度和高度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}
div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>
<h1>transition 属性</h1>
<p>请把鼠标悬停在下面的 div 元素上，来查看过渡效果：</p>
<div></div>
<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【为过渡规定不同的速度曲线】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover {
  width: 300px;
}
</style>
</head>
<body>
<h1>transition-timing-function 属性</h1>
<p>请把鼠标悬停在下面的 div 元素上，来查看不同的速度曲线：</p>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【为过渡效果规定延迟】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}
div:hover {
  width: 300px;
}
</style>
</head>
<body>
<h1>transition-delay 属性</h1>
<p>请把鼠标悬停在下面的 div 元素上，来查看过渡效果：</p>
<div></div>
<p><b>注释：</b>过渡效果在开始之前有 1 秒的延迟。</p>
<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【向过渡效果添加变换】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}
div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<p>请把鼠标悬停在下面的 div 元素上：</p>
<div></div>
<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【在一条简写属性中规定所有过渡属性】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}
div:hover {
  width: 300px;
}
</style>
</head>
<body>
<h1>使用 transition 简写属性</h1>
<p>请把鼠标悬停在下面的 div 元素上，来查看过渡效果：</p>
<div></div>
<p><b>注释：</b>过渡效果在开始之前有 1 秒的延迟。</p>
<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 动画

实例解释：CSS 动画

完整实例【把动画绑定到一个元素】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
<p><b>注释：</b>当动画结束后，会变回最初的样式。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【动画 - 改变一个元素的背景色】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【动画 - 改变一个元素的背景色和位置】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【延迟动画】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【在动画停止前运行三次】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【永远运行动画】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【从反方向运行动画】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【交替运行动画】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【动画的速度曲线】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 animation-timing-funtion 属性。</p>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【动画的简写属性】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 工具提示

实例解释：工具提示

完整实例【右侧工具提示】：

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* 定位工具提示 */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<h1>Right Tooltip</h1>
<p>请把鼠标移到下方文本上：</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【左侧工具提示】：

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* 定位工具提示 */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<h1>左侧工具提示</h1>
<p>请把鼠标移到下方文本上：</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【顶部工具提示】：

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* 定位工具提示 */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<h1>Top Tooltip</h1>
<p>请把鼠标移到下方文本上：</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【底部工具提示】：

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* 定位工具提示 */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<h1>下方工具提示</h1>
<p>请把鼠标移到下方文本上：</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带箭头的工具提示】：

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip w/ Bottom Arrow</h2>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【有动画效果的工具提示】：

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  /* 淡入工具提示 - 用 1 秒从完全不可见变为可见： */
  opacity: 0;
  transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
<body style="text-align:center;">
<h1>悬停时淡入的工具提示</h1>
<p>当您将鼠标移到下方的文本上时，工具提示文本将淡入并花费 1 秒的时间从完全不可见变为可见。</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 样式图像

实例解释：CSS 图像

完整实例【圆角图像】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border-radius: 8px;
}
</style>
</head>
<body>
<h1>圆角图像</h1>
<p>请使用 border-radius 属性来创建圆角图像：</p>
<img src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【圆形图像】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border-radius: 50%;
}
</style>
</head>
<body>
<h1>圆角图像</h1>
<p>请使用 border-radius 属性创建圆形的图像：</p>
<img src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【缩略图】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
</style>
</head>
<body>
<h1>缩略图</h1>
<p>请使用 border 属性来创建缩略图：</p>
<img src="/i/photo/tulip.jpg" alt="Tulip" style="width:150px">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【作为链接的缩略图】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>
<h1>作链接的缩略图</h1>
<p>请使用 border 属性创建缩略图。用锚包围图像以将其用作链接。</p>
<p>请把鼠标悬停在图像上，然后单击以查看效果。</p>
<a target="_blank" href="paris.jpg">
  <img src="/i/photo/tulip.jpg" alt="Tulip" style="width:150px">
</a>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式图像】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>
<h1>响应式图像</h1>
<p>自适应图像将自动调整以适合屏幕尺寸。</p>
<p>请调整浏览器窗口的大小以查看效果：</p>
<img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【图像文本（左上角）】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像左上角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="topleft">Top Left</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【图像文本（右上角）】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像右上角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="topright">Top Right</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【图像文本（左下角）】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像左下角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="bottomleft">Bottom Left</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【图像文本（右上角）】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>在图像右下角添加一些文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="bottomright">Bottom Right</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【图像文本（居中）】：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>居中图像中的文本：</p>
<div class="container">
  <img src="/i/logo/w3logo-2.png" alt="phpcodeweb" width="800" height="450">
  <div class="center">Centered</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【宝丽来图像】：

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:25px;}
div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}
div.container {
  text-align: center;
  padding: 10px 20px;
}
</style>
</head>
<body>
<h1>响应式宝丽来图像 / 卡片</h1>
<div class="polaroid">
  <img src="/i/photo/tulip-yellow.jpg" alt="Tulip" style="width:100%">
  <div class="container">
  <p>黄色郁金香</p>
  </div>
</div>
<div class="polaroid">
  <img src="/i/photo/tulip-red.jpg" alt="Tulip" style="width:100%">
  <div class="container">
  <p>红色郁金香</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【高级 - 通过 CSS 和 JavaScript 实现的图像模态】：

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1500px;
}
/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
/* Add Animation */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}
@keyframes zoom {
  from {transform: scale(0.1)}
  to {transform: scale(1)}
}
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>
</head>
<body>
<h1>图像模态</h1>
<p>在此例中，我们使用 CSS 创建默认情况下隐藏的模式（对话框）。</p>
<p>我们使用 JavaScript 触发模态，并在单击模态时在模态内显示当前图像。还请注意，我们将图像的“alt”属性中的值用作模态内的图像标题文本。</p>
<p>如果您无法立即理解代码，请不要担心。学习完 CSS 后，请转到我们的 JavaScript 教程学习更多相关知识。</p>
<img id="myImg" src="/i/photo/tiyugongyuan.jpg" alt="绿茵场" style="width: 50%;">
<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS Object-fit

实例解释：Object-fit

完整实例【剪裁图像的两边，保留长宽比，然后填充空间】：

<!DOCTYPE html>
<html>
<body>
<h1>使用 object-fit</h1>
<p>此处我们用了 "object-fit: cover;"，因此如果我们调整浏览器窗口大小，图像的高宽比会被保留：</p>
<div style="width:100%;height:400px;">
  <img src="/i/photo/tiyugongyuan.jpg" alt="Shanghai" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="/i/photo/tulip.jpg" alt="Tulip" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【所有 object-fit 属性值的例子】：

<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>
<h1>object-fit 属性</h1>
<h2>No object-fit:</h2>
<img src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
<h2>object-fit: contain:</h2>
<img class="contain" src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
<h2>object-fit: cover:</h2>
<img class="cover" src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
<h2>object-fit: none:</h2>
<img class="none" src="/i/photo/tulip.jpg" alt="Tulip" style="width:200px;height:400px">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 按钮

实例解释：CSS 按钮

完整实例【基础的 CSS 按钮】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>
<h1>CSS 按钮</h1>
<button>默认按钮</button>
<a href="#" class="button">链接按钮</a>
<button class="button">按钮</button>
<input type="button" class="button" value="输入按钮">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【按钮颜色】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* 绿色 */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 黑色 */
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */
.button5 {background-color: #555555;} /* 黑色 */
</style>
</head>
<body>
<h1>按钮颜色</h1>
<p>通过 background-color 属性改变按钮的背景色：</p>
<button class="button">绿色</button>
<button class="button button2">蓝色</button>
<button class="button button3">红色</button>
<button class="button button4">灰色</button>
<button class="button button5">黑色</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【按钮尺寸】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* 绿色 */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h1>按钮大小</h1>
<p>通过 font-size 属性改变按钮的字体大小：</p>
<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【圆角按钮】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* 绿色 */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>
<h1>圆角按钮</h1>
<p>通过 border-radius 属性为按钮添加圆角：</p>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带颜色的按钮边框】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* 绿色 */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}
.button3 {
  background-color: white;
  color: black;
  border: 2px solid #f44336;
}
.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}
.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}
</style>
</head>
<body>
<h1>有颜色的按钮边框</h1>
<p>请使用 border 属性为按钮添加边框：</p>
<button class="button button1">绿色</button>
<button class="button button2">蓝色</button>
<button class="button button3">黑色</button>
<button class="button button4">灰色</button>
<button class="button button5">黑色</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【可悬停的按钮】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}
.button3 {
  background-color: white;
  color: black;
  border: 2px solid #f44336;
}
.button3:hover {
  background-color: #f44336;
  color: white;
}
.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}
.button4:hover {background-color: #e7e7e7;}
.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}
.button5:hover {
  background-color: #555555;
  color: white;
}
</style>
</head>
<body>
<h1>可悬停的按钮</h1>
<p>使用 :hover 选择器在鼠标移动到按钮上时改变其样式。</p>
<p><b>提示：</b>请使用 transition-duration 属性来确定悬停效果的速度：</p>
<button class="button button1">绿色</button>
<button class="button button2">蓝色</button>
<button class="button button3">红色</button>
<button class="button button4">灰色</button>
<button class="button button5">黑色</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带阴影的按钮】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<h1>阴影按钮</h1>
<p>使用 box-shadow 属性为按钮添加阴影：</p>
<button class="button button1">阴影按钮</button>
<button class="button button2">悬停时的阴影</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【被禁用的按钮】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* 绿色 */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>
</head>
<body>
<h1>被禁用的按钮</h1>
<p>使用 opacity 属性向按钮添加一定的透明度（使它看上去已被禁用）</p>
<button class="button">正常按钮</button>
<button class="button disabled">被禁用的按钮</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【按钮宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
</style>
</head>
<body>
<h1>按钮宽度</h1>
<p>使用 width 属性来改变按钮的宽度：</p>
<p><b>提示：</b>请使用像素设置固定宽度，并为响应式按钮使用百分百（例如其父元素的 50%）。请调整窗口大小来查看效果。</p>
<button class="button button1">250px</button><br>
<button class="button button2">50%</button><br>
<button class="button button3">100%</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【按钮分组】：

<!DOCTYPE html>
<html>
<head>
<style>
.btn-group .button {
  background-color: #4CAF50; /* 绿色 */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}
.btn-group .button:hover {
  background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>按钮组</h1>
<p>删除外边距并浮动按钮，来创建一个按钮组：</p>
<div class="btn-group">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>
<p style="clear:both"><br>请记得之后清除浮动，否则这个 p 元素会向按钮浮动。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带边框的按钮分组】：

<!DOCTYPE html>
<html>
<head>
<style>
.btn-group .button {
  background-color: #4CAF50; /* 绿色 */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}
.btn-group .button:not(:last-child) {
  border-right: none; /* 阻止双边框 */
}
.btn-group .button:hover {
  background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>带边框的按钮组</h1>
<p>添加边框，来创建带按钮的按钮组：</p>
<div class="btn-group">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>
<p style="clear:both"><br>请记得之后清除浮动，否则这个 p 元素会向按钮浮动。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带动画的按钮（悬停效果）】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
</head>
<body>
<h1>带动画效果的按钮</h1>
<button class="button" style="vertical-align:middle"><span>请悬停在我上方</span></button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带动画的按钮（按键效果）】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<body>
<h1>带动画效果的按钮 - 按键效果</h1>
<button class="button">请点击我</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带动画的按钮（涟漪效果）】：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  position: relative;
  background-color: #4CAF50;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}
.button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}
.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}
</style>
</head>
<body>
<h1>带动画效果的按钮 - 涟漪效果</h1>
<button class="button">请点击我</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 分页

实例解释：CSS 分页

完整实例【简单的分页】：

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>
</head>
<body>
<h1>简单分页</h1>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【活动的、可悬停的分页】：

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h1>活动的可悬停分页</h1>
<p>请把鼠标移动到数字上：</p>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带圆角的活动可悬停分页】：

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}
.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}
</style>
</head>
<body>
<h1>活动的可悬停的圆角分页</h1>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【可悬停的过渡效果】：

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}
.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h1>悬停时的过渡效果</h1>
<p>请把鼠标移动到数字上。</p>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带边框的分页】：

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}
.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h1>带边框的分页</h1>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【圆角带边框的分页】：

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
}
.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
</style>
</head>
<body>
<h1>带圆角边框的分页</h1>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【链接之间隔着空白的分页】：

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}
.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h1>带外边距的分页：</h1>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【分页的大小】：

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  font-size: 22px;
}
.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h1>分页尺寸</h1>
<p>更改 font-size 属性以使分页变小或变大。</p>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【居中的分页】：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}
.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h1>居中分页</h1>
<div class="center">
  <div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【面包屑】：

<!DOCTYPE html>
<html>
<head>
<style>
ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>
<h1>面包屑分页</h1>
<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 多列

实例解释：CSS 多列

完整实例【创建多列】：

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
}
</style>
</head>
<body>
<div class="newspaper">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定列之间的间隙】：

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
}
</style>
</head>
<body>
<div class="newspaper">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定列之间的规则样式】：

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
}
</style>
</head>
<body>
<div class="newspaper">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定列之间的规则宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-width: 1px;
}
</style>
</head>
<body>
<div class="newspaper">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定列之间的规则颜色】：

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: lightblue;
}
</style>
</head>
<body>
<div class="newspaper">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定列之间的规则的宽度、样式和颜色】：

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}
</style>
</head>
<body>
<div class="newspaper">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定元素应该横跨多少列】：

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}
h2 {
  column-span: all;
}
</style>
</head>
<body>
<div class="newspaper">
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【为列规定建议的最佳宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-width: 100px;
}
</style>
</head>
<body>
<div class="newspaper">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 用户界面

实例解释：CSS 用户界面

完整实例【允许用户调整元素的宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 2px solid;
  padding: 20px;
  width: 300px;
  resize: horizontal;
  overflow: auto;
}
</style>
</head>
<body>
<h1>resize 属性</h1>
<div>
  <p>只允许用户调整 div 元素的宽度。</p>
  <p>如需调整：请点击并拖动 div 元素的右下角。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【允许用户调整元素的高度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 2px solid;
  padding: 20px;
  width: 300px;
  resize: vertical;
  overflow: auto;
}
</style>
</head>
<body>
<h1>resize 属性</h1>
<div>
  <p>只允许用户调整 div 元素的高度。</p>
  <p>如需调整：请点击并拖动 div 元素的右下角。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【允许用户同时调整元素的宽度和高度】：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 2px solid;
  padding: 20px;
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>
</head>
<body>
<h1>resize 属性</h1>
<div>
  <p>允许用户调整 div 元素的高度和宽度。</p>
  <p>如需调整：请点击并拖动 div 元素的右下角。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【在元素轮廓与边框之间添加空间】：

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
}
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}
</style>
</head>
<body>
<h1>outline-offset 属性</h1>
<div class="ex1">这个 div 有 4 像素的红色实线轮廓，位于边框边缘外 15 像素处。</div>
<br>
<div class="ex2">这个 div 有 5 像素的蓝色虚线轮廓，位于边框边缘外 5 像素处。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 变量

实例解释：CSS 变量

完整实例【使用 var() 函数】：

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>
<h1>使用 var() 函数</h1>
<div class="container">
  <h2>Welcome to Shanghai!</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用 var() 函数来插入若干自定义的属性值】：

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>
<h1>使用 var() 函数</h1>
<div class="container">
  <h2>Welcome to Shanghai!</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS Box Sizing

实例解释：CSS box sizing

完整实例【不设置 box-sizing 的元素宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">这个 div 更小（宽度为 300 像素，高度为 100 像素）。</div>
<br>
<div class="div2">这个 div 更大（宽度也是 300 像素，高度也是 100 像素）。</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【设置 box-sizing 的元素宽度】：

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">现在，两个 div 的尺寸是一样的！</div>
<br>
<div class="div2">Hello！</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【表单元素 + box-sizing】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
input, textarea {
  width: 100%;
}
</style>
</head>
<body>
<form action="/demo/demo_form.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br>
  Comments:<br>
  <textarea name="message" rows="5" cols="30">

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 弹性盒

实例解释：CSS flexbox

完整实例【带有三个弹性项目的弹性盒】：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【带有三个弹性项目的弹性盒 - rtl 方向】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  direction: rtl;
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【弹性项目排序】：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}
.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>order 属性</h1>
<p>使用 order 属性可以根据需要对 flex 项目进行排序：</p>
<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【Margin-right:auto;】：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 75px;
  height: 75px;
  margin: 10px;
}
.flex-item:first-child {
  margin-right: auto;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【Margin:auto; = 完美的居中】：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 75px;
  height: 75px;
  margin: auto;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">完美的居中！</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【在弹性项目上设置 align-self】：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 60px;
  min-height: 100px;
  margin: 10px;
}
.item1 {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.item2 {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}
.item3 {
  -webkit-align-self: center;
  align-self: center;
}
.item4 {
  -webkit-align-self: baseline;
  align-self: baseline;
}
.item5 {
  -webkit-align-self: stretch;
  align-self: stretch;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item5">stretch</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【规定弹性项目的长度，相对于弹性项目的其余部分】：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  margin: 10px;
}
.item1 {
  -webkit-flex: 2;
  flex: 2;
}
.item2 {
  -webkit-flex: 1;
  flex: 1;
}
.item3 {
  -webkit-flex: 1;
  flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【用弹性盒创建响应式的图片库】：

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial;
}
.header {
  text-align: center;
  padding: 32px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
/* 创建并排的四个等列 */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
}
/* 响应式布局 - 创建两列而不是四列布局 */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}
/* 响应式布局 - 创建上下堆叠而不是并排的两列布局 */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>
<!-- Header -->
<div class="header">
  <h1>响应式图像网格</h1>
  <p>请调整浏览器窗口，来查看响应效果。</p>
</div>
<!-- Photo Grid -->
<div class="row">
  <div class="column">
    <img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
	<img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
	<img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【用弹性盒创建响应式网站】：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* 设置 body 元素的样式 */
body {
  font-family: Arial;
  margin: 0;
}
/* 标题 / LOGO */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}
/* 设置顶部导航栏样式 */
.navbar {
  display: flex;
  background-color: #333;
}
/* 设置导航条链接演示 */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}
/* 更改鼠标悬停时的颜色 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* 列容器 */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* 创建并排的非等列 */
/* 侧栏 / 左侧列 */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}
/* 主列 */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}
/* 伪图像，仅供示例 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}
/* 响应式布局 - 当屏幕小于 700 像素宽时，让两列堆叠而不是并排 */
@media screen and (max-width: 700px) {
  .row, .navbar {
    flex-direction: column;
  }
}
</style>
</head>
<body>
<!-- 注释 -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">请调整浏览器窗口来查看响应效果。</h4>
</div>
<!-- Header -->
<div class="header">
  <h1>我的网站</h1>
  <p>拥有 <b>弹性</b> 布局。</p>
</div>
<!-- 导航栏 -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
<!-- 弹性网格（内容） -->
<div class="row">
  <div class="side">
    <h2>关于我</h2>
    <h5>我的照片：</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">图像</div><br>
    <div class="fakeimg" style="height:60px;">图像</div><br>
    <div class="fakeimg" style="height:60px;">图像</div>
  </div>
  <div class="main">
    <h2>标题</h2>
    <h5>标题描述，2021 年 1 月 1 日</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>一些文本..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>标题</h2>
    <h5>标题描述，2021 年 1 月 2 日</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>一些文本..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>
<!-- Footer -->
<div class="footer">
  <h2>页脚</h2>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 媒体查询

实例解释：CSS 媒体查询

完整实例【如果视口宽度为 480 像素或更宽，则将背景色改为浅绿色】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: pink;
}
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
</style>
</head>
<body>
<h1>请调整浏览器窗口大小来查看效果！</h1>
<p>此媒体查询值应用于：媒体类型为 screen，且视口为 480px 或更宽。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【如果视口宽度为 480 像素或更宽，显示一个浮动到页面左侧的菜单】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
  float: none;
  width: auto;
}
#menulist {
  margin: 0;
  padding: 0;
}
.menuitem {
  background: #CDF0F6;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}
@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
  <div id="leftsidebar">
    <ul id="menulist">
      <li class="menuitem">Menu-item 1</li>
      <li class="menuitem">Menu-item 2</li>
      <li class="menuitem">Menu-item 3</li>
      <li class="menuitem">Menu-item 4</li>
      <li class="menuitem">Menu-item 5</li>
    </ul>
  </div>
  <div id="main">
    <h1>请调整浏览器窗口大小来查看效果！</h1>
    <p>本例显示了一个菜单，如果视口为 480 像素或更宽，它将向页面左侧浮动。如果视口小于 480 像素，则菜单将位于内容的顶部。</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 媒体查询 - 更多实例

实例解释：CSS 媒体查询实例

完整实例【根据屏幕宽度设置不同的背景色】：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: tan;
  color: black;
}
/* 在宽度为 992px 或更小的屏幕上，背景颜色为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
    color: white;
  }
}
/* 在宽度为 600px 或更小的屏幕上，背景色为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
    color: white;
  }
}
</style>
</head>
<body>
<h1>请调整浏览器窗口大小以查看效果！</h1>
<p>默认情况下，文档的背景色为棕褐色。如果屏幕尺寸为 992px 或更小，则颜色将变为蓝色。如果小于或等于 600px，它将变为橄榄色。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式的导航菜单】：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* 设置顶部导航栏样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 悬停时改变颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* 在宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>
<h1>响应式导航菜单</h1>
<p>请调整浏览器窗口的大小以查看效果：当屏幕小于 600 像素时，导航菜单将垂直显示，而不是水平显示。</p>
<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用浮动的响应式列】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* 创建彼此相邻浮动的四个等列 */
.column {
  float: left;
  width: 25%;
  padding: 20px;
}
/* 清除列后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 在宽度小于或等于 600px 的屏幕上，使列堆叠在一起，而不是彼此相邻 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>
<h1>响应式四列布局</h1>
<p><b>请调整浏览器窗口的大小以查看响应效果。</b>在宽度小于或等于 992px 的屏幕上，列的大小将从四列调整为两列。在宽度为 600px 或更小的屏幕上，这些列将堆叠在一起，而不是彼此相邻。</p>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【使用弹性盒的响应式列】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* 弹性框的容器 */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* 创建四个等列 */
.column {
  flex: 25%;
  padding: 20px;
}
/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* 在宽度小于或等于 60px 的屏幕上，使列堆叠在一起，而不是彼此相邻 */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}
</style>
</head>
<body>
<h1>响应式四列弹性布局</h1>
<p><b>请调整浏览器窗口的大小以查看响应效果。</b>在宽度小于或等于 992px 的屏幕上，列的大小将从四列调整为两列。在宽度为 600px 或更小的屏幕上，这些列将堆叠在一起，而不是彼此相邻。</p>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【通过媒体查询隐藏元素】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: yellow;
  padding: 20px;
}
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
</style>
</head>
<body>
<h1>隐藏不同屏幕尺寸的元素</h1>
<div class="example">Example DIV.</div>
<p>当浏览器的宽度为 600 像素或更小时，隐藏 div 元素。请调整浏览器窗口的大小以查看效果。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式字体大小】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: lightgrey;
  padding: 20px;
}
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
</style>
</head>
<body>
<h1>在不同的屏幕尺寸上更改元素的字体大小</h1>
<div class="example">Example DIV.</div>
<p>当浏览器的宽度为 600 像素或更小时，将 DIV 的字体大小设置为 30px。当它是 601 像素或更宽时，将字体大小设置为 80 像素。请调整浏览器窗口的大小以查看效果。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式图片库】：

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial;
}
.header {
  text-align: center;
  padding: 32px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
/* 创建彼此相邻的四个相等的列 */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
}
/* 响应式布局 - 制作两列而不是四列的布局 */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}
/* 响应式布局 - 使两列相互堆叠而不是彼此并排 */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>
<!-- Header -->
<div class="header">
  <h1>响应式图像网格</h1>
  <p>请调整浏览器窗口的大小以查看响应效果。</p>
</div>
<!-- Photo Grid -->
<div class="row">
  <div class="column">
    <img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
	<img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
	<img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式网站】：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* 设置 body 的样式 */
body {
  font-family: Arial;
  margin: 0;
}
/* 页眉/LOGO */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}
/* 设置顶部导航栏的样式 */
.navbar {
  display: flex;
  background-color: #333;
}
/* 设置导航栏链接的样式 */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}
/* 悬停时改变颜色 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* 列容器 */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* 创建两个彼此相邻的不相等的列 */
/* 侧栏/左侧列 */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}
/* 主列 */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}
/* 伪图像，仅用于此例 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}
/* 响应式布局 - 当屏幕宽度小于 700 像素时，使两列相互堆叠，而不是彼此相邻 */
@media screen and (max-width: 700px) {
  .row, .navbar {
    flex-direction: column;
  }
}
</style>
</head>
<body>
<!-- Note -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">请调整浏览器窗口的大小以查看响应效果。</h4>
</div>
<!-- Header -->
<div class="header">
  <h1>My Website</h1>
  <p>With a <b>flexible</b> layout.</p>
</div>
<!-- Navigation Bar -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
<!-- The flexible grid (content) -->
<div class="row">
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div>
  </div>
  <div class="main">
    <h2>TITLE HEADING</h2>
    <h5>Title description, Dec 7, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>TITLE HEADING</h2>
    <h5>Title description, Sep 2, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>
<!-- Footer -->
<div class="footer">
  <h2>Footer</h2>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【根据浏览器方向改变页面布局】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: lightgreen;
}
@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>
<p>请调整浏览器窗口的大小。如果此文档的宽度大于高度，背景色为“浅蓝色”，否则为“浅绿色”。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【最小宽度到最大宽度】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
</style>
</head>
<body>
<h1>在不同的屏幕尺寸上更改 DIV 的外观</h1>
<div class="example">Example DIV.</div>
<p>当浏览器的宽度在 600 到 900 像素之间时，更改 DIV 的外观。<b>请调整浏览器窗口大小以查看效果。</b></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 响应式 Web 设计

实例解释：CSS 响应式 Web 设计

完整实例【响应式网格视图】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
[class*="col-"] {
  float: left;
  padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
  <h1>Shanghai</h1>
</div>
<div class="row">
  <div class="col-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>
  <div class="col-9">
    <h1>The City</h1>
    <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
    <p>请调整浏览器窗口的大小，来查看内容如何响应调整大小。</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【为台式机、笔电和手机添加断点】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
[class*="col-"] {
  float: left;
  padding: 15px;
}
html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: #0099cc;
}
.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* 针对平板电脑： */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* 针对桌面： */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="header">
  <h1>Shanghai</h1>
</div>
<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>交通</li>
      <li>文化</li>
      <li>旅游</li>
      <li>美食</li>
    </ul>
  </div>
  <div class="col-6 col-s-9">
    <h1>欢迎来到上海</h1>
    <p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p>
  </div>
  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>历史</h2>
      <p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p>
      <h2>位置</h2>
      <p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接 ...</p>
      <h2>环境</h2>
      <p>上海地处江南水乡，并位于长江入海口，亦不处于主要地震带上，因此如地震、洪水以及地质类灾害鲜有发生 ...</p>
    </div>
  </div>
</div>
<div class="footer">
  <p>请调整浏览器窗口的大小，以查看内容如何响应调整大小。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【典型的断点】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
  padding: 20px;
  color: white;
}
/* 超小型设备（600px及以下的手机） */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}
/* 小型设备（平板电脑竖屏模式和大屏手机，600 像素及以上） */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}
/* 中型设备（平板电脑横屏模式，768 像素及以上） */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
}
/* 大型设备（笔电、台式机，992 像素及以上） */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
}
/* 超大型设备（大屏笔电、台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}
</style>
</head>
<body>
<h1>典型的媒体查询断点</h1>
<p class="example">请调整浏览器窗口的大小，来查看该段落的背景色在不同屏幕尺寸下如何变化。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式图像】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>
<img src="/i/photo/shanghai.jpg" width="460" height="306">
<p>调整浏览器窗口的大小，来查看图像如何缩放。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式视频】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>
<video width="400" controls>
  <source src="/i/photo/shanghai.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<p>请调整浏览器窗口的大小，来查看视频播放器如何缩放。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式框架：W3.CSS】：

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.phpcodeweb.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-green">
  <h1>phpcodeweb Demo</h1>
  <p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>
  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【响应式框架：Bootstrap】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="jumbotron">
    <h1>我的第一张 Bootstrap 页面</h1>
    <p>请调整这张响应式页面来查看效果！</p>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>列 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>列 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>列 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 网格

实例解释：CSS 网格

完整实例【网格布局】：

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>网格布局</h1>
<p>这个网格布局包含六列三行：</p>
<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【网格元素】：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>
<h1>网格元素</h1>
<p>网格布局必须有一个 <em>display</em> 属性设置为 <em>grid</em> 或 <em>inline-grid</em> 的父元素。</p>
<p>网格容器的直接子元素自动成为网格项目。</p>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【网格列间隙】：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>
<h1>grid-column-gap 属性：</h1>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
<p>请使用 <em>grid-column-gap</em> 属性调整列之间的空间。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【网格行】：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>
<h1>网格行</h1>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>
<p>您可以在放置网格项时引用行号。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【网格容器】：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>网格容器</h1>
<p>网格容器由按列和行排列的网格项目组成：</p>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<p>网格容器的直接子元素将自动成为网格项目。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【网格项目】：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}
.item1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.item2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.item5 {
  grid-column: 1 / span 3;
  grid-row: 3;
}
</style>
</head>
<body>
<h1>五项目的网格布局：</h1>
<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>
  <div class="grid-item item4">4</div>
  <div class="grid-item item5">5</div>
</div>
<p>网格容器的直接子元素自动成为网格项目。</p>
<p>Item 1、2 以及 5 被设置为横跨多列或行。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

上一篇CSS 网格项目详解下一篇CSS 测验

CSS 经典 实例 汇总

CSS 实例

CSS 语法

完整实例【CSS 语法】：

CSS 选择器

完整实例【元素选择器】：

完整实例【id 选择器】：

完整实例【类选择器（针对所有元素）】：

完整实例【类选择器（只针对 <p> 元素）】：

完整实例【引用两个类的 HTML 元素】：

完整实例【通用选择器】：

完整实例【分组选择器】：

CSS 使用

完整实例【外部 CSS】：

完整实例【内部 CSS】：

完整实例【行内 CSS】：

完整实例【多个样式表】：

完整实例【层叠顺序】：

CSS 注释

完整实例【单行注释】：

完整实例【多行注释】：

CSS 颜色

完整实例【设置颜色的背景色】：

完整实例【设置文本颜色】：

完整实例【设置边框颜色】：

完整实例【设置不同的颜色值】：

完整实例【设置 RGB 值】：

完整实例【设置 HEX 值】：

完整实例【设置 HSL 值】：

CSS 背景

完整实例【设置页面的背景色】：

完整实例【设置不同元素的背景色】：

完整实例【把图像设置为页面背景】：

完整实例【如何只在水平方向重复背景图像】：

完整实例【如何定位背景图像】：

完整实例【固定的背景图像（该图像不会随着页面的其余部分滚动）】：

完整实例【所有背景属性在一条声明中】：

完整实例【高级背景实例】：

CSS 边框

完整实例【设置左边框的宽度】：

完整实例【设置四条边框的样式】：

完整实例【设置下边框的样式】：

完整实例【设置四条边框的颜色】：

完整实例【设置右边框的颜色】：

完整实例【所有边框属性在一条声明中】：

完整实例【为元素添加圆角】：

完整实例【所有上边框属性在一条声明中】：

CSS 外边距

完整实例【为元素的各边规定不同的外边距】：

完整实例【使用带有四个值的简写 margin 属性】：

完整实例【使用带有三个值的简写 margin 属性】：

完整实例【使用带有两个值的简写 margin 属性】：

完整实例【使用带有一个值的简写 margin 属性】：

完整实例【把外边距设置 auto，来居中其容器内的元素】：

完整实例【让左外边距继承父元素】：

完整实例【外边距合并】：

CSS 内边距

完整实例【为元素的各边规定不同的内边距】：

完整实例【使用带有四个值的简写内边距】：

完整实例【使用带有三个值的简写内边距】：

完整实例【使用带有两个值的简写内边距】：

完整实例【使用带有一个值的简写内边距】：

完整实例【内边距和元素宽度（不设置 box-sizing）】：

完整实例【内边距和元素宽度（设置 box-sizing）】：

CSS 高度/宽度

完整实例【设置元素的高度和宽度】：

完整实例【设置元素的最大宽度】：

完整实例【设置不同元素的高度和宽度】：

完整实例【使用百分百来设置图像的高度和宽度】：

完整实例【设置元素的最小宽度和最大宽度】：

完整实例【设置元素的最小高度和最大高度】：

CSS 盒模型

完整实例【演示盒模型】：

完整实例【规定总宽度为 250 像素的元素】：

CSS 轮廓

完整实例【设置轮廓的样式】：

完整实例【设置轮廓的颜色】：

完整实例【使用 outline-color：翻转轮廓】：

完整实例【设置轮廓的宽度】：

完整实例【使用简写的轮廓属性】：

CSS 经典实例汇总