软件
DW
编译代码的软件
PS
切图 修图
浏览器
chrome 谷歌
firefox 火狐 FF
IE
设计
出设计图的
前端
还原设计图
后台
内容 数据
DW的操作
新建 ctrl + n
保存 ctrl + s
查看 F12/Fn + F12
浏览器的操作
刷新
F5/Fn + F5
在页面中 多个换行或者空格都当做一个空格来处理
标签
标题标签
h1
段落标签
P 有默认间距
换行标签
br
链接标签
a
<a href="网址"></a>
<a href="#"></a>
提示文字
title="我想提示的文字"
图片标签
img
当宽高给一个值的时候 等比缩放
title
无论图片是否路径正确 都会显示
alt
只有当图片路径错误的时候才会显示
width
宽度
height
高度
border
边框
空标签
div
双标签
<h1></h1>
<p></p>
<a href="#"></a>
单标签
<br />
属性
公有属性
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;}
<div class="box">
<div class="div1"></div>
</div>
解决
给父级box一个border
给父级box一个overflow:hidden
给父级用padding 同时父级减去高度的值
margin合并
上下取最大值 左右不合并，相加。
块元素支持四个方向
行内元素支持左右
给一个值的时候 上 右 下 左
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
无序列表
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
定义列表
<dl>
<dt></dt> 标题
<dd></dd> 内容
</dl>
语义化
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;}
<link type=" text/css" href="" rel="stylesheet" />
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){}
媒体 屏幕 最大
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.js"></script>
<script src="js/bootstrap.min.js"></script>
盒子模型
width height border padding
width:200px;
height:200px;
border:7px solid #f00;
padding:11px
