CSS 基础

1 CSS 选择器

1.1 CSS 选择器参考手册

选择器	示例	示例说明
.class	.intro	选择所有class="intro"的元素
#id	#firstname	选择所有id="firstname"的元素
*	*	选择所有元素
element	p	选择所有<p>元素
element,element	div,p	选择所有<div>元素和<p>元素
element element	div p	选择<div>元素内的所有<p>元素
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素
element+element	div+p	选择所有紧跟在 <div> 元素之后的第一个 <p> 元素
[attribute]	[target]	选择所有带有target属性元素
[attribute=value]	[target=_blank]	选择所有使用target="_blank"的元素
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素
[attribute|=language]	[lang|=en]	选择 lang 属性以 en 为开头的所有元素

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择活动链接
:hover	a:hover	选择鼠标在链接上面时

1.2 id 选择器、class 选择器

id 选择器：

#para1
{
    text-align:center;
    color:red;
}

class 选择器：

.center 
{
    text-align:center;
}

在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中：

p.center 
{
    text-align:center;
}

注意事项：

• ID属性不要以数字开头

• 类名的第一个字符不能使用数字

1.3 分组和嵌套选择器

分组选择器：

每个选择器用逗号分隔。

h1,h2,p
{
    color:green;
}

嵌套选择器：

它可能适用于选择器内部的选择器的样式。

• p{ }: 为所有 p 元素指定一个样式
• .marked{ }: 为所有 class=“marked” 的元素指定一个样式
• .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式
• p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式

1.4 组合选择符

组合选择符说明了两个选择器直接的关系。

在 CSS3 中包含了四种组合方式:

• 后代选择器(以空格 分隔)
• 子元素选择器(以大于 > 号分隔）
• 相邻兄弟选择器（以加号 + 分隔）
• 普通兄弟选择器（以波浪号 ～ 分隔）

后代选择器：

后代选择器用于选取某元素的后代元素。

以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p
{
  background-color:yellow;
}

子元素选择器：

与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p
{
  background-color:yellow;
}

相邻兄弟选择器：

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素：

div+p
{
  background-color:yellow;
}

后续兄弟选择器：

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p
{
  background-color:yellow;
}

1.5 伪类

anchor伪类：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：伪类的名称不区分大小写。

first-child 伪类：

使用 :first-child 伪类来选择父元素的第一个子元素。

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：

p:first-child
{
    color:blue;
}

在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：

p > i:first-child
{
    color:blue;
}

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

p:first-child i
{
    color:blue;
}

1.6 伪元素

:first-line 伪元素：

在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化：

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

注意：“first-line” 伪元素只能用于块级元素。

:first-letter 伪元素：

“first-letter” 伪元素用于向文本的首字母设置特殊样式：

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

注意： “first-letter” 伪元素只能用于块级元素。

:before 伪元素：

“:before” 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1>元素前面插入一幅图片：

h1:before 
{
    content:url(smiley.gif);
}

:after 伪元素：

“:after” 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片：

h1:after
{
    content:url(smiley.gif);
}

:focus 伪元素：

示例：input:focus，选择元素输入后具有焦点。

1.7 属性选择器

[title]
{
    color:blue;
}

[title=runoob]
{
    border:5px solid green;
}

[title~=hello] 
{
    color:blue; 
}

[lang|=en] 
{
    color:blue; 
}

表单样式

属性选择器样式无需使用class或id的形式：

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

2 CSS属性

2.1 背景

属性	描述
background	复合属性，设置对象的背景特性
background-color	设置或检索对象的背景颜色
background-image	设置或检索对象的背景图像
background-repeat	设置或检索对象的背景图像如何铺排填充，必须先指定background-image属性
background-attachment	设置或检索背景图像是随对象内容滚动还是固定的，必须先指定background-image属性

示例1：

body 
{
background-color:#b0c4de;
background-image:url('https://static.runoob.com/images/mix/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

示例2：

body
{
	background:#ffffff url('https://static.runoob.com/images/mix/img_tree.png') no-repeat right top;
	margin-right:200px;
}

2.2 文本

属性	描述
color	设置文本颜色
text-align	对齐元素中的文本，当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）
text-decoration	向文本添加修饰，主要是用来删除链接的下划线
text-transform	控制元素中的字母，可用于所有字句变成大写或小写字母，或每个单词的首字母大写
text-indent	缩进元素中文本的首行
letter-spacing	设置字符间距
word-spacing	设置字间距

• body {color:red;}
  h1 {color:#00ff00;}
  h2 {color:rgb(255,0,0);}
  

• h1 {text-align:center;}
  p.date {text-align:right;}
  p.main {text-align:justify;}
  

• a {text-decoration:none;}
  h1 {text-decoration:overline;}
  h2 {text-decoration:line-through;}
  h3 {text-decoration:underline;}
  

• p.uppercase {text-transform:uppercase;}
  p.lowercase {text-transform:lowercase;}
  p.capitalize {text-transform:capitalize;}
  

• p {text-indent:50px;}
  

注意事项：

• 对于W3C标准的CSS：如果定义了颜色属性，则还必须定义背景色属性。

• 我们不建议强调指出不是链接的文本，因为这常常混淆用户

• 汉字的间隔调节也是用 letter-spacing 来实现的。因为中文段落里字与字之间没有空格，因而 word-spacing 通常起不到调整间距的作用

2.3 字体

属性	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式，主要是用于指定斜体文字的字体样式属性
font-weight	指定字体的粗细

• p{font-family:"Times New Roman", Times, serif;}
  

• p.normal {font-style:normal;}
  p.italic {font-style:italic;}
  

• h1 {font-size:40px;}
  h2 {font-size:30px;}
  p {font-size:14px;}
  

  为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

  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 */
  

  在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

  在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：

  body {font-size:100%;}
  h1 {font-size:2.5em;}
  h2 {font-size:1.875em;}
  p {font-size:0.875em;}
  

  在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

• p.normal {font-weight:normal;}
  p.light {font-weight:lighter;}
  p.thick {font-weight:bold;}
  p.thicker {font-weight:900;}
  

• p.ex1
  {
  	font:15px arial,sans-serif;
  }
  
  p.ex2
  {
  	font:italic bold 12px/30px Georgia,serif;
  }
  

注意事项：

​ font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。多个字体系列是用一个逗号分隔指明。

2.4 链接

• a:link {color:#000000;}      /* 未访问链接*/
  a:visited {color:#00FF00;}  /* 已访问链接 */
  a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
  a:active {color:#0000FF;}  /* 鼠标点击时 */
  

• a:link {text-decoration:none;}
  a:visited {text-decoration:none;}
  a:hover {text-decoration:underline;}
  a:active {text-decoration:underline;}
  

• a:link {background-color:#B2FF99;}
  a:visited {background-color:#FFFF85;}
  a:hover {background-color:#FF704D;}
  a:active {background-color:#FF704D;}
  

• a:link,a:visited
  {
  	display:block;
  	font-weight:bold;
  	color:#FFFFFF;
  	background-color:#98bf21;
  	width:120px;
  	text-align:center;
  	padding:4px;
  	text-decoration:none;
  }
  a:hover,a:active
  {
  	background-color:#7A991A;
  }
  

注意事项：

• 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）

• 当设置为若干链路状态的样式，也有一些顺序规则：

  1. a:hover 必须跟在 a:link 和 a:visited后面
  2. a:active 必须跟在 a:hover后面

2.5 定位

position 属性的值	含义
static	HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
relative	相对定位元素的定位是相对其正常位置。即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。
fixed	元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。
absolute	绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
sticky	它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

cursor属性的值	描述
url	需使用的自定义光标的 URL
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标
pointer	光标呈现为指示链接的指针（一只手）

重叠的元素：

• z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序
• 具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面
• 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面

使用滚动条来显示元素内溢出的内容：

overflow 属性用于控制内容溢出元素框时显示的方式：

div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;   /*或者overflow:auto;*/
}

overflow属性的值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

注意事项：

​ overflow 属性只工作于指定高度的块元素上。

2.6 浮动

• 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

• 浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

• float：指定一个盒子（元素）是否可以浮动。属性值：left、right、none、inherit。

• clear：指定不允许元素周围有浮动元素。属性值：left、right、both、none、inherit。

.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}

运行结果：

2.7 对齐

元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中：

img {
    display: block;
    margin: auto;
    width: 40%;
}

左右对齐 - 使用 float 方式

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

垂直居中对齐 - 使用 padding

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

当文本行数超过单行时，文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大。

垂直居中 - 使用 line-height

.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;
}

当文本行数超过单行时，line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示。

多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。

3 盒子模型

3.1 概述

不同部分的说明：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

3.2 border（边框）

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中
border-left	简写属性，用于把左边框的所有属性设置到一个声明中
border-right	简写属性，用于把右边框的所有属性设置到一个声明中
border-top	简写属性，用于把上边框的所有属性设置到一个声明中
border-bottom-color	设置元素的下边框的颜色

border-style 值：

• none：默认无边框
• dotted: 定义一个点线边框
• dashed: 定义一个虚线边框
• solid: 定义实线边框
• double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

边框宽度：

​ 为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。注意：CSS 没有定义 3 个关键字的具体宽度。

可以设置边框的颜色为"transparent"

• p.one
  {
      border-style:solid;
      border-width:5px;
  }
  p.two
  {
      border-style:solid;
      border-width:medium;
  }
  

• p.one
  {
      border-style:solid;
      border-color:red;
  }
  p.two
  {
      border-style:solid;
      border-color:#98bf21;
  }
  

• p
  {
      border-top-style:dotted;
      border-right-style:solid;
      border-bottom-style:dotted;
      border-left-style:solid;
  }
  

• 边框-简写属性：

  p
  {
  	border:5px solid red;
  }
  

3.3 outline（轮廓）、margin（外边距）、padding（填充）

属性	描述
outline	在一个声明中设置所有的轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度

属性	描述
margin	简写属性，在一个声明中设置所有外边距属性
margin-bottom	设置元素的下外边距
margin-left	设置元素的左外边距
margin-right	设置元素的右外边距
margin-top	设置元素的上外边距

属性	描述
padding	使用简写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

4 其他基础知识

4.1 三种插入样式表的方法

• 外部样式表

  <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  

• 内部样式表

  <head>
  <style>
  hr {color:sienna;}
  p {margin-left:20px;}
  body {background-image:url("images/back40.gif");}
  </style>
  </head>
  

• 内联样式

  <p style="color:sienna;margin-left:20px">这是一个段落。</p>
  

• 优先级

  如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

  一般情况下，优先级如下：内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

  <head>
      <!-- 外部样式 style.css -->
      <link rel="stylesheet" type="text/css" href="style.css"/>
      <!-- 设置：h3{color:blue;} -->
      <style type="text/css">
        /* 内部样式 */
        h3{color:green;}
      </style>
  </head>
  <body>
      <h3>测试！</h3>
  </body>
  

注意事项：

​ 如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

4.2 列表

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志
list-style-type	设置列表项标志的类型

• ul.a {list-style-type:circle;}
  ul.b {list-style-type:square;}
  ol.c {list-style-type:upper-roman;}
  ol.d {list-style-type:lower-alpha;}
  

• ul 
  {
  	list-style-image:url('sqpurple.gif');
  }
  

• 浏览器兼容性解决方案：

  ul /*移除默认设置*/
  {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
  }
  ul li
  {
      background-image: url(sqpurple.gif);
      background-repeat: no-repeat;
      background-position: 0px 5px; 
      padding-left: 14px; 
  }
  

• 简写属性：

  1. list-style-type
  2. list-style-image

  ul
  {
      list-style: square url("sqpurple.gif");
  }
  

4.3 表格

• 折叠边框

  border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

  table
  {
      border-collapse:collapse;
  }
  table,th, td
  {
      border: 1px solid black;
  }
  

• 综合示例：

  #customers
  {
  	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  	width:100%;
  	border-collapse:collapse;
  }
  #customers td, #customers th 
  {
  	font-size:1em;
  	border:1px solid #98bf21;
  	padding:3px 7px 2px 7px;
  }
  #customers th 
  {
  	font-size:1.1em;
  	text-align:left;
  	padding-top:5px;
  	padding-bottom:4px;
  	background-color:#A7C942;
  	color:#ffffff;
  }
  #customers tr.alt td 
  {
  	color:#000000;
  	background-color:#EAF2D3;
  }
  

  运行结果：

  

4.4 表单

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>使用 CSS 来渲染 HTML 的表单元素</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

4.5 其他

• CSS注释以 /* 开始, 以 */ 结束

• 不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px”

• Display(显示) 与 Visibility（可见性）

  1. visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

  2. display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

  3. 可以更改内联元素和块元素

     li {display:inline;}  /*把列表项显示为内联元素，将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了*/
     span {display:block;} /*把span元素作为块元素*/
     

5 案例

5.1 导航栏

垂直固定导航条：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<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">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>

</body>
</html>

水平固定导航条（固定在头部）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<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">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

</body>
</html>

5.2 下拉菜单

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<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: #111;
}

.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);
}

.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;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接 1</a>
      <a href="#">链接 2</a>
      <a href="#">链接 3</a>
    </div>
  </div>
</ul>

<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

</body>
</html>

5.3 图片廊

使用 CSS3 的媒体查询来创建响应式图片廊：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img 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>

<h2 style="text-align:center">响应式图片相册</h2>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_fjords.jpg">
      <img src="//www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_forest.jpg">
      <img src="//www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_lights.jpg">
      <img src="//www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_mountains.jpg">
      <img src="//www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  
  <h4>重置浏览器大小查看效果</h4>
</div>

</body>
</html>

5.4 综合

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
.header {
    background-color: #2196F3;
    color: white;
    text-align: center;
    padding: 15px;
}
.footer {
    background-color: #444;
    color: white;
    padding: 15px;
}
.topmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #777;
}
.topmenu li {
    float: left;
}
.topmenu li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
.topmenu li a:hover {
    background-color: #222;
}
.topmenu li a.active {
    color: white;
    background-color: #4CAF50;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.sidemenu {
    width: 25%;
}
.content {
    width: 75%;
}
.sidemenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.sidemenu li a {
    margin-bottom: 4px;
    display: block;
    padding: 8px;
    background-color: #eee;
    text-decoration: none;
    color: #666;
}
.sidemenu li a:hover {
    background-color: #555;
    color: white;
}
.sidemenu li a.active {
    background-color: #008CBA;
    color: white;
}
</style>
</head>
<body>

<ul class="topmenu">
  <li><a href="#home" class="active">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系我们</a></li>
  <li><a href="#about">关于我们</a></li>
</ul>

<div class="clearfix">
  <div class="column sidemenu">
    <ul>
      <li><a href="#flight">The Flight</a></li>
      <li><a href="#city" class="active">The City</a></li>
      <li><a href="#island">The Island</a></li>
      <li><a href="#food">The Food</a></li>
      <li><a href="#people">The People</a></li>
      <li><a href="#history">The History</a></li>
      <li><a href="#oceans">The Oceans</a></li>
    </ul>
  </div>

  <div class="column content">
    <div class="header">
      <h1>The City</h1>
    </div>
    <h1>Chania</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>底部文本</p>
</div>

</body>
</html>

运行结果：

示例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.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;
}
 
/* 创建两列 */
/* Left column */
.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;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>我的网页</h1>
  <p>重置浏览器大小查看效果。</p>
</div>

<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#" style="float:right">链接</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章标题</h2>
      <h5>2019 年 4 月 17日</h5>
      <div class="fakeimg" style="height:200px;">图片</div>
      <p>一些文本...</p>
      <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
    </div>
    <div class="card">
      <h2>文章标题</h2>
      <h5>2019 年 4 月 17日</h5>
      <div class="fakeimg" style="height:200px;">图片</div>
      <p>一些文本...</p>
      <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>关于我</h2>
      <div class="fakeimg" style="height:100px;">图片</div>
      <p>关于我的一些信息..</p>
    </div>
    <div class="card">
      <h3>热门文章</h3>
      <div class="fakeimg"><p>图片</p></div>
      <div class="fakeimg"><p>图片</p></div>
      <div class="fakeimg"><p>图片</p></div>
    </div>
    <div class="card">
      <h3>关注我</h3>
      <p>一些文本...</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>底部区域</h2>
</div>

</body>
</html>
 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>我的网页</h1>
  <p>重置浏览器大小查看效果。</p>
</div>

<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#" style="float:right">链接</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章标题</h2>
      <h5>2019 年 4 月 17日</h5>
      <div class="fakeimg" style="height:200px;">图片</div>
      <p>一些文本...</p>
      <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
    </div>
    <div class="card">
      <h2>文章标题</h2>
      <h5>2019 年 4 月 17日</h5>
      <div class="fakeimg" style="height:200px;">图片</div>
      <p>一些文本...</p>
      <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>关于我</h2>
      <div class="fakeimg" style="height:100px;">图片</div>
      <p>关于我的一些信息..</p>
    </div>
    <div class="card">
      <h3>热门文章</h3>
      <div class="fakeimg"><p>图片</p></div>
      <div class="fakeimg"><p>图片</p></div>
      <div class="fakeimg"><p>图片</p></div>
    </div>
    <div class="card">
      <h3>关注我</h3>
      <p>一些文本...</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>底部区域</h2>
</div>

</body>
</html>