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 + tabxhtml

! + tabhtml5


html文档规范


xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。


1、所有的标签必须小写


2、所有的属性必须用双引号括起来


3、所有标签必须闭合


4、img必须要加alt属性(对图片的描述)


<br /> 有个空格

&nbsp; 空格

< &lt;

> &gt;

一行中特定几个字用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)*5tab键

同级别的使用 + 号



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