PS html CSS JS
夏侯华彩
放大
ctrl + +
缩小 ctrl + -
移动工具
(勾选 自动选择
图层) 不多用
按住ctrl键，移动
******点移动按钮，按ctrl键选中图层
历史记录面板 回到之前的某个步骤
复制某个图层，ctrl选中复制的层，按住alt移动复制 也可同时按住 ctrl+ alt
图层拖动到右下角， 删除
图层在上就在上面显示
选中某个图层， 自由变换 ctrl + T 按住shift，等比例 双击结束编辑
新建psd
分辨率写72，这样与网页中相同 RGB 三色光
拖动技巧： 新建图层， 将其拖拽到外面，在原图层中按ctrl选中要拖拽的东西，到新图层中
按住空格， 拖动
抠图：
ctrl + D 取消选择
选择里的变换选区
ctrl + C
ctrl + v
魔棒工具：
选背景色， 反向， 把图像扣出来
填充操作
选中，填充
描边
选中一个区域， 编辑里描边
自由变换(编辑)
如果不想要某一个地方，在旁边选个区域，拉伸过去
变换选区(选择菜单)
不会覆盖
擦除
污点修复
文本输入
标尺
吸管工具
图像
设置图像大小
辅助线贴齐图层，需要先设置背景为当前图层
新建参考线 这样 图形大体位置控制好比较好
用矩形选框工具，可以在信息栏中看大小、
选框--- 新建图层
创建选区， 按住ctrl，点图层就可以创建选区
阴影效果 创建一个椭圆色框，填充黑色， 之后设置透明度
文件保存 隔段时间保存
一般用宋体来做像素字 浑厚改为无 =====》 微软雅黑代替
图像裁切
单张切图 图像里裁剪
图像大小
画布大小
切片工具 批量切图
双击 命名
存储为web格式
文件名为空
仅限图像
所有用户切片
png24
只切图片
alt复制
70% 切图
30% js页面
选每个切的图，选png24
多张图到image下，一张图放image目录里
前端目录
image 放切图
css
js
雪碧图 前端性能优化
合为一张图
默认样式重设reset.css
html
sublime快捷键： html:xt + tab xhtml
! + tab html5
html文档规范
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
<br /> 有个空格
空格
< <
> >
一行中特定几个字用span
<b> 加粗
<strong>强调
<a href="javascirpt:;">缺省</a> 不跳转
页面内跳转
<a href="#mao1">标题一</a>
......
......
<h3 id="mao1">跳转到的标题</h3>
有序：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
无序：
<ul>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ul>
快捷键：ul>(li>a)*5 tab键
同级别的使用 + 号
table常用标签
1、table标签：声明一个表格
2、tr标签：定义表格中的一行
3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性：
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan 设置单元格水平合并
7、rowspan 设置单元格垂直合并
<hr /> 画一个线
table中有间隙，可以使用table的tr，设置高度来替代
CSS
首页用嵌入式
其他使用外链式
类选择器 用的最多 . 多个类，使用空格隔开
id选择器 一般不用 #
层级选择器
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
组选择器
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
.box1:hover{color:red}
.box2:before{content:'行首文字';} 在前面塞进去
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
表格常用样式属性
border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格
盒子模型
width、height为内容的宽高
border
padding（内容与边框） 顺时针 顶 右 下 左
如果三个值 顶 左右 下
两个值 上下 左右
margin (盒子与外部的距离)
margin的合并，只在垂直方向合并，选个大的，解决方法：。。。
水平居中 margin：100px auto;
text-indent:15px; 距离左边15px 首行
line-height:15px;
margin-top 塌陷 ***
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：****大都使用这种
.clearfix:before{
content: '';
display:table;
}
<div class="clearfix">
<div></div>
</div>
css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
块元素 div
内联元素 span 只支持部分样式(不支持宽高，margin上下，padding上下) 根据内容 a、span、em、b、strong
解决内联元素间隙的方法
1、去掉内联元素之间的换行
****2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size
line-height 设置行高
内联块元素
display:inline-block;
text-decoration:none; 去掉下划线
line-height:50px;
text-align:center; 居中
list-style:none; 去掉ul中li的点
margin的技巧：可以使用负值
转为内联块元素变为一行
文档流
浮动打破文档流排列
浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动 不给父元素高度，无法撑开
7、浮动元素之间没有垂直margin的合并
要么全浮动，要么不浮动
清除浮动
清除浮动，清除塌陷的方法
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;} 兼容IE
定位：
body .box01{
position:relative;
left:50px;
top:50px;
background-color:green;
}
.menu .new{
width:33px;
height:20px;
background:url(images/new.png) no-repeat;
position:absolute;
left:433px;
top:-9px;
}
background: #00FF00 url(bgimage.gif) no-repeat left center fixed
相对定位里设置绝对定位
sublime中写 .header_con 按tab键 出现<div class="header_con"></div>
电脑上看到的都是固定宽度，居中显示的
层级最多不超过4级
font:12px/29px 'Microsoft Yahei';
字体大小 行高
test-align:center;
可在浏览器中查看style，进行动态调整，使用键盘上下键 雪碧图就这样调
<input type="text" name="" placeholder="搜索"> 在搜索框中有个隐藏的2个字
输入框中去掉框子 .search .input_text{
width: 470px;
height: 38px;
border: 0px;
margin-left: 37px;
outline: none;
}
a标签 为行内元素，转为块， 文字移动，使用text-indent:39px;
display:block; 这样就可以设置宽，高了
<em>张山</em> 用em来修饰名字
一个图片放到另一个图片上面， 使用定位 类似幻灯片的上一页下一页
父类设置position：relative
子类相对父类进行绝对定位
水平居中 text-align:center; 如果一个可以用margin：0 auto；
.points{
position: absolute;
width: 100%;
height: 11px;
background-color: red;
left: 0;
bottom: 9px;
}
在设置了absolute之后，宽度不能继承父的宽度，得重新设置， 自动转为行内块
font-size: 0px;这种情况，在父级上设置 查看幻灯片中的点
文字垂直排序，通过设置宽高来达到效果
什么是闭包
函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回
1、将一个变量长期驻扎在内存当中，可用于循环中存索引值
2、私有变量计数器，外部无法访问，避免全局变量的污染
灰色 F3F3F4
缩小 ctrl + -
移动工具
(勾选 自动选择
图层) 不多用
按住ctrl键，移动
******点移动按钮，按ctrl键选中图层
历史记录面板 回到之前的某个步骤
复制某个图层，ctrl选中复制的层，按住alt移动复制 也可同时按住 ctrl+ alt
图层拖动到右下角， 删除
图层在上就在上面显示
选中某个图层， 自由变换 ctrl + T 按住shift，等比例 双击结束编辑
新建psd
分辨率写72，这样与网页中相同 RGB 三色光
拖动技巧： 新建图层， 将其拖拽到外面，在原图层中按ctrl选中要拖拽的东西，到新图层中
按住空格， 拖动
抠图：
ctrl + D 取消选择
选择里的变换选区
ctrl + C
ctrl + v
魔棒工具：
选背景色， 反向， 把图像扣出来
填充操作
选中，填充
描边
选中一个区域， 编辑里描边
自由变换(编辑)
如果不想要某一个地方，在旁边选个区域，拉伸过去
变换选区(选择菜单)
不会覆盖
擦除
污点修复
文本输入
标尺
吸管工具
图像
设置图像大小
辅助线贴齐图层，需要先设置背景为当前图层
新建参考线 这样 图形大体位置控制好比较好
用矩形选框工具，可以在信息栏中看大小、
选框--- 新建图层
创建选区， 按住ctrl，点图层就可以创建选区
阴影效果 创建一个椭圆色框，填充黑色， 之后设置透明度
文件保存 隔段时间保存
一般用宋体来做像素字 浑厚改为无 =====》 微软雅黑代替
图像裁切
单张切图 图像里裁剪
图像大小
画布大小
切片工具 批量切图
双击 命名
存储为web格式
文件名为空
仅限图像
所有用户切片
png24
只切图片
alt复制
70% 切图
30% js页面
选每个切的图，选png24
多张图到image下，一张图放image目录里
前端目录
image 放切图
css
js
雪碧图 前端性能优化
合为一张图
默认样式重设reset.css
html
sublime快捷键： html:xt + tab xhtml
! + tab html5
html文档规范
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
<br /> 有个空格
空格
< <
> >
一行中特定几个字用span
<b> 加粗
<strong>强调
<a href="javascirpt:;">缺省</a> 不跳转
页面内跳转
<a href="#mao1">标题一</a>
......
......
<h3 id="mao1">跳转到的标题</h3>
有序：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
无序：
<ul>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ul>
快捷键：ul>(li>a)*5 tab键
同级别的使用 + 号
table常用标签
1、table标签：声明一个表格
2、tr标签：定义表格中的一行
3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性：
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan 设置单元格水平合并
7、rowspan 设置单元格垂直合并
<hr /> 画一个线
table中有间隙，可以使用table的tr，设置高度来替代
CSS
首页用嵌入式
其他使用外链式
类选择器 用的最多 . 多个类，使用空格隔开
id选择器 一般不用 #
层级选择器
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
组选择器
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
.box1:hover{color:red}
.box2:before{content:'行首文字';} 在前面塞进去
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
表格常用样式属性
border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格
盒子模型
width、height为内容的宽高
border
padding（内容与边框） 顺时针 顶 右 下 左
如果三个值 顶 左右 下
两个值 上下 左右
margin (盒子与外部的距离)
margin的合并，只在垂直方向合并，选个大的，解决方法：。。。
水平居中 margin：100px auto;
text-indent:15px; 距离左边15px 首行
line-height:15px;
margin-top 塌陷 ***
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：****大都使用这种
.clearfix:before{
content: '';
display:table;
}
<div class="clearfix">
<div></div>
</div>
css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
块元素 div
内联元素 span 只支持部分样式(不支持宽高，margin上下，padding上下) 根据内容 a、span、em、b、strong
解决内联元素间隙的方法
1、去掉内联元素之间的换行
****2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size
line-height 设置行高
内联块元素
display:inline-block;
text-decoration:none; 去掉下划线
line-height:50px;
text-align:center; 居中
list-style:none; 去掉ul中li的点
margin的技巧：可以使用负值
转为内联块元素变为一行
文档流
浮动打破文档流排列
浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动 不给父元素高度，无法撑开
7、浮动元素之间没有垂直margin的合并
要么全浮动，要么不浮动
清除浮动
清除浮动，清除塌陷的方法
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;} 兼容IE
定位：
body .box01{
position:relative;
left:50px;
top:50px;
background-color:green;
}
.menu .new{
width:33px;
height:20px;
background:url(images/new.png) no-repeat;
position:absolute;
left:433px;
top:-9px;
}
background: #00FF00 url(bgimage.gif) no-repeat left center fixed
相对定位里设置绝对定位
sublime中写 .header_con 按tab键 出现<div class="header_con"></div>
电脑上看到的都是固定宽度，居中显示的
层级最多不超过4级
font:12px/29px 'Microsoft Yahei';
字体大小 行高
test-align:center;
可在浏览器中查看style，进行动态调整，使用键盘上下键 雪碧图就这样调
<input type="text" name="" placeholder="搜索"> 在搜索框中有个隐藏的2个字
输入框中去掉框子 .search .input_text{
width: 470px;
height: 38px;
border: 0px;
margin-left: 37px;
outline: none;
}
a标签 为行内元素，转为块， 文字移动，使用text-indent:39px;
display:block; 这样就可以设置宽，高了
<em>张山</em> 用em来修饰名字
一个图片放到另一个图片上面， 使用定位 类似幻灯片的上一页下一页
父类设置position：relative
子类相对父类进行绝对定位
水平居中 text-align:center; 如果一个可以用margin：0 auto；
.points{
position: absolute;
width: 100%;
height: 11px;
background-color: red;
left: 0;
bottom: 9px;
}
在设置了absolute之后，宽度不能继承父的宽度，得重新设置， 自动转为行内块
font-size: 0px;这种情况，在父级上设置 查看幻灯片中的点
文字垂直排序，通过设置宽高来达到效果
什么是闭包
函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回
1、将一个变量长期驻扎在内存当中，可用于循环中存索引值
2、私有变量计数器，外部无法访问，避免全局变量的污染
灰色 F3F3F4
类似资料：