软件
DW
编译代码的软件
PS
切图 修图
浏览器
chrome 谷歌
firefox 火狐 FF
IE
设计
出设计图的
前端
还原设计图
后台
内容 数据
DW的操作
新建 ctrl + n
保存 ctrl + s
查看 F12/Fn + F12
浏览器的操作
刷新
F5/Fn + F5
在页面中 多个换行或者空格都当做一个空格来处理
标签
标题标签
h1
段落标签
P 有默认间距
换行标签
br
链接标签
a
提示文字
title="我想提示的文字"
图片标签
img
当宽高给一个值的时候 等比缩放
title
无论图片是否路径正确 都会显示
alt
只有当图片路径错误的时候才会显示
width
宽度
height
高度
border
边框
空标签
div
双标签
单标签
属性
公有属性
title
私有属性
border alt width height src
href
css
使样式更丰富
style="样式名：样式值;"
; 代表结束
px 单位
color 颜色
英文
yellow
十六进制
#ccff34(推荐使用)
简写
#00 99 cc 09c
#32bf5p
#ff0000 f00 红色
#666666 666
#000000 000 黑色
#ffffff fff 白色
rgb
rgb(0-255,0-255,0-255)
边框
border
width style color
2px solid(实线) red
dashed（虚线）
dotted（点划线）
border-left 左边框
border-right 右边框
border-top 上边框
border-bottom 下边框
文本水平对齐方式
text-align
left 左
right 右
center 中
line-height
当它的值等于高度的值得时候 垂直居中
ps的操作
放大 ctrl +++++
缩小 ctrl —————
放大/缩小 alt + 滚轮
拖动图片 空格+鼠标
修改选区 空格+鼠标
选区快捷键 m
查看信息 F8
复制 ctrl + c
新建 ctrl + n
粘贴 ctrl + v
保存成jpg
ctrl+t 把图片上面的东西抹掉
用移动工具选择图 用选框工具选中在复制；
透明的图{新建的时候背景选透明} PNG 不透明的 JPG
ctrl+h 把所有的线去掉
路径
相对路径
background-image:url(images/xue.jpg)；
绝对路径
background-image:url(file:///E|/2016-9-26%20%E5%85%A8%E6%97%A5%E5%88%B6%20css/2016-9-27/images/xue.jpg);
windows
/\
linux
/
都要用/
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-position 背景定位
background-position:
数字(x y)
英文
只给一个值的时候 第二个值默认居中
标签
span空标签 没有样式
i，em 倾斜标签
i
倾斜标签
em
倾斜标签
b
加粗标签
strong
加粗标签
span
正常标签
xhtml规范
必须有文档头
img标签必须有alt
双标签必须闭合
单标签必须合理闭合
标签名和标签属性必须小写
标点符号必须用英文 引号必须用双引号
charset
字符集
utf-8 国际编码
gb2312/gbk 中国编码
author 作者
copyright 版权
keywords 关键词
description 介绍
font-style:normal;
取消斜体
italic
斜体
font-weight:normal;
取消加粗
bold
加粗
font-size
字体大小
font-family
字体
中文
英文
unicode
background：url() repeat left center #00;
font:italic bold 24px '楷体';
font:italic bold 24px/200px '楷体';
块元素
div p h1-h6 ul li ol dl dt dd
支持宽高
独占一行
不受换行和空格的影响
当不给宽度的时候宽度参照父级
行内元素
span a i em strong b
不支持宽高
合并到一行
受换行和空格的影响
宽高由内容撑开
行内块
img
支持宽高
合并到一行
受换行和空格的影响
查看元素
F12
去除下划线
text-decoration:none;
增加下划线
text-decoration:underline;
增加上划线
text-decoration:overline;
增加中划线
text-decoration:line-through;
选择器
标签选择器
div{}
类选择器 class="baidu"
.baidu{}
id选择器 id="baidu"
#baidu{}
同样的ID在页面中只允许出现一次
群组选择器
div,p,span{}
嵌套选择器
div p span{}
通配符
*
给所有标签加样式
html注释
css注释
/* */
js注释
//
省略号
white-space:nowrap; 强制不换行
overflow:hidden; 溢出隐藏
text-overflow:ellipsis; 省略号
font-family:'微软雅黑'
必须给宽度
转化
display:block 把当前元素转化成块元素
display:inline 把当前元素转化成行内元素
display:inline-block 把当前元素转化成行内块元素
行内元素即使转化成块 也不能包块
嵌套规则
块元素能包所有标签
p标签只能包行内 不允许包块
行内元素只能包行内 不能包块
行内元素不能包自己
a能包所有的标签 但是不能包自己
img可以被所有标签包
（伪类）别的标签也能用；
a:link 未访问
a:visited 访问过后
a:hover 当鼠标放上去的时候
a:active 点鼠标点击的时候
顺序 l v h a
继承
只有和文字相关的样式才能继承
b strong h1-h6不能继承加粗
i em不能继承倾斜
a不能继承颜色
margin 外边距/外补白
四个方向
left 左边距
right 右边距
top 上边距
bottom 下边距
margin拖拽
.div1{margin-top:20px;}
解决
给父级box一个border
给父级box一个overflow:hidden
给父级用padding 同时父级减去高度的值
margin合并
上下取最大值 左右不合并，相加。
块元素支持四个方向
行内元素支持左右
给一个值的时候 上 右 下 左
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
无序列表
有序列表
定义列表
标题
内容
语义化
h1-h6 标题
p 段落
a 链接
img 图片
ul 无序列表
ol 有序列表
dl 定义列表
strong 强调
em 强调
无语义化
div span i b
字体英文
宋体：SimSun
微软雅黑体：Microsoft YaHei
楷体：KaiTi
黑体：SimHei
padding
内边距/内补白
padding-top 上内边距
padding-left 左内边距
padding-right 右内边距
padding-bottom 下内边距
给一个值的时候 上 右 下 左
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
块元素支持四个方向的padding
行内只支持左右 不支持上下
优先级/权重
id class 标签
1000 100 10
行间样式>id>class>标签>*
浮动
合并到一行 同级元素最好都浮动
脱离文档流
宽度尽可能的窄 窄到内容的宽度（不给宽度）
行内会变成块
文本环绕
宽度不够掉下来
尽可能的往上飘（高度和位置是根据前一个判定）
浮动有方向
float
left; 左浮动
right; 右浮动
none
清除浮动 overflow:hidden;
清浮动
overflow:hidden 加给父级
在同级元素下面加一个空的div 给div clear:both;
终极版清浮动：（必须都用这个）
.clearFix:after{ display:block; content:''; clear:both;}
.clearFix{ zoom:1;}
必须写的默认样式
*{ margin:0; padding:0;}
li{ list-style:none;}
a{ text-decoration:none;}
img{ display:block;}
.clearFix:after{ content:''; display:block; clear:both;}
.clearFix{ zoom:1;}
.fl{ float:left;}
.fr{ float:right;}
index 首页
base 里面写清除默认样式的
text-indent 首行缩进
em 1em等于一个字符
px 正常的像素值
可以为负值
最好不要给超过7位数
a不回头部 a href="javascript:;"
cursor:pointer; 小手
定位
position:
relative; 相对定位
1.相对于自己定位
2.不脱离文档流
3.不改变元素的本质
absolute; 绝对定位
1.脱离文档流
2.如果说父级有定位 它参照父级 否则参照body
（逐层往上找）也就是（一层一层往上找）
3.宽度尽可能尽可能的窄 窄到内容的宽度
4.行内变成块
层级
z-index：2的32次方
z-index必须在有定位的时候才好使
后写的层级比先写高
子级在父级上面
局对居中
div{ width:200px; height:200px; background:#f00;
position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px;}
position:absolut; left:50%; top:50%;
margin-left:-width/2; margin-top:-height/2;
display:none; 隐藏
display:block; 显示
透明度
opacity:(0-1)
filter:alpha(opacity:0-100)
固定定位
position:fixed;
脱离文档流
行内变成块
宽度尽可能的窄 窄到内容的宽度
根据可视区域定位
雪碧图
记得给负值
减少请求
表单提交
form
action="网址"
method
get 不安全
post 相对安全
如果说你想提交 那么你就要加name
value 提示
input
type
text 文本框
password 密码
submit 提交（一般提交/保存 用）
button 按钮（一般 取消/等 用）
radio 单选框 label
name（需要一样） for=“id”
id
value
checkbox
{checked="false" 不选中
"true" 选中
"checked" 默认选中}
多选框 label
name for=“id”
id
value
hidden 悄悄话
image 图片
file 上传
value 提示
placeholder 提示
select
option 加value 兼容
input
outline:none; 取消焦点
textarea
resize:none; 不可拖拉
表格
table
thead 表头
tr
th
tbody 表身
tr
td
tfoot 表尾
tr
td
cellspacing="0" cellpadding="0" 清除间距
border-collapse:collapse; 合并单元格
colspan 横向合并
rowspan 纵向合并
valign垂直对齐
middle 居中
top 上
bottom 下
align水平对齐
center 中
left 左
right 右
默认左右居左 上下居中
框架
iframe
src="网址"
width
height
frameborder="0" 取消边框
scrolling="no" 取消滚动条
框架集
frameset
frame
src=""
有frameset就没body 他俩不能共存
frameborder加在frameset身上 取消边框
scrolling加在frame身上 取消滚动条
src后面的东西src="网址/本地"
src里面所引用的东西 必须是存在的
事件：
onclick 当点击的时候
on 当
click 点击
onmouseover 当鼠标移入的时候
onmouseout 当鼠标移出的时候
alert
弹警示框
.
的
document 文档
get Element By Id ('div1') 通过id来获取元素
获取 一个元素 通过 Id div1
document. get Elements By Tag Name
获取 一组元素 通过 标签 名字
function(){} 匿名函数
var 变量
var 隔壁老王 = 王明阳
=
赋值
window.onload
页面加载完成再加载
if(我有钱){
我就吃两个馒头
}
else{
不吃
}
循环
var
while(){
}
length 长度
this 当前的
sass
预解析处理器
用程序的写法来写css
变量
$r:red;
$w:200px;
$h:400px;
$ta:center;
嵌套
.box
{ width:$w;
p{ height:$h;
span{ color:$r;}
}
}
继承 @extend
.div1{ width:300px; height:$h; color:$r;}
.div2{ @extend .div1;}
混合宏
@mixin aaa($a,$b){
width:$a;
height:$b;
}
.nav{ @include aaa((20 - 6)px,500px);}
@media screen and (max-width:900px){}
媒体 屏幕 最大
盒子模型
width height border padding
width:200px;
height:200px;
border:7px solid #f00;
padding:11px