前端入门基础知识

前端入门基础知识

一、前端必会的PS技巧
关于PS切图的总结：
首先第一点 ，拿到一张PSD格式的图片，终于不慌了，知道该怎么办了，
无非就是领导发给你一张PSD，你这边多复制几张（方便还原），然后开始！
第一步：CTRL+鼠标左（前提选中工具栏中的定位 ） 用于选中PSD图片的任意位置的图层，方便下一步
第二步：可以点击一下小眼睛，看看是不是该图层，确认无误后，单击右键，选择“栅格化图层”
注：如果有多个图层，要选择“栅格化图层样式”，总之一句话，栅格化以后，一定是自己要切的部分，不能有遗漏的
第三步：假设你要切的部位有多个图层组合而成，那么就分别栅格化，然后依次选中 ，最后Ctrl + E合并为一个
第四步：当自己要切的部分已经栅格化完毕以后， 那么选中选框工具，保险起见，鼠标画的框框应该比你实际的要切的部分大一点，大多少随意，然后框住它，Ctrl+C ----Ctrl + N 弹出一个剪切板 上面可以设置宽高背景色之类的，一般可以直接点确定，然后它自动跳下一个新页面，你把之前Ctrl +C的内容直接Ctrl +V，这时候页面就出来了你切出来的图，如果边边角角不对的话，可以选中定位，然后直接按上下左右方向键调整位置。OK
第五步：Ctrl +S的时候要注意，保存的图片格式最好都是png，还有有些遮罩层的图片，它一般都有透明度，在PS界面的右边栏，选中你已经切出来的图层，设置透明度。
以上就是我总结的PS切图。谢谢
二、关于写静态页面的一些心得
关于写静态页面的一些心得：
【1】注意兼容的写法和用法，比如兼容ie8，那么CSS3的属性基本不能用，而且color也不能用渐变色，所以页面的有些效果如border-ridus、box-shadow之类肯定就没有了，如果必须要用又要兼容，那么就考虑用背景图做，就是PS完美的切出来
【2】CSS选择器命名，为了方便找到对应的地方，所以最好就用后代选择器 这样逻辑也清晰， 写起来一目了然。
还有就是line-hight竟然可以设置文字之间的每一行的距离，见识了哈哈。/* letter-spacing: 3px; */设置字之间的距离。
【3】关于hover效果的认识：一个遮罩，我先隐藏起来，然后鼠标经过他的父盒子的时候 ：hover
.content_4>div:hover .mask{
display: block;
}
就可以实现让他显现 这样就减少了JS的控制
言下之意：hover的时候 后面是可以【空格隔开】跟一个选择器 然后来控制这个选择器的样式
前提是 跟的那个选择器必须是你想hover对象的后代，不然他们没有关系也hover不起来
【4】总是爱犯一个错误，想给某个块级元素设置浮动的时候，页面不对找半天原因，其实就是忘了给上个元素设置浮动而已
口诀总爱忘记“要浮都浮”
关于使用JQuery插件的一些心得
关于使用JQ插件的一些心得：
【找到对应的插件以后——先写demo来看看是否用成功了——然后一步一步的复制粘贴——最后套自己的项目】
需要注意的是：
有些插件他的原理就是给你加上它定义好了的类，所以套的时候要小心，样式很可能不一样，这就需要大量使用调试器检查样式，你检查的时候，你就会发现莫名其妙多了很多的类在你自己写的div上面，这时候你调样式的时候，就需要自己单独写一个CSS文件，里面把它加上去的类名写出来，然后单独调试，有些个别优先级比较高，你可以使用important来加强。
以上就是本周的总结。