一、html：基本结构
<!doctype html>
<html>
<head> <meta charset="utf-8">
<title>baidu</title>
</head>
<body>
<h1 align（行）="left（左）/right（右）/center（中）">(welcome to Beijing样体)</h1>
<h2>welcome to beijing</h2>（标题标签）
<h3>welcome to beijing</h3>
<h4>welcome to beijing</h4> <h1-h6></h1-h6>
<p>（段落标签）<br>（换行标签）啦啦啦啦啦<i>(斜体标签)啦啦啦</i></p>
空格 两个一个汉字
</body>
</html>
<h1></h1>:大标题 双标签 p:段落 双标签 br:换行 单标签 i:斜体 双标签 <em></em>:斜体 双标签 强调 strong:加粗 双 强调 b：加粗 双 <hr/>: 水平线 标题的结束 ,单标签 ,一般放在标题下边 <hr color=”颜色”> width=”长度” align=”对齐方式” size=”粗细” <img src=":图片 ,单标签 文本的最后加 > <img src="文件路径" width=宽度 height=高度 title="图片的描述信息" 提示信息 alt="路径图片的图片名称">
<span></span>:没有中文含义 没有任何效果 小标签 行内元素的典型代表 双标签 可以改变单独文字颜色 和字体
<div></div>：区块 ，没有显示效果 ，大标签 ， 块级元素典型代表 ，用于网页布局
二、列表标签
1.无序列表：ul表示的是无序列表 li表示列表项
<ul type=”disc” 实心圆点 circle 空心圆 square正方形>
<li>内容样体</li>
</ul>
2.有序列表：<ol type="顺序"></ol>
<li start="自己规定顺序"></li>
reversed="倒序显示" 特点：属性与属性值一样 只写属性 3.定义列表：
<dl>
<dt>水果</dt>列表项
<dd>苹果</dd>对列表项的描述
<dd>橘子</dd>
<dd>香蕉</dd>
<dd>甜瓜</dd>
</dl>
三、a超链接
<a></a>：超链接标签 文件（音乐 电影 图片 html文档 word文档..） 压缩软件 外部链接
内部链接
链接内容： <a href="文件路径">文字 图片</a>
<a href="文件 （HTML、Word、img.、音乐。电影）压缩文件">文本.图片</a>
<img src=”文件路径”/>
三种相对路径:
1 .两个文件在同一个文件夹下面 可以直接写文件名称
<img src="...a.jpg">
<a href=""> 2. 一个在文件夹里边 一个在文件夹外面
3.两个文件在不同文件夹里，
绝对路径：写完整的地址-http://www.baidu.comf
<a href="#">baidu</a>
4.图片格式
psd：不能使用在网页中
jpg：可以使用，而且经常使用 颜色比较丰富 不透明 没有动画
gif：可以使用，颜色只存储了256种 支持透明 支持动画效果
png：颜色比较鲜艳 透明 没有动画
四、Adobe Photoshop CS5（截图软件）快捷键
ctrl+n 新建 ctrl+o 打开 ctrl+c 复制 ctrl+v 粘贴 ctrl+s 保存 ctrl+d 取消选区 ctrl+r 显示标尺 ctrl+a 全选 f8 显示信 ctrl+t 自由变换选中内容 ctrl+z 撤销一步 ctrl+alt+z 多步撤销
ctrl+e合并图层的快捷键
五、标签的分类：
块级元素（大标签）
行内块级元素（小）
行内元素（内联）（小）
标签的嵌套:
大标签嵌套小标签
不能交叉嵌套
六、表格的使用
<table></table> 表格
1.表格的 完整的结构
<table(标签可定义表格) border（边）=”1” width（宽度）="500" cellspacing（单元格间距）=“0” cellpadding（单元格边距）=“0”></table>
<thead>(定义表格的表头)
<tr>(行)
<th> </th>（表格内的表头单元格）
</tr>
</thead>
<tbody>(表格主体正文)
<tr>（列）
<td width=“”></td> (列)
<td></td>(单元格)
</tr>
</tbody>
<tfoot></tfoot>(定义表格的页脚)
2.表格的基本结构
<table(标签可定义表格) border（边）=”1” width(宽度) ="500" cellspacing（单元格间距）=“0” cellpadding（单元格边距）=“0”></table>
<tr height(高度)="40" 标题高度 没有宽度>
<td height(高度)=”0” width(宽度)=”0”></td>
<td> </td>
<td> </td>
</tr>
</table>
[1].水平对齐：align（行）：left（靠左）/right（右边）/center（中）
[2].垂直对齐方式：valign（垂直对齐）:top（顶端）/middle（居中）/bottom（低端）
[3].Table（表格）的属性：border =""（边）width =""（宽）cellpadding=""（单元格间距） cellspacing=""（单元格边距） bgcolor =""（背景颜色） background=（背景）="images/a.jpg" bordercolor（边框颜色）="" solid 边线
[4].tr的属性：height (高) align(行) valign（垂直对齐） bgcolor （背景颜色）background（背景）="images/a.jpg"
[5].td的属性：width(宽) height (高)align(行)valign（垂直对齐）bgcolor（背景颜色）background（背景）="images/a.jpg"
3.合并单元格
水平合并 ：colspan=“3”（几个单元格写几个）
垂直合并：rowspan=“3”（上下复制剪切加代码，几个单元格写几个）
Table border-collapse：collapse； 去掉重边
七、表单
<body>
<form action="通过那个程序（java/php/aspx）处理" name="" method="get（信息会不安全 数据量较小）/post方法">
[1].文本框：<input输入 type（类型）=“text”>
[2].用户名：<input 单标签 type（类型）="text" name="user" value="文本框的值" maxlength=“最大字符” readonly="只读形式">
[3].密码框：密码<input type="password密码" name="" value="">br 换行
[4]. 确认密码<input type="password" name="1" value="">br 换行
[4.5]文本域 备注：<textarea rows="行" cols="列">
</textarea>
[5]. 性别<input type="radio" value="男" name="sex" id="man"><label for给="man">男</label> <input type="radio" value="女" name="sex" id="woman"><label for="woman">女</label>
<input type="radio" value="保密" name="sex" id="baomi"><label for="baomi">保密</label>
[6].爱好：<input type="checkbox" value="吃" id="eat"><label for="eat">吃</label>
<input type="checkbox" value="喝" id="drink"><label for="drink">喝</label>
<input type="checkbox" value="嫖" id="piao"><label for="piao">嫖</label>
<input type="checkbox" value="赌" id="du"><label for="du">赌</label>
[7].学历：<select (下拉列表标签)name="collage" size="几个选项">
<option选项标签 value="">请选择</option>
<option value="1">家里蹲大学</option>
<option value="2">清华大学</option>
<option value="3">北京大学</option>
</select>
[8].籍贯：<select (下拉列表标签) name="provice">
<option选项标签 value="">请选择</option>
<option value="1">河北</option>
<option value="2">辽宁</option>
<option value="3">黑龙江</option>
</select>省
<select (下拉列表标签) name="city">
<option选项标签 value="">请选择</option>
<option value="1">承德</option>
<option value="2">石家庄</option>
<option value="3">保定</option>
<option value="2">铁岭</option>
<option value="3">池水沟子</option>
</select>市
<select(下拉列表标签) name="town">
<option 选项标签value="">请选择</option>
<option value="1">承德1</option>
<option value="2">承德2</option>
<option value="3">铁岭1</option>
<option value="2">铁岭2</option>
<option value="3">连花1</option>
</select>县
[9]. 备注：<textarea文本区域rows="多少行" cols=”多少列“> 内容就是value值 </textarea>（多行文本框）
[10].上传文件：<input type="file" neame="file"/>
[11].隐藏域:<input type="hidden" name="hidden" value"id"/>
[12]. 邮件地址 <input type="email" name=“email”/>
[13]. 网址：<input type="url" name="url"/>
[14]. 日期：<input type="date" name="date"/>
<input type="dmonth（月）" name="dmonth"/>
<input type="week（周）" name="week"/>
<input type="datetime（日）" name="datetime"/>
年龄：<input type="number" name="number" max="最大" min="最小 step="跳步"/>
[15].电话；<input type="tel" name="tel"/>
[16].范围：<input type="range(拉动)" name="range"/>
<input type="submit提交按钮" value="提交"/>
<input type="reset重置" value="重置"/>
<input type="image" src="图像预按钮"/<input type="button" value"确定"/>
get：不安全 提交数据小，可以通过地址传送
post：安全 提交的数据大，不能通过地址传递
action：（跳转页面 处理数据的程序）
</form>
[17].嵌套方式
<body>
<form>
<table>
<tr>
<td>
</td>
</tr>
</table>
</form>
[18].块级元素 （大）两个相同的标签在浏览器不同行字体显示
div table form ul li ol dl dt dd p h1-h6 tr hr br
heaber footer
特点：1.可以嵌套块级元素和行内元素
2.可以设置宽和高
[19].行内元素 （小） 两个相同的标签在浏览器同行字体显示
Span I em b strong inpu t select img textarea a
特点：1.不可以嵌套块级元素
2.不可以设置宽和高
[20].行内块级元素:
input select img textarea
合并单元格
水平合并：colspan=“在tr td里加”
垂直合并：rowspan=“在tr td里加 ”
<form method="" action="#" name="myform">
<input type="">
（常用按钮）text文本按钮
Password密码按钮
Radio单选按钮 checked 默认被选中
checkbox 复选按钮checked默认被选中
file上传文件
email邮箱
tel电话
url网址
number年龄
range范围
date(datetime month week…)日期
week周
month月
datetime日期
time时间
datetime-local当地时间
submit提交按钮
reset重置按钮
image图片
button普通按钮
css里的注释： /* 原有样式不显示 */
html里的注释<!-- 原有样式不显示-->
八、CSS样式表
1.css 是层叠样式表（Cascading Style Sheet）（样式 美化html标签）
2.样式写在样式表里
样式的写法
选择器{样式1：样式值1；样式2：样式值2；……}
3.行内样式表（优先级）
在html标记内，使用style属性定义css样式。
如：<p style=”color:#00ffdc;”></p>
<h1 style=”color:#00ffdc;”></h1>
4.（内部样式表）内嵌样式就是将css添加到<head>与</head>之间，并用<style></style>标记声明的一种样式。
<head>
<style>
h1{color：颜色；}
p {color：颜色；}
span{color：颜色；}（任何标签颜色都可以改）
</style>
</head>
单独字体加颜色 标签套标签 内容（结构）和形式分开
5.外部样式表
[1].链接式样式表
在外部定义css样式表，通过<link/>链接标记链接到页面中的一种样式。
语法：<link href="style.css" rel（相对）="stylesheet（相对样式表）" type="text/css" />
<head>
<link href="../css/css文件名称.css" rel="stylesheet"/>(打开css文件写入要变色的标签名称)
</head>
[2].导入式样式表
在外部定义css样式表，通过导入方式链接到页面中的一种样式。（用的少）
语法：
<style>
@import url(..css/css文件名称.css。“路径”);
</style>
6.样式表优先级
行内样式表优先最高（就近原则）
选择器：
[1].基本选择器：
*：全局选择器或者通用选择器（*代表页面中所有的标签【heml/head/hi/...】）
*{样式1:样式值1；样式2:样式值2；...}
页面中所有标签全都变成一个样式
[2].标记选择器：（标签选择器，元素选择器）：element元素{}相同的标签具有相同的样式
标签{样式1:样式值1；样式2:样式值2；...}
所有的相同的标签全都变成一个样式
[3].类别选择器：
先定义后使用
.类别名称{样式1:样式值1；样式2:样式值2；...}
<p class="类别选择器的名称"></p>
<span class="类别选择器的名称"></span>
特点：可以多次使用 可以达到相同的样式也可以达到不同的样 自由使用
一个标签可不可以引用多个类型选择器；可以标签样式相同时定义一个类别选择器；
每个标签又有自己的样式 在定义一个类别选择器 两个选择器同时使用时，两个样式都会添加上
.box1{color:red;}
.box1{background(背景颜色)-color:red;}
[4].id选择器：
先定义后使用
语法：#id名称{样式1:样式值1；样式2:样式值2；...}
<p id="id选择器的名称"> </p>
特点： 一个页面中一个相同的id只能出现一次
#id
#con{color:pink}
#com{color:blue}(相同的id当前一面只能出现一次不同的可以使用)
属性选择器:input(任意属性选择)[type][标签属性][标签属性=属性值]
选择器的优先级：1.行内 (2. id选择器较高 3.class类别选择器 4.element标记选择器 5.*全局选择器)
#com{color:red;}
.com{color:blue;}
选择器的权重：
行内 id .class element 标记选择器 *
1000 100 10 1 0
[5].颜色值：（rgb）（red green blue）；
单词：red blue green pink black white orange purple
十六进制表示法；
#0-9
#000000（黑色）#ffffff（白色）#ff0000（红）
#00ff00（绿色）#0000ff（蓝色）
#f00(红色)
color: rgba:(255,0,0,0.5) a----0：完全透明 1：不透明
color: rgba:(100%,0%,0%,0.5) a----0：完全透明 1：不透明
[6].常用的样式（属性）
color（文字）
background(背景颜色)-color
width（宽度）：200px；(固定单位) 200em字符（相对单位父元素）最大100%（相对）；height（高度）
九、Css关系选择器
1.选择器 功能
选择器，选择器{样式} 群组选择器
具有相同的样式的一组标签
2.后代和子元素选择器
选择器 (空格)选择器{样式} 后代 包括儿子和孙子
选择器>选择器{样式} 子元素 只能找儿子不能找孙子及重孙子不行
3.伪类选择器-动态伪类 常应用于a标签：
:link 链接时的状态 （访问前的状态）
:visited 访问后的状态
:hover 鼠标滑过的状态
:active 鼠标点击时的状态
遵循的原则：
爱恨原则 LoVeHAte
4. :nth选择器
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第n个子元素(写几就从几开始)
:nth-child(2n+1) 第n个子元素(中间除首尾)
5. 文字属性及段落属性 选择器{样式1:样式值1；样式2；样式值2...}
文字属性
color 字体颜色
font-size:(12px/14px) 字号
font-family： "微软雅黑"（字体）
font-weight:(100-900) 字体加粗： bold（加粗） normal(不加粗)
font-style 字体样式 normal（不斜体而且不用去em标签） italic（斜体）
段落属性
text-indent：20px/2em（两个字符任何像素）/-100px; 文本缩进 段前缩两格
text-align：left/center/right;文本水平对齐
line-height：25px 150% 1.5（行距）再有一行文本的时候使用（背景和文字居中的时候=背景height高度）
6. 列表属性 （ol/ul）
list-style-type: 列表符号的类型;(设置什么类型就设什么 可以去掉无序列表前的符号)
list-style-image: 列表符号的图像;(设置什么图片添加什么)
list-style-position: 列表符号的位置
list-style:none（去掉列表符号） 列表符号（符合属性）（用空格可以使用多属性）
7. 背景属性
background-color:背景颜色
background-image:url（图片的路径）;背景图片
background-repeat（横纵重复） :no-repeat（不重复）/repeat-x（横向重复）/repeat-y（纵向重复）/repeat;背景图像是否重复
（行内元素 宽高不起作用）
background-position:背景图像的位置（先水平在垂直）
水平：left 左 center中 right右
垂直：top上 center中 bottom下
单词 50px 50%
Background:（复合属性）背景 vertical-align:middle;垂直居中 修复图片边框bug
list-style:项目符号
list-style-type项目符号类型
list-style-image项目符号图像
list-style-position项目符号图像位置
段落属性
text-indent(缩进) text-align(文本水平对齐) line-height(背景文字居中)
text-decoration(装饰):none(没有下划线);/underline(下划线);/overline(上划线);/line-through（删除线）;
letter-spacing:字与字之间的距离
word-spacing:英文,单词与单词之间的距离
text-transform：capitalize（每一个单词的首字母);uppercase（全部大写); lowercase（全部小写);
white-space: nowrap(标签内容不换行);/normal;
a{text-decoration:none;}去掉下划线
h2{text-decoration:underline;}加上下划线
h2{letter-spacing:20px;}字与字之间的距离
h2{word-spacing:20px;}英文单词与单词之间的距离
盒子模型:(标签在网页一种存在形式)
所标的标签都叫盒子（大盒子（块级元素）和小盒子（行内元素））
盒子模型的构成
宽和高（盒子内容的宽和高） width(内容) height（内容）
边框（boder）
（常用）border-top（复合）：1px（粗细）solid（实线）dashed（虚线）dotted（点划线）double（双线)(样式）red（颜色）；
(不常用)border-top-style:solid;
border-top-width:2px;
border-top-color:red;
border-left:2px dashed yellow;
border-right:2px dashed yellow;
border-bottom:2px dashed yellow;
(全部边框)border:：1px（粗细）solid（实线）dashed（虚线）dotted（点划线）double（双线）（样式）red（颜色）；[全部边框]
border:none(边框线取消); border-radius圆角边框
border-collapse:collapse;去掉重边 只能给table添加
vertical-align:middle;（垂直对齐居中方式）
border-radius：10px 20px;(左上 右下)(右上 左下)(圆角边框)上右下左原则
border-radius：10px 20px 30px;（上）（右下）（左）
outline:none;外框线去掉
内边距
padding（复合属性）:(相当于表格中cellpadding)内容到边框之间的距离
padding-top:20px;
padding-left:
padding-right:
padding-bottom:
padding: 10px 20px 30px 10px;（顺序原则上右下左）
padding：15px;(一个值 四个方向都一样)
padding: 15px 30px;(15px-->上下 30-->左右)
padding：15px 30px 40px;(15px-->上 30px-->左右 40px-->下)、注：内边距影响盒子的大小；解决办法：用宽或高减掉padding值。
外边距
margin（复合属性）:(表格cellspacing)
标签与标签之间的距离
margin-left：
margin-right：
margin-top：
margin-bottom：
margin：10px 20px 30px 40px；上 右 下 左
margin：10px;(一个值 四个方向都一样)
margin：10px 20px;(10px-->上下 30-->左右)
margin：10px 30px 40px;(10px-->上 30px-->左右 40px-->下)
表现形式：上下关系的识别最大值，左右关系的是累加到一起的。
*{margin:0;padding:0;}（所有标签边距为0）
盒子的实际宽度（会影响网页的布局）：
内容的宽+padding（左右）+border（左右）+margin（左右）
盒子的实际高度：
内容的宽+padding（上下）+border（上下）+margin（上下）
margin:auto; auto(自动) 浏览器自动计算
保持远距离值box-sizing:border-box;(不用考虑boder边框加的距离跟padding的距离)
布局浮动：
float：浮动：设置元素向哪个方向浮动（一个元素浮动）
Left；设置左浮动
Right；右浮动
None；不浮动
（如果两个元素都设置了左浮 隔开间距在第一个元素设置 margin-right）
Clear：both；清除浮动
Clear；属性：清除浮动
常用属性值:
Both;设置同时清除全部浮动
Left;只清除左浮动
Right;只清除右浮动
圆角边框：
border-radius:10px;
border-radius:10px 20px;
border-radius:10px 20px 30px;
border-radius:10px 20px 30px 40px;
原则：上右下左
特殊符号：
空格
< 小于号
>大于号
新增标签：
time 时间 行内元素
address 地址 块级元素
header 头部 块级元素
footer 脚部 块级元素
aside 侧栏 块级元素
nav 导航 块级元素
display:a 链接的背景颜色 变大
一.通栏（页面背景、头部、导航、底部）：就是不论浏览器的分辨率是怎么小，怎么大，他都是通栏显示的
2.导航的不同种形式（里边的文字如果有多又少处理办法）
nav导航(通栏标签)
.nwidth li{float:left;line-height:34px;}
.nwidth li a{color:red;display:block;padding-left:20px;paddingright:20px;background:url(img.png) no-repeat right center;}
.nwidth li a:hover{color:yellow;background:blue url(img.png) no-repeat right center;}
3.两种形式图片列表
（图片在上，文字描述在下）
<ul>
<li><img src="img.png"><p>我的老家</p></li>
</ul>
修饰li，让他左浮
（图片在左，文字描述在右）
<dl> <dt><img src="img.png"></dt>
<dd><h4>你理解什么吗<h4>
<p>你说我理解吗，呵呵</p>
</dd> </dl>
3列内容：左侧是左浮，中间是左幅，右边是右浮。
float：改变元素的位置
4 .定位（position）改变元素的位置 （脱离了原来的文档流）
position:relative(相对定位)原来的位置保留;相对于自己的位置进行改变
position:absolute(绝对定位)不保留原来的位置;相对于父元素进行改变；
position:fixed（固定定位）相对于浏览器进行改变；
left：20px 50px 8em -90px
right：
top：
bottom：
margin：-90px;padding是不可以加负值的
z-index：数值（1,2,3……也可以有负值，不允许有百分比）
设置有定位的元素的层次关系 值越大，越在上层显示
background-position:背景图定位
5.元素的分类（display）
display:block;块级元素的默认显示方式， 块级元素可以设置宽和高 显示的意思
display:inline;行内元素的默认显示方式，行内元素没有宽和高，不换行，根据文字的多少来定大小
display:inline-block:行内块级元素，行内块级元素就是既在行内显示，又可以设置宽和高（img/input/select/textarea）
display:none；不显示的意思 不占用空间
visibility：hidden；不显示，但是占用空间
opacity：0.5 这个代表是半透明
下拉菜单
ul 套ul
ul li a 套 div p
css3中新增的属性
浏览器前缀：
-moz-：火狐浏览器
-o- ：欧鹏浏览器
-ms- ：IE浏览器
-webkit- ：safari和谷歌（chrome）
1、使用服务器端的字体：
@font-face{
font-family:webfont;
src:url(字体的路径);}
元素{font-family:webfont;}
eg: <h2>student must 学习</h2>
@font-face{font-family:webfont;
src:url(http://www.baidu.com/fonts/a.flg);
}
h2{font-family:webfont;}
2、text-shadow：给文字添加阴影（只能给文字添加）
h-shadow:必须，水平阴影的位置，允许负值，正值代表是向下偏移，负值向上偏移
v-shadow：必须，垂直阴影的位置，允许负值，正值代表是向右偏移，负值向左偏移
blur
color
注：如果加的是多个阴影，中间用，号隔开。
eg:h2{text-shadow:10px 20px 10px red,-10px -20px 3px green;}
4个值：
水平 可以是负值，必写
垂直 可以是负值，必写
模糊度
阴影的颜色
3、box-shadow：盒子阴影（可以给任何一个标签添加）
6个值：
水平 可以是负值，必写
垂直 可以是负值，必写
模糊的程度
阴影的大小 可以省略
阴影的颜色
如果不写就是外阴影，如果写inset，那就是内阴影
注：如果加的是多个阴影，中间用，号隔开。
eg:
h2{background:red;height:100px;
box-shadow:3px 3px 4px green,4px 4px 5px yellow;}
4、border-radius：圆角边框
5、box-sizing：盒子大小
6、text-overflow(文字溢出怎么处理):ellipsis（以省略号的方式显示）| clip（裁剪掉）
overflow(内容溢出处理)：auto(浏览器自己处理，如果超出了就加滚动条)|hidden（隐藏）|scroll（超出了也有滚动条，超不出也有滚动条：纵向和横向都有）
overflow-x:auto|hidden|scroll 横向
overflow-y:auto|hidden|scroll 纵向
white-space:nowrap（不换行）
注：三个属性最好一起使用。
7、背景新增属性：
background-image:linear-gradient(方向,颜色,颜色……);线性渐变
to top（方向使用） rgba（颜色使用），rgba（渐变颜色）
to bottom
to left
to right
eg： p{height:100px;
width:400px;
background-image:liner-gradient(to top,rgba(255,0,0,0.5),yellow,red,blue);}
background-clip:背景图裁切
background-clip:border-box;(默认值，从边框裁剪)
background-clip:content-box;（从内容区域开始裁剪）
background-clip:padding-box;（从有内填充的地方开始裁剪）
eg: p{ height:200px;
width:200px;
border:20px dashed blue;
padding:10px;
background:url(img.png);
background-clip:border-box;}
background-origin:背景图起始点位置（跟background-position配合使用）
background-origin:border-box;(从边框开始平铺)
background-origin:content-box;（从内容开始平铺）
background-origin:padding-box;（从填充开始平铺，默认值）
background-size:设置背景图的大小
两个值：横向 纵向 (可以是数值，百分比，em)
eg： background-size:20% 100%;
background:url() ,url() ; 插入多个背景图像（写的时候中间用，号隔开）
ps： 合并图层的快捷键：ctrl+e
右击，转换为智能对象
右击，栅格式化图层
属性选择器:[标签属性]或者[标签属性=属性值]
input[type]{background:red;}
pc端的布局形式：
网页结构： 固定宽度且居中
头部 header 自适应宽(宽度写的时候要用%写)
导航 nav time (浮动float，定位position)
banner eg:
主体 <div class="main">
底部 footer <div class="center">center</div>
地址 address <div class="left">left</div>
<div class="right">right</div>
导航 （文字相同与不同的制作），（下拉菜单）</div>
<style> .center{float:left;width:100%;height:400px;backgorund:red;padding:200px 0;box-sizing:border-box;}
.left{float:left;width:200px;height:400px;background:blue;position:relative;margin-left:-100%;}
.right{float:left;width:200px;height:400px;background:green;position:relative;margin-left:-200px;} </style>
移动端
注：在移动端做网页时高度是由内容自动撑开的，所以不用写高
弹性盒布局
只要写弹性盒，在外边就得有一个div（父元素）
1.给父元素设置弹性盒
display:-moz-box; 火狐
display:-webkit-box;谷歌（移动端专用）
display:-o-box;
display:-ms-box;
display:box; 所有浏览器的
2.父元素决定子元素的排列方向
box-orient（排列方向）:horizontal(从左到右的水平)（默认）、vertical（上下的垂直）
3.父元素决定子元素的显示顺序
box-direction(显示顺序)：reverse（逆序）
4.父元素决定子元素的对齐方式
水平对齐：box-pack:start(左) center（中） end（右）
垂直对齐：box-align:start（上） center（中） end（下）
5.子元素设置分配空间
box-flex:0(默认值)（后边只跟数字1，2，3，4……）
6.子元素的位置的改变
box-ordinal-group:1(默认值)(后边只跟数字1，2，3，4……)
在移动端模拟测试：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome="1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Rem 字体单位 会和根元素大小的改变而改变
响应式布局
是网站能兼容多个终端，而不是为每个终端做一个特定的版本，目的是为用户提供更舒适的界面和更好的体验
分辨率： 页面大于1200px时，大屏幕，主要是pc端
992-1199像素之间的屏幕，中等屏幕
768-991，小屏幕 iPad的屏幕
480-767，超小
小于480，微小屏幕
注：做网页时不必考虑高度
宽度写的时候可以写（max-width）
min-width:最小宽度
max-width:最大宽度
eg: 480-640之间:
min-width:480px max-width:640px
eg:
大于1200px，就是最小值是1200px
小于320px,就是最大值是320px：
<link rel="stylesheet" href="index.css" media="screen and (max-width:320px)">
在321px和640px之间，就是最小值是321px，最大值是640px
<link rel="stylesheet" href="index.css" media="screen and (min-width:321px) and (max-width:640px)"> 一般不用以上的
screen：彩色电脑屏幕
media：媒体
设置设备的显示方式：
orientation：portrait|landscape
竖屏 横屏
@media only screen and (min-width:768px) and(max-width:991px){
body{background:yellow;} }
伪对象选择器:
找到响应的标签
1.全部插入内容 h2:before(全部){content(内容):"2016-5-24";background:"颜色";}
个别插入内容 h2:nth-child(3):before{content:none或 normal;(取消内容)}
2.全部插入图片 h2:after(全部){content:url(../img/hot.jpg);}
个别插入图片 h2:nth-child(3):after{content:url(../img/hot.jpg);}
3.标题加序号 h2:before(全部){content(内容):"第"counter(计数器)(abc名字,(类型))"章"; 后面可以设置其他内容}
自动增长序号 h2{counter increment:abc名字(类型);counter-reset: (*重置计数器*)}
4.内容在加序号 h2:before{content:counter(abc)"内容"counter(def)"内容";(比如1.序号下内容的1.1序号重复序号)}
自动增长序号 h2{counter increment:def;(要加重置计数器)}
5.first-line(第一行)first-letter（第一个字）
语法p:first-line{background:red;}
p:first-letter{background:yellow;}
6.锚点链接:
同一个页面之间跳转
<a href="#a"> #a:target{background:red;}(给a范围内加颜色)
<a href="#b">
<a href="#c">
<h2 id="a"> 跳转到页眉 <a href="#d">
<h2 id="b"> 在页眉设置 <h2 id="d">
<h2 id="c">
7.清除浮动 visibility: hidden;(应用于布局上下间距使用)
运用before after清除浮动
<div class="类别"></div>
.类别:before{content"."clear:both;(清除浮动)display:block;
(转换块级元素)height:0;visibility: hidden;("."内容消失)}
表单元素的增强
1、原先的表单元素
<form action="" method="get/post">
<input type="#" name="" value="">
#
text：文本框
password：密码框
radio：单选框 name必须一致 checked
checkbox：多选框 name最好一致 checked
file：上传文件
hidden：隐藏
submit：提交按钮
reset：重置
button：普通按钮
image:图像域按钮
下拉框：（select只能选择，不能输入）
<select> <option value="">请选择</option>
<option value="1">北京</option>
<option value="2">石家庄</option> </select>
<textarea cols="列" rows="行"></textarea>：文本域（备注的时候可用）
</form>
2、css3中新增的表单元素
<input type="#" name="" value="">
#
email:电子邮件，邮箱 5566@163.com
url：网址 http://www.baidu.com
date:日期 month week datetime datetime-local time
number：数字 （ max（最大值） min（最小值） step（步数））
range：范围（0-100之间的数字）（ max（最大值） min（最小值） step（步数））
color：颜色选择器
tel：电话，在手机端有显示，直接调出来的是数字键盘
search：搜索框（results="s"加上这个后，前边自动加一个搜索的那个放大镜）
eg：搜索<input type="search" results="s">
3、新增的input属性
placeholder:空的input里（没有value值），添加内容有提示信息，输入内容时，提示信息自动消失
eg： 商品:<input type="text" placeholder="请输入商品信息">
autofocus：自动聚集焦点 值：atuofocus true（对的，真的）/false（错误的，假的（默认）） （一个页面中只能给一个元素添加）
eg： 商品:<input type="text" placeholder="请输入商品信息" autofocus="autofocus">
required：必填项
eg： 商品:<input type="text" placeholder="请输入商品信息" required="required">
autocomplete:自动完成 值：（off关闭了，没有提示/on有提示）
eg： 商品:<input type="text" placeholder="请输入商品信息" autocomplete="on">
multiple:多选 可以用到file上，原来是用到select上 选择的时候按着ctrl就可以实现多选
eg: <select size="6" multiple="multiple">
<option>北京</option>
<option>河北</option>
<option>石家庄</option> </select>
list:列表属性 既可以输入，又可以选择 （select只能选择，不能输入） 跟datalist和option一起使用
datalist标签 数据列表 跟option一起使用
eg: <input type="text" list="list1">
<datalist id="list1">
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">石家庄</option> </datalist>
enabled：可用状态
disabled：禁用状态 属性值也是disabled
readonly：只读
maxlength：最大长度
4、form新增属性
更改提交方式：formmethod
更改提交地址：formaction
eg： <input type="submit" value="提交" formaction="" formmethod="">
5、UI伪劣选择器
:checked 选中的表单元素 checked radio
:disabled 不可用的表单元素
:enabled 可用的表单元素
eg： <input type="radio">
<input type="checkbox">
在css里
input[type=radio]:checked{ /*选中的时候是什么样的*/
background:red; }
选择器+选择器 后边的第一个选择器兄弟
选择器~选择器 后边的所有选择器兄弟
6、h5中 多媒体标签
视频文件 vedio 双标签 可以定义宽和高
（controls="controls"控制面板，有播放，暂停，快进等等，source资源,autoplay自动播放，loop循环播放的次数）
eg: <video src="img/我的老家.mp4" controls="controls" autoplay="autoplay" loop="2">
或： <video controls="controls" autoplay="autoplay" loop="2">
<source src="img/我的老家.mp4"><source>
<source src="img/我的老家.ogg"><source>
<source src="img/我的老家.wmv"><source> </video>
音乐 audio 双标签，不可以定义宽和高
eg: <audio src="img/完美的小孩.mp3" controls="controls" autoplay="autoplay" loop="2">
或 <audio controls="controls" autoplay="autoplay" loop="2">
<source src="img/我的老家.mp4"><source>（source是资源）
<source src="img/我的老家.ogg"><source>
<source src="img/我的老家.wmv"><source> </audio>
<embed></embed>可以引入视频/音乐/.flv/图片
7、图片在上边，文字在下边可以直接用，如果图片在左侧文字在右侧，把img左幅，figcption右浮即可
块级元素
<figure> <img src="img.png">
<figcption>
这个里边写文字就可以，可以嵌套div，p等等的标签
</figcaption> </figure>
上边是文字，下边是图片的时候，使用dl
8、h5新增标签
header：头
footer：脚
address：地址
time：时间
aside：小的一块
nav：导航
section：区块 div
hgroup 把h1-h6的标签括起来
<hgroup>
<h3>dasd<h3>
<h4>dasd<h4>
<h2>dasd<h2> </hgroup>
元素变形及过渡动画
变形： transform：translate(20px,30px) rotate(30deg) scale(1,2) skew(20deg,30deg)
translate(20px,30px) 平移 分为水平平移和垂直平移
20px：水平平移 可以负值
30px：垂直平移 可以负值
rotate(30deg) 旋转多少度
deg：角度 可以负值
scale(1,2) 缩放多少倍 1、2表示的是倍数
1：水平缩放多少倍
2：垂直方向的缩放
如果要缩小，那就是0.2,就是缩小20%。
skew(20deg,30deg) 倾斜 斜切
20deg:水平方向的角度
30deg:垂直方向的角度
将图片进行改变时，默认以中心点进行变形
transform-origin:20px 30px 更改变形的中心点
水平 垂直
过渡
transition:css中的某个属性(如果是全部都变形那就写all) 过渡的时间(用毫秒ms或者秒s) 过渡的动画效果(linear线性过渡,ease平滑过渡,ease-in由慢到快,ease-out由快到慢) 动画开始时需要延时的时间
transition:all 0.3s ease 0.5s; 复合属性
transition-poterpy:all; css里的某一个属性或者all
transition-duration:0.3s; 过渡的时间
transition-timing-function:ease; 动画效果
transition-delay:0.5s; 延时
transform和transition和:hover同时使用
如果在li里直接插入图片会有3像素的间距，解决的方法是：img{vertical-align:middle;}
opacity:1完全透明 0完全不透明
1、animation 动画
animation:name(名字) 3s(动画过渡的时间(ms和s)) ease(过渡的效果linear/ease/ease-in……) 3s(动画的延迟时间) 3(动画的循环次数,默认1,infinite无限循环) 播放方向(摇摆:alternate,反向:reverse)
animation-name:名字
animation-duration:过渡的时间
animation-timing-funtion:过渡的效果
关键帧（用百分比表示，总共到100%）
定义动画的意思
@keyframes name{
from{css样式}开始的位置 from表示0%
to{css样式} 结束的位置 to表示100%}
eg： @-webkit-keyframes name{
0%{}
20%{}
40%{}
60%{}
80%{}
100%{} }
transparent:透明
eg： background:linear-gradient(transparent 0%,transparent 70%,#00f 100%)
百分之零的地方，隐藏，百分之七十的地方，隐藏，百分之百的显示黑色
2、气泡：
图片的裁切法是，裁出上、下、左、右的不需要变得地方，空出中间需要变化的地方，然后裁切值量法是量上，量右，量下，量左。
border:裁切的最大值（边框有单位px）
border-image:url() 上裁切值 右裁切值 下裁切值 左裁切值 fill(填充) stretch(拉伸)/repeat(重复)/round(环绕) （裁切值没有单位）
如果设置了宽，内容撑不下的时候，会出现重叠显示，只需要把span打成行内块级元素就可以
eg: <html> <head>
<meta charset="utf-8">
<title>气泡</title>
<style>
body{margin-left:100px; margin-top:100px;}
.qipao{display:inline-block; border:28px; border-image:url(img/icon_04_03.png) 28 24 22 28 fill; }
</style> </head>
<body>
<span class="qipao">
我的老家我的老家我的老我的老家我的老家我的老我的老家我的老家我的老我的老家我的老家我的老我的老家我的老家我的老</span>
</body> </html>
1、新增的类别选择器：
:nth-of-type(n) :同类型中的第n个同级兄弟元素
:first-of-type :同类型中的第一个同级兄弟元素
:last-of-type :同类型中的最后一个同级兄弟元素
2、只给表单元素使用的选择器：
:disabled :不可用的表单元素（加上这个后就是灰色的框，不能点击什么的）
:enabled :可用的表单元素（默认的）
先给表单元素加上以上的两个属性，然后再选择他们，给他们改变样式。
eg： 在html里
<input type="text" disabled="disabled">
在css里
input:disabled{background:red; }
以上功能实现的是，把input中不可用的表单给他们的背景设置成红色。
3、 ::selection :选中文字之后改变的状态（只能改变文字颜色和背景颜色）
4、超链接
<a href="#">dhgo</a> 1个井号，点击后回到最开头的位置
<a href="###">dhgo</a> 3个井号，点击后就在原来的位置
做链接的时候，需要给每个链接都写上链接的地址
<!doctype html>
<html>
<head> <meta charset="utf-8">
<title>baidu</title>
</head>
<body>
<h1 align（行）="left（左）/right（右）/center（中）">(welcome to Beijing样体)</h1>
<h2>welcome to beijing</h2>（标题标签）
<h3>welcome to beijing</h3>
<h4>welcome to beijing</h4> <h1-h6></h1-h6>
<p>（段落标签）<br>（换行标签）啦啦啦啦啦<i>(斜体标签)啦啦啦</i></p>
空格 两个一个汉字
</body>
</html>
<h1></h1>:大标题 双标签 p:段落 双标签 br:换行 单标签 i:斜体 双标签 <em></em>:斜体 双标签 强调 strong:加粗 双 强调 b：加粗 双 <hr/>: 水平线 标题的结束 ,单标签 ,一般放在标题下边 <hr color=”颜色”> width=”长度” align=”对齐方式” size=”粗细” <img src=":图片 ,单标签 文本的最后加 > <img src="文件路径" width=宽度 height=高度 title="图片的描述信息" 提示信息 alt="路径图片的图片名称">
<span></span>:没有中文含义 没有任何效果 小标签 行内元素的典型代表 双标签 可以改变单独文字颜色 和字体
<div></div>：区块 ，没有显示效果 ，大标签 ， 块级元素典型代表 ，用于网页布局
二、列表标签
1.无序列表：ul表示的是无序列表 li表示列表项
<ul type=”disc” 实心圆点 circle 空心圆 square正方形>
<li>内容样体</li>
</ul>
2.有序列表：<ol type="顺序"></ol>
<li start="自己规定顺序"></li>
reversed="倒序显示" 特点：属性与属性值一样 只写属性 3.定义列表：
<dl>
<dt>水果</dt>列表项
<dd>苹果</dd>对列表项的描述
<dd>橘子</dd>
<dd>香蕉</dd>
<dd>甜瓜</dd>
</dl>
三、a超链接
<a></a>：超链接标签 文件（音乐 电影 图片 html文档 word文档..） 压缩软件 外部链接
内部链接
链接内容： <a href="文件路径">文字 图片</a>
<a href="文件 （HTML、Word、img.、音乐。电影）压缩文件">文本.图片</a>
<img src=”文件路径”/>
三种相对路径:
1 .两个文件在同一个文件夹下面 可以直接写文件名称
<img src="...a.jpg">
<a href=""> 2. 一个在文件夹里边 一个在文件夹外面
3.两个文件在不同文件夹里，
绝对路径：写完整的地址-http://www.baidu.comf
<a href="#">baidu</a>
4.图片格式
psd：不能使用在网页中
jpg：可以使用，而且经常使用 颜色比较丰富 不透明 没有动画
gif：可以使用，颜色只存储了256种 支持透明 支持动画效果
png：颜色比较鲜艳 透明 没有动画
四、Adobe Photoshop CS5（截图软件）快捷键
ctrl+n 新建 ctrl+o 打开 ctrl+c 复制 ctrl+v 粘贴 ctrl+s 保存 ctrl+d 取消选区 ctrl+r 显示标尺 ctrl+a 全选 f8 显示信 ctrl+t 自由变换选中内容 ctrl+z 撤销一步 ctrl+alt+z 多步撤销
ctrl+e合并图层的快捷键
五、标签的分类：
块级元素（大标签）
行内块级元素（小）
行内元素（内联）（小）
标签的嵌套:
大标签嵌套小标签
不能交叉嵌套
六、表格的使用
<table></table> 表格
1.表格的 完整的结构
<table(标签可定义表格) border（边）=”1” width（宽度）="500" cellspacing（单元格间距）=“0” cellpadding（单元格边距）=“0”></table>
<thead>(定义表格的表头)
<tr>(行)
<th> </th>（表格内的表头单元格）
</tr>
</thead>
<tbody>(表格主体正文)
<tr>（列）
<td width=“”></td> (列)
<td></td>(单元格)
</tr>
</tbody>
<tfoot></tfoot>(定义表格的页脚)
2.表格的基本结构
<table(标签可定义表格) border（边）=”1” width(宽度) ="500" cellspacing（单元格间距）=“0” cellpadding（单元格边距）=“0”></table>
<tr height(高度)="40" 标题高度 没有宽度>
<td height(高度)=”0” width(宽度)=”0”></td>
<td> </td>
<td> </td>
</tr>
</table>
[1].水平对齐：align（行）：left（靠左）/right（右边）/center（中）
[2].垂直对齐方式：valign（垂直对齐）:top（顶端）/middle（居中）/bottom（低端）
[3].Table（表格）的属性：border =""（边）width =""（宽）cellpadding=""（单元格间距） cellspacing=""（单元格边距） bgcolor =""（背景颜色） background=（背景）="images/a.jpg" bordercolor（边框颜色）="" solid 边线
[4].tr的属性：height (高) align(行) valign（垂直对齐） bgcolor （背景颜色）background（背景）="images/a.jpg"
[5].td的属性：width(宽) height (高)align(行)valign（垂直对齐）bgcolor（背景颜色）background（背景）="images/a.jpg"
3.合并单元格
水平合并 ：colspan=“3”（几个单元格写几个）
垂直合并：rowspan=“3”（上下复制剪切加代码，几个单元格写几个）
Table border-collapse：collapse； 去掉重边
七、表单
<body>
<form action="通过那个程序（java/php/aspx）处理" name="" method="get（信息会不安全 数据量较小）/post方法">
[1].文本框：<input输入 type（类型）=“text”>
[2].用户名：<input 单标签 type（类型）="text" name="user" value="文本框的值" maxlength=“最大字符” readonly="只读形式">
[3].密码框：密码<input type="password密码" name="" value="">br 换行
[4]. 确认密码<input type="password" name="1" value="">br 换行
[4.5]文本域 备注：<textarea rows="行" cols="列">
</textarea>
[5]. 性别<input type="radio" value="男" name="sex" id="man"><label for给="man">男</label> <input type="radio" value="女" name="sex" id="woman"><label for="woman">女</label>
<input type="radio" value="保密" name="sex" id="baomi"><label for="baomi">保密</label>
[6].爱好：<input type="checkbox" value="吃" id="eat"><label for="eat">吃</label>
<input type="checkbox" value="喝" id="drink"><label for="drink">喝</label>
<input type="checkbox" value="嫖" id="piao"><label for="piao">嫖</label>
<input type="checkbox" value="赌" id="du"><label for="du">赌</label>
[7].学历：<select (下拉列表标签)name="collage" size="几个选项">
<option选项标签 value="">请选择</option>
<option value="1">家里蹲大学</option>
<option value="2">清华大学</option>
<option value="3">北京大学</option>
</select>
[8].籍贯：<select (下拉列表标签) name="provice">
<option选项标签 value="">请选择</option>
<option value="1">河北</option>
<option value="2">辽宁</option>
<option value="3">黑龙江</option>
</select>省
<select (下拉列表标签) name="city">
<option选项标签 value="">请选择</option>
<option value="1">承德</option>
<option value="2">石家庄</option>
<option value="3">保定</option>
<option value="2">铁岭</option>
<option value="3">池水沟子</option>
</select>市
<select(下拉列表标签) name="town">
<option 选项标签value="">请选择</option>
<option value="1">承德1</option>
<option value="2">承德2</option>
<option value="3">铁岭1</option>
<option value="2">铁岭2</option>
<option value="3">连花1</option>
</select>县
[9]. 备注：<textarea文本区域rows="多少行" cols=”多少列“> 内容就是value值 </textarea>（多行文本框）
[10].上传文件：<input type="file" neame="file"/>
[11].隐藏域:<input type="hidden" name="hidden" value"id"/>
[12]. 邮件地址 <input type="email" name=“email”/>
[13]. 网址：<input type="url" name="url"/>
[14]. 日期：<input type="date" name="date"/>
<input type="dmonth（月）" name="dmonth"/>
<input type="week（周）" name="week"/>
<input type="datetime（日）" name="datetime"/>
年龄：<input type="number" name="number" max="最大" min="最小 step="跳步"/>
[15].电话；<input type="tel" name="tel"/>
[16].范围：<input type="range(拉动)" name="range"/>
<input type="submit提交按钮" value="提交"/>
<input type="reset重置" value="重置"/>
<input type="image" src="图像预按钮"/<input type="button" value"确定"/>
get：不安全 提交数据小，可以通过地址传送
post：安全 提交的数据大，不能通过地址传递
action：（跳转页面 处理数据的程序）
</form>
[17].嵌套方式
<body>
<form>
<table>
<tr>
<td>
</td>
</tr>
</table>
</form>
[18].块级元素 （大）两个相同的标签在浏览器不同行字体显示
div table form ul li ol dl dt dd p h1-h6 tr hr br
heaber footer
特点：1.可以嵌套块级元素和行内元素
2.可以设置宽和高
[19].行内元素 （小） 两个相同的标签在浏览器同行字体显示
Span I em b strong inpu t select img textarea a
特点：1.不可以嵌套块级元素
2.不可以设置宽和高
[20].行内块级元素:
input select img textarea
合并单元格
水平合并：colspan=“在tr td里加”
垂直合并：rowspan=“在tr td里加 ”
<form method="" action="#" name="myform">
<input type="">
（常用按钮）text文本按钮
Password密码按钮
Radio单选按钮 checked 默认被选中
checkbox 复选按钮checked默认被选中
file上传文件
email邮箱
tel电话
url网址
number年龄
range范围
date(datetime month week…)日期
week周
month月
datetime日期
time时间
datetime-local当地时间
submit提交按钮
reset重置按钮
image图片
button普通按钮
css里的注释： /* 原有样式不显示 */
html里的注释<!-- 原有样式不显示-->
八、CSS样式表
1.css 是层叠样式表（Cascading Style Sheet）（样式 美化html标签）
2.样式写在样式表里
样式的写法
选择器{样式1：样式值1；样式2：样式值2；……}
3.行内样式表（优先级）
在html标记内，使用style属性定义css样式。
如：<p style=”color:#00ffdc;”></p>
<h1 style=”color:#00ffdc;”></h1>
4.（内部样式表）内嵌样式就是将css添加到<head>与</head>之间，并用<style></style>标记声明的一种样式。
<head>
<style>
h1{color：颜色；}
p {color：颜色；}
span{color：颜色；}（任何标签颜色都可以改）
</style>
</head>
单独字体加颜色 标签套标签 内容（结构）和形式分开
5.外部样式表
[1].链接式样式表
在外部定义css样式表，通过<link/>链接标记链接到页面中的一种样式。
语法：<link href="style.css" rel（相对）="stylesheet（相对样式表）" type="text/css" />
<head>
<link href="../css/css文件名称.css" rel="stylesheet"/>(打开css文件写入要变色的标签名称)
</head>
[2].导入式样式表
在外部定义css样式表，通过导入方式链接到页面中的一种样式。（用的少）
语法：
<style>
@import url(..css/css文件名称.css。“路径”);
</style>
6.样式表优先级
行内样式表优先最高（就近原则）
选择器：
[1].基本选择器：
*：全局选择器或者通用选择器（*代表页面中所有的标签【heml/head/hi/...】）
*{样式1:样式值1；样式2:样式值2；...}
页面中所有标签全都变成一个样式
[2].标记选择器：（标签选择器，元素选择器）：element元素{}相同的标签具有相同的样式
标签{样式1:样式值1；样式2:样式值2；...}
所有的相同的标签全都变成一个样式
[3].类别选择器：
先定义后使用
.类别名称{样式1:样式值1；样式2:样式值2；...}
<p class="类别选择器的名称"></p>
<span class="类别选择器的名称"></span>
特点：可以多次使用 可以达到相同的样式也可以达到不同的样 自由使用
一个标签可不可以引用多个类型选择器；可以标签样式相同时定义一个类别选择器；
每个标签又有自己的样式 在定义一个类别选择器 两个选择器同时使用时，两个样式都会添加上
.box1{color:red;}
.box1{background(背景颜色)-color:red;}
[4].id选择器：
先定义后使用
语法：#id名称{样式1:样式值1；样式2:样式值2；...}
<p id="id选择器的名称"> </p>
特点： 一个页面中一个相同的id只能出现一次
#id
#con{color:pink}
#com{color:blue}(相同的id当前一面只能出现一次不同的可以使用)
属性选择器:input(任意属性选择)[type][标签属性][标签属性=属性值]
选择器的优先级：1.行内 (2. id选择器较高 3.class类别选择器 4.element标记选择器 5.*全局选择器)
#com{color:red;}
.com{color:blue;}
选择器的权重：
行内 id .class element 标记选择器 *
1000 100 10 1 0
[5].颜色值：（rgb）（red green blue）；
单词：red blue green pink black white orange purple
十六进制表示法；
#0-9
#000000（黑色）#ffffff（白色）#ff0000（红）
#00ff00（绿色）#0000ff（蓝色）
#f00(红色)
color: rgba:(255,0,0,0.5) a----0：完全透明 1：不透明
color: rgba:(100%,0%,0%,0.5) a----0：完全透明 1：不透明
[6].常用的样式（属性）
color（文字）
background(背景颜色)-color
width（宽度）：200px；(固定单位) 200em字符（相对单位父元素）最大100%（相对）；height（高度）
九、Css关系选择器
1.选择器 功能
选择器，选择器{样式} 群组选择器
具有相同的样式的一组标签
2.后代和子元素选择器
选择器 (空格)选择器{样式} 后代 包括儿子和孙子
选择器>选择器{样式} 子元素 只能找儿子不能找孙子及重孙子不行
3.伪类选择器-动态伪类 常应用于a标签：
:link 链接时的状态 （访问前的状态）
:visited 访问后的状态
:hover 鼠标滑过的状态
:active 鼠标点击时的状态
遵循的原则：
爱恨原则 LoVeHAte
4. :nth选择器
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第n个子元素(写几就从几开始)
:nth-child(2n+1) 第n个子元素(中间除首尾)
5. 文字属性及段落属性 选择器{样式1:样式值1；样式2；样式值2...}
文字属性
color 字体颜色
font-size:(12px/14px) 字号
font-family： "微软雅黑"（字体）
font-weight:(100-900) 字体加粗： bold（加粗） normal(不加粗)
font-style 字体样式 normal（不斜体而且不用去em标签） italic（斜体）
段落属性
text-indent：20px/2em（两个字符任何像素）/-100px; 文本缩进 段前缩两格
text-align：left/center/right;文本水平对齐
line-height：25px 150% 1.5（行距）再有一行文本的时候使用（背景和文字居中的时候=背景height高度）
6. 列表属性 （ol/ul）
list-style-type: 列表符号的类型;(设置什么类型就设什么 可以去掉无序列表前的符号)
list-style-image: 列表符号的图像;(设置什么图片添加什么)
list-style-position: 列表符号的位置
list-style:none（去掉列表符号） 列表符号（符合属性）（用空格可以使用多属性）
7. 背景属性
background-color:背景颜色
background-image:url（图片的路径）;背景图片
background-repeat（横纵重复） :no-repeat（不重复）/repeat-x（横向重复）/repeat-y（纵向重复）/repeat;背景图像是否重复
（行内元素 宽高不起作用）
background-position:背景图像的位置（先水平在垂直）
水平：left 左 center中 right右
垂直：top上 center中 bottom下
单词 50px 50%
Background:（复合属性）背景 vertical-align:middle;垂直居中 修复图片边框bug
list-style:项目符号
list-style-type项目符号类型
list-style-image项目符号图像
list-style-position项目符号图像位置
段落属性
text-indent(缩进) text-align(文本水平对齐) line-height(背景文字居中)
text-decoration(装饰):none(没有下划线);/underline(下划线);/overline(上划线);/line-through（删除线）;
letter-spacing:字与字之间的距离
word-spacing:英文,单词与单词之间的距离
text-transform：capitalize（每一个单词的首字母);uppercase（全部大写); lowercase（全部小写);
white-space: nowrap(标签内容不换行);/normal;
a{text-decoration:none;}去掉下划线
h2{text-decoration:underline;}加上下划线
h2{letter-spacing:20px;}字与字之间的距离
h2{word-spacing:20px;}英文单词与单词之间的距离
盒子模型:(标签在网页一种存在形式)
所标的标签都叫盒子（大盒子（块级元素）和小盒子（行内元素））
盒子模型的构成
宽和高（盒子内容的宽和高） width(内容) height（内容）
边框（boder）
（常用）border-top（复合）：1px（粗细）solid（实线）dashed（虚线）dotted（点划线）double（双线)(样式）red（颜色）；
(不常用)border-top-style:solid;
border-top-width:2px;
border-top-color:red;
border-left:2px dashed yellow;
border-right:2px dashed yellow;
border-bottom:2px dashed yellow;
(全部边框)border:：1px（粗细）solid（实线）dashed（虚线）dotted（点划线）double（双线）（样式）red（颜色）；[全部边框]
border:none(边框线取消); border-radius圆角边框
border-collapse:collapse;去掉重边 只能给table添加
vertical-align:middle;（垂直对齐居中方式）
border-radius：10px 20px;(左上 右下)(右上 左下)(圆角边框)上右下左原则
border-radius：10px 20px 30px;（上）（右下）（左）
outline:none;外框线去掉
内边距
padding（复合属性）:(相当于表格中cellpadding)内容到边框之间的距离
padding-top:20px;
padding-left:
padding-right:
padding-bottom:
padding: 10px 20px 30px 10px;（顺序原则上右下左）
padding：15px;(一个值 四个方向都一样)
padding: 15px 30px;(15px-->上下 30-->左右)
padding：15px 30px 40px;(15px-->上 30px-->左右 40px-->下)、注：内边距影响盒子的大小；解决办法：用宽或高减掉padding值。
外边距
margin（复合属性）:(表格cellspacing)
标签与标签之间的距离
margin-left：
margin-right：
margin-top：
margin-bottom：
margin：10px 20px 30px 40px；上 右 下 左
margin：10px;(一个值 四个方向都一样)
margin：10px 20px;(10px-->上下 30-->左右)
margin：10px 30px 40px;(10px-->上 30px-->左右 40px-->下)
表现形式：上下关系的识别最大值，左右关系的是累加到一起的。
*{margin:0;padding:0;}（所有标签边距为0）
盒子的实际宽度（会影响网页的布局）：
内容的宽+padding（左右）+border（左右）+margin（左右）
盒子的实际高度：
内容的宽+padding（上下）+border（上下）+margin（上下）
margin:auto; auto(自动) 浏览器自动计算
保持远距离值box-sizing:border-box;(不用考虑boder边框加的距离跟padding的距离)
布局浮动：
float：浮动：设置元素向哪个方向浮动（一个元素浮动）
Left；设置左浮动
Right；右浮动
None；不浮动
（如果两个元素都设置了左浮 隔开间距在第一个元素设置 margin-right）
Clear：both；清除浮动
Clear；属性：清除浮动
常用属性值:
Both;设置同时清除全部浮动
Left;只清除左浮动
Right;只清除右浮动
圆角边框：
border-radius:10px;
border-radius:10px 20px;
border-radius:10px 20px 30px;
border-radius:10px 20px 30px 40px;
原则：上右下左
特殊符号：
空格
< 小于号
>大于号
新增标签：
time 时间 行内元素
address 地址 块级元素
header 头部 块级元素
footer 脚部 块级元素
aside 侧栏 块级元素
nav 导航 块级元素
display:a 链接的背景颜色 变大
一.通栏（页面背景、头部、导航、底部）：就是不论浏览器的分辨率是怎么小，怎么大，他都是通栏显示的
2.导航的不同种形式（里边的文字如果有多又少处理办法）
nav导航(通栏标签)
.nwidth li{float:left;line-height:34px;}
.nwidth li a{color:red;display:block;padding-left:20px;paddingright:20px;background:url(img.png) no-repeat right center;}
.nwidth li a:hover{color:yellow;background:blue url(img.png) no-repeat right center;}
3.两种形式图片列表
（图片在上，文字描述在下）
<ul>
<li><img src="img.png"><p>我的老家</p></li>
</ul>
修饰li，让他左浮
（图片在左，文字描述在右）
<dl> <dt><img src="img.png"></dt>
<dd><h4>你理解什么吗<h4>
<p>你说我理解吗，呵呵</p>
</dd> </dl>
3列内容：左侧是左浮，中间是左幅，右边是右浮。
float：改变元素的位置
4 .定位（position）改变元素的位置 （脱离了原来的文档流）
position:relative(相对定位)原来的位置保留;相对于自己的位置进行改变
position:absolute(绝对定位)不保留原来的位置;相对于父元素进行改变；
position:fixed（固定定位）相对于浏览器进行改变；
left：20px 50px 8em -90px
right：
top：
bottom：
margin：-90px;padding是不可以加负值的
z-index：数值（1,2,3……也可以有负值，不允许有百分比）
设置有定位的元素的层次关系 值越大，越在上层显示
background-position:背景图定位
5.元素的分类（display）
display:block;块级元素的默认显示方式， 块级元素可以设置宽和高 显示的意思
display:inline;行内元素的默认显示方式，行内元素没有宽和高，不换行，根据文字的多少来定大小
display:inline-block:行内块级元素，行内块级元素就是既在行内显示，又可以设置宽和高（img/input/select/textarea）
display:none；不显示的意思 不占用空间
visibility：hidden；不显示，但是占用空间
opacity：0.5 这个代表是半透明
下拉菜单
ul 套ul
ul li a 套 div p
css3中新增的属性
浏览器前缀：
-moz-：火狐浏览器
-o- ：欧鹏浏览器
-ms- ：IE浏览器
-webkit- ：safari和谷歌（chrome）
1、使用服务器端的字体：
@font-face{
font-family:webfont;
src:url(字体的路径);}
元素{font-family:webfont;}
eg: <h2>student must 学习</h2>
@font-face{font-family:webfont;
src:url(http://www.baidu.com/fonts/a.flg);
}
h2{font-family:webfont;}
2、text-shadow：给文字添加阴影（只能给文字添加）
h-shadow:必须，水平阴影的位置，允许负值，正值代表是向下偏移，负值向上偏移
v-shadow：必须，垂直阴影的位置，允许负值，正值代表是向右偏移，负值向左偏移
blur
color
注：如果加的是多个阴影，中间用，号隔开。
eg:h2{text-shadow:10px 20px 10px red,-10px -20px 3px green;}
4个值：
水平 可以是负值，必写
垂直 可以是负值，必写
模糊度
阴影的颜色
3、box-shadow：盒子阴影（可以给任何一个标签添加）
6个值：
水平 可以是负值，必写
垂直 可以是负值，必写
模糊的程度
阴影的大小 可以省略
阴影的颜色
如果不写就是外阴影，如果写inset，那就是内阴影
注：如果加的是多个阴影，中间用，号隔开。
eg:
h2{background:red;height:100px;
box-shadow:3px 3px 4px green,4px 4px 5px yellow;}
4、border-radius：圆角边框
5、box-sizing：盒子大小
6、text-overflow(文字溢出怎么处理):ellipsis（以省略号的方式显示）| clip（裁剪掉）
overflow(内容溢出处理)：auto(浏览器自己处理，如果超出了就加滚动条)|hidden（隐藏）|scroll（超出了也有滚动条，超不出也有滚动条：纵向和横向都有）
overflow-x:auto|hidden|scroll 横向
overflow-y:auto|hidden|scroll 纵向
white-space:nowrap（不换行）
注：三个属性最好一起使用。
7、背景新增属性：
background-image:linear-gradient(方向,颜色,颜色……);线性渐变
to top（方向使用） rgba（颜色使用），rgba（渐变颜色）
to bottom
to left
to right
eg： p{height:100px;
width:400px;
background-image:liner-gradient(to top,rgba(255,0,0,0.5),yellow,red,blue);}
background-clip:背景图裁切
background-clip:border-box;(默认值，从边框裁剪)
background-clip:content-box;（从内容区域开始裁剪）
background-clip:padding-box;（从有内填充的地方开始裁剪）
eg: p{ height:200px;
width:200px;
border:20px dashed blue;
padding:10px;
background:url(img.png);
background-clip:border-box;}
background-origin:背景图起始点位置（跟background-position配合使用）
background-origin:border-box;(从边框开始平铺)
background-origin:content-box;（从内容开始平铺）
background-origin:padding-box;（从填充开始平铺，默认值）
background-size:设置背景图的大小
两个值：横向 纵向 (可以是数值，百分比，em)
eg： background-size:20% 100%;
background:url() ,url() ; 插入多个背景图像（写的时候中间用，号隔开）
ps： 合并图层的快捷键：ctrl+e
右击，转换为智能对象
右击，栅格式化图层
属性选择器:[标签属性]或者[标签属性=属性值]
input[type]{background:red;}
pc端的布局形式：
网页结构： 固定宽度且居中
头部 header 自适应宽(宽度写的时候要用%写)
导航 nav time (浮动float，定位position)
banner eg:
主体 <div class="main">
底部 footer <div class="center">center</div>
地址 address <div class="left">left</div>
<div class="right">right</div>
导航 （文字相同与不同的制作），（下拉菜单）</div>
<style> .center{float:left;width:100%;height:400px;backgorund:red;padding:200px 0;box-sizing:border-box;}
.left{float:left;width:200px;height:400px;background:blue;position:relative;margin-left:-100%;}
.right{float:left;width:200px;height:400px;background:green;position:relative;margin-left:-200px;} </style>
移动端
注：在移动端做网页时高度是由内容自动撑开的，所以不用写高
弹性盒布局
只要写弹性盒，在外边就得有一个div（父元素）
1.给父元素设置弹性盒
display:-moz-box; 火狐
display:-webkit-box;谷歌（移动端专用）
display:-o-box;
display:-ms-box;
display:box; 所有浏览器的
2.父元素决定子元素的排列方向
box-orient（排列方向）:horizontal(从左到右的水平)（默认）、vertical（上下的垂直）
3.父元素决定子元素的显示顺序
box-direction(显示顺序)：reverse（逆序）
4.父元素决定子元素的对齐方式
水平对齐：box-pack:start(左) center（中） end（右）
垂直对齐：box-align:start（上） center（中） end（下）
5.子元素设置分配空间
box-flex:0(默认值)（后边只跟数字1，2，3，4……）
6.子元素的位置的改变
box-ordinal-group:1(默认值)(后边只跟数字1，2，3，4……)
在移动端模拟测试：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome="1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Rem 字体单位 会和根元素大小的改变而改变
响应式布局
是网站能兼容多个终端，而不是为每个终端做一个特定的版本，目的是为用户提供更舒适的界面和更好的体验
分辨率： 页面大于1200px时，大屏幕，主要是pc端
992-1199像素之间的屏幕，中等屏幕
768-991，小屏幕 iPad的屏幕
480-767，超小
小于480，微小屏幕
注：做网页时不必考虑高度
宽度写的时候可以写（max-width）
min-width:最小宽度
max-width:最大宽度
eg: 480-640之间:
min-width:480px max-width:640px
eg:
大于1200px，就是最小值是1200px
小于320px,就是最大值是320px：
<link rel="stylesheet" href="index.css" media="screen and (max-width:320px)">
在321px和640px之间，就是最小值是321px，最大值是640px
<link rel="stylesheet" href="index.css" media="screen and (min-width:321px) and (max-width:640px)"> 一般不用以上的
screen：彩色电脑屏幕
media：媒体
设置设备的显示方式：
orientation：portrait|landscape
竖屏 横屏
@media only screen and (min-width:768px) and(max-width:991px){
body{background:yellow;} }
伪对象选择器:
找到响应的标签
1.全部插入内容 h2:before(全部){content(内容):"2016-5-24";background:"颜色";}
个别插入内容 h2:nth-child(3):before{content:none或 normal;(取消内容)}
2.全部插入图片 h2:after(全部){content:url(../img/hot.jpg);}
个别插入图片 h2:nth-child(3):after{content:url(../img/hot.jpg);}
3.标题加序号 h2:before(全部){content(内容):"第"counter(计数器)(abc名字,(类型))"章"; 后面可以设置其他内容}
自动增长序号 h2{counter increment:abc名字(类型);counter-reset: (*重置计数器*)}
4.内容在加序号 h2:before{content:counter(abc)"内容"counter(def)"内容";(比如1.序号下内容的1.1序号重复序号)}
自动增长序号 h2{counter increment:def;(要加重置计数器)}
5.first-line(第一行)first-letter（第一个字）
语法p:first-line{background:red;}
p:first-letter{background:yellow;}
6.锚点链接:
同一个页面之间跳转
<a href="#a"> #a:target{background:red;}(给a范围内加颜色)
<a href="#b">
<a href="#c">
<h2 id="a"> 跳转到页眉 <a href="#d">
<h2 id="b"> 在页眉设置 <h2 id="d">
<h2 id="c">
7.清除浮动 visibility: hidden;(应用于布局上下间距使用)
运用before after清除浮动
<div class="类别"></div>
.类别:before{content"."clear:both;(清除浮动)display:block;
(转换块级元素)height:0;visibility: hidden;("."内容消失)}
表单元素的增强
1、原先的表单元素
<form action="" method="get/post">
<input type="#" name="" value="">
#
text：文本框
password：密码框
radio：单选框 name必须一致 checked
checkbox：多选框 name最好一致 checked
file：上传文件
hidden：隐藏
submit：提交按钮
reset：重置
button：普通按钮
image:图像域按钮
下拉框：（select只能选择，不能输入）
<select> <option value="">请选择</option>
<option value="1">北京</option>
<option value="2">石家庄</option> </select>
<textarea cols="列" rows="行"></textarea>：文本域（备注的时候可用）
</form>
2、css3中新增的表单元素
<input type="#" name="" value="">
#
email:电子邮件，邮箱 5566@163.com
url：网址 http://www.baidu.com
date:日期 month week datetime datetime-local time
number：数字 （ max（最大值） min（最小值） step（步数））
range：范围（0-100之间的数字）（ max（最大值） min（最小值） step（步数））
color：颜色选择器
tel：电话，在手机端有显示，直接调出来的是数字键盘
search：搜索框（results="s"加上这个后，前边自动加一个搜索的那个放大镜）
eg：搜索<input type="search" results="s">
3、新增的input属性
placeholder:空的input里（没有value值），添加内容有提示信息，输入内容时，提示信息自动消失
eg： 商品:<input type="text" placeholder="请输入商品信息">
autofocus：自动聚集焦点 值：atuofocus true（对的，真的）/false（错误的，假的（默认）） （一个页面中只能给一个元素添加）
eg： 商品:<input type="text" placeholder="请输入商品信息" autofocus="autofocus">
required：必填项
eg： 商品:<input type="text" placeholder="请输入商品信息" required="required">
autocomplete:自动完成 值：（off关闭了，没有提示/on有提示）
eg： 商品:<input type="text" placeholder="请输入商品信息" autocomplete="on">
multiple:多选 可以用到file上，原来是用到select上 选择的时候按着ctrl就可以实现多选
eg: <select size="6" multiple="multiple">
<option>北京</option>
<option>河北</option>
<option>石家庄</option> </select>
list:列表属性 既可以输入，又可以选择 （select只能选择，不能输入） 跟datalist和option一起使用
datalist标签 数据列表 跟option一起使用
eg: <input type="text" list="list1">
<datalist id="list1">
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">石家庄</option> </datalist>
enabled：可用状态
disabled：禁用状态 属性值也是disabled
readonly：只读
maxlength：最大长度
4、form新增属性
更改提交方式：formmethod
更改提交地址：formaction
eg： <input type="submit" value="提交" formaction="" formmethod="">
5、UI伪劣选择器
:checked 选中的表单元素 checked radio
:disabled 不可用的表单元素
:enabled 可用的表单元素
eg： <input type="radio">
<input type="checkbox">
在css里
input[type=radio]:checked{ /*选中的时候是什么样的*/
background:red; }
选择器+选择器 后边的第一个选择器兄弟
选择器~选择器 后边的所有选择器兄弟
6、h5中 多媒体标签
视频文件 vedio 双标签 可以定义宽和高
（controls="controls"控制面板，有播放，暂停，快进等等，source资源,autoplay自动播放，loop循环播放的次数）
eg: <video src="img/我的老家.mp4" controls="controls" autoplay="autoplay" loop="2">
或： <video controls="controls" autoplay="autoplay" loop="2">
<source src="img/我的老家.mp4"><source>
<source src="img/我的老家.ogg"><source>
<source src="img/我的老家.wmv"><source> </video>
音乐 audio 双标签，不可以定义宽和高
eg: <audio src="img/完美的小孩.mp3" controls="controls" autoplay="autoplay" loop="2">
或 <audio controls="controls" autoplay="autoplay" loop="2">
<source src="img/我的老家.mp4"><source>（source是资源）
<source src="img/我的老家.ogg"><source>
<source src="img/我的老家.wmv"><source> </audio>
<embed></embed>可以引入视频/音乐/.flv/图片
7、图片在上边，文字在下边可以直接用，如果图片在左侧文字在右侧，把img左幅，figcption右浮即可
块级元素
<figure> <img src="img.png">
<figcption>
这个里边写文字就可以，可以嵌套div，p等等的标签
</figcaption> </figure>
上边是文字，下边是图片的时候，使用dl
8、h5新增标签
header：头
footer：脚
address：地址
time：时间
aside：小的一块
nav：导航
section：区块 div
hgroup 把h1-h6的标签括起来
<hgroup>
<h3>dasd<h3>
<h4>dasd<h4>
<h2>dasd<h2> </hgroup>
元素变形及过渡动画
变形： transform：translate(20px,30px) rotate(30deg) scale(1,2) skew(20deg,30deg)
translate(20px,30px) 平移 分为水平平移和垂直平移
20px：水平平移 可以负值
30px：垂直平移 可以负值
rotate(30deg) 旋转多少度
deg：角度 可以负值
scale(1,2) 缩放多少倍 1、2表示的是倍数
1：水平缩放多少倍
2：垂直方向的缩放
如果要缩小，那就是0.2,就是缩小20%。
skew(20deg,30deg) 倾斜 斜切
20deg:水平方向的角度
30deg:垂直方向的角度
将图片进行改变时，默认以中心点进行变形
transform-origin:20px 30px 更改变形的中心点
水平 垂直
过渡
transition:css中的某个属性(如果是全部都变形那就写all) 过渡的时间(用毫秒ms或者秒s) 过渡的动画效果(linear线性过渡,ease平滑过渡,ease-in由慢到快,ease-out由快到慢) 动画开始时需要延时的时间
transition:all 0.3s ease 0.5s; 复合属性
transition-poterpy:all; css里的某一个属性或者all
transition-duration:0.3s; 过渡的时间
transition-timing-function:ease; 动画效果
transition-delay:0.5s; 延时
transform和transition和:hover同时使用
如果在li里直接插入图片会有3像素的间距，解决的方法是：img{vertical-align:middle;}
opacity:1完全透明 0完全不透明
1、animation 动画
animation:name(名字) 3s(动画过渡的时间(ms和s)) ease(过渡的效果linear/ease/ease-in……) 3s(动画的延迟时间) 3(动画的循环次数,默认1,infinite无限循环) 播放方向(摇摆:alternate,反向:reverse)
animation-name:名字
animation-duration:过渡的时间
animation-timing-funtion:过渡的效果
关键帧（用百分比表示，总共到100%）
定义动画的意思
@keyframes name{
from{css样式}开始的位置 from表示0%
to{css样式} 结束的位置 to表示100%}
eg： @-webkit-keyframes name{
0%{}
20%{}
40%{}
60%{}
80%{}
100%{} }
transparent:透明
eg： background:linear-gradient(transparent 0%,transparent 70%,#00f 100%)
百分之零的地方，隐藏，百分之七十的地方，隐藏，百分之百的显示黑色
2、气泡：
图片的裁切法是，裁出上、下、左、右的不需要变得地方，空出中间需要变化的地方，然后裁切值量法是量上，量右，量下，量左。
border:裁切的最大值（边框有单位px）
border-image:url() 上裁切值 右裁切值 下裁切值 左裁切值 fill(填充) stretch(拉伸)/repeat(重复)/round(环绕) （裁切值没有单位）
如果设置了宽，内容撑不下的时候，会出现重叠显示，只需要把span打成行内块级元素就可以
eg: <html> <head>
<meta charset="utf-8">
<title>气泡</title>
<style>
body{margin-left:100px; margin-top:100px;}
.qipao{display:inline-block; border:28px; border-image:url(img/icon_04_03.png) 28 24 22 28 fill; }
</style> </head>
<body>
<span class="qipao">
我的老家我的老家我的老我的老家我的老家我的老我的老家我的老家我的老我的老家我的老家我的老我的老家我的老家我的老</span>
</body> </html>
1、新增的类别选择器：
:nth-of-type(n) :同类型中的第n个同级兄弟元素
:first-of-type :同类型中的第一个同级兄弟元素
:last-of-type :同类型中的最后一个同级兄弟元素
2、只给表单元素使用的选择器：
:disabled :不可用的表单元素（加上这个后就是灰色的框，不能点击什么的）
:enabled :可用的表单元素（默认的）
先给表单元素加上以上的两个属性，然后再选择他们，给他们改变样式。
eg： 在html里
<input type="text" disabled="disabled">
在css里
input:disabled{background:red; }
以上功能实现的是，把input中不可用的表单给他们的背景设置成红色。
3、 ::selection :选中文字之后改变的状态（只能改变文字颜色和背景颜色）
4、超链接
<a href="#">dhgo</a> 1个井号，点击后回到最开头的位置
<a href="###">dhgo</a> 3个井号，点击后就在原来的位置
做链接的时候，需要给每个链接都写上链接的地址
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
