要点（重点）：
Media Queries 移动设备样式
	viewport(虚拟窗口)：
		android端默认窗口大小：800px；
		IOS端（Safari）默认窗口大小：980px;
		IE浏览器默认大小：974px；
		Opera浏览器的默认大小：850；

	viewport虚拟窗口是在meta元素中定义的，其主要作用是设置Web页面适应移动端屏幕大小。
	(个人建议：必须设置，否则会出现很严重的屏幕适配问题，且首先第一步就嫌设置好此内容再进行下一步开发。)
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
	解析：width:虚拟窗口的宽度为device-width(设备宽度).
		 initial-scale:缩放大小为1倍。
		 user-scalable:不允许用户手动缩放。

	meta-content中又6种不同的属性。
		 width 指定虚拟窗口的屏幕宽度大小。
		 height 指定虚拟窗口的屏幕高度大小。
		 initial-scale 指定初始缩放比例。
		 maximum-scale 指定允许用户缩放的最大比例。
		 minimum-scale 指定允许用户缩放的最小比例。
		 user-scalable 指定是否允许手动缩放。

	要使Media Queries样式模块工作，还需在head中设置一个CSS文件。（可选，可不写）

		例如, 下面代码使用 media 属性定义当前屏幕可视区域的宽度最大值是 600 像素时应用该样式 文件。
				<link rel="stylesheet" media="screen and(max-width:600px)" href="small.css"/>
		在 small.css 样式文件内,需要定义 media 类型的样式,例如:
				@media screen and (max-width:600px){
    					.demo{
        					background-color:#CCC;
    					}
				}

		当屏幕可视区域的宽度长度在 600 像素和 900 像素之间时,应用该样式文件。导入CSS 文件写法如下:
				<link rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)" href="small.css"/>
				small.css 样式文件内对应写法如下:
				@media screen and (min-width:600px) and(max-width:900px){
					    .demo{
					        background-color:#CCC;
					    }
				}

		当手机(如 iPhone)最大屏幕可视区域是 480 像素时,应用该样式文件。导入 CSS 文件写法如下:
				<link rel="stylesheet" media="screen and(max-device-width:480px)" href="small.css"/>
				small.css 样式文件内对应写法如下:
				@media screen and (max-device-width:480px){
					    .demo{
					        background-color:#CCC;
						}
				}

		同样也可以判断当移动设备(如 iPad)的方向发生变化时应用该样式。
		以下代码是当移动设备处于纵向(portrait)模式下时,应用 portrait 样式文件;当移动设备处于横向(landscape)模式下时,应用 landscape 样式文件。
		<link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css"/>
		<link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css"/>

css3 属性选择器：完全匹配

	<div id="article">测试完全匹配属性选择器</div>
	 	<style type="text/css">
			[id=article]{	//	使用ID 完全匹配定位
				color:red; }
		</style>

css3 属性选择器：包含匹配 *

	<div id="article">测试完全匹配属性选择器</div>
	<div id="subarticle">测试完全匹配属性选择器</div>
	<div id="article1">测试完全匹配属性选择器</div>
		<style type="text/css">
			[id*=article]{
				color:red; }
		</style>a

css3 属性选择器：首字符匹配 ^

	<div id="article">测试完全匹配属性选择器</div>
	<div id="subarticle">测试完全匹配属性选择器</div>
	<div id="article1">测试完全匹配属性选择器</div>
	<style type="text/css">
		[id^=article]{
			color:red; }
	</style>

css3 属性选择器：尾字符匹配 $

	<div id="article">测试完全匹配属性选择器</div>
	<div id="subarticle">测试完全匹配属性选择器</div>
	<div id="article1">测试完全匹配属性选择器</div>
	<style type="text/css">
		[id$=article]{
			color:red; }
	</style>

css3 伪类选择器
	1.before
		before 伪类元素选择器主要的作用是在选择某个元素之前插入内容,一般用于清除 浮动。
		before 选择器的语法是:
			元素标签:before{ 
				content:"插入的内容"
				}
			p.before{ 
				content:"文字"
				}
	2.after
		after 伪类元素选择器和 before 伪类元素选择器原理一样,但 after 是在选择某个元 素之后插入内容。
		after 选择器的语法是:
			元素标签:after{ 
				content:"插入的内容"
				}
	3.first-child
		指定元素列表中第一个元素的样式。语法如下:
		li:first-child{
    			color:red;
				}
	4.last-child
		和 first-child 是同类型的选择器。last-child 指定元素列表中最后一个元素的样式。
		语法如下:
		li:last-child{
    			color:red;
				}
	5.nth-child 和 nth-last-child
		nth-child 和 nth-last-child 可以指定某个元素的样式或从后数起某个元素的样式。
		例如:
			//指定第2个li元素 li:nth-child(2){} 
			//指定倒数第 2 个 li 元素 li:nth-last-child{} 
			//指定偶数个 li 元素 li:nth-child(even){} 
			//指定奇数个 li 元素 li:nth-child(odd){}
css3 阴影：
	box-shadow：其中,第一个 length 值是阴影水平偏移值;第二个 length 值是阴影垂直偏移值;第 三个 length 值是阴影模糊值。水平和垂直偏移值都可取正负值,如 4px 或-4px。
	例：box-shadow:3px 4px 2px #000;
	text-shadow：同理