前端入门基础知识

前言

前端小白一名,记录日常学习生活点滴

一、前端必会的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来加强。

以上就是本周的总结。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值