前端小总结

有一段时间没写博客了,也该总结下这半年里的技巧和进步;

一.关于切图

  1.等分切图(可切固定高度像素的图):选取“切片”--右键--“划分切片”;

  2.对于经常要重复的操作,可以使用ps中的动作--录制,之后便可以一键操作,方便快捷;

  3.根据图层切图:选取任务栏“文件”--“脚本”--“将图层导出到文件”--选择“文件类型为png-24”;

  4.快速切图:可使用potoshop cc 并按照 “Cutterman”插件,优点可快速切ios,安卓,web等端的切片

     

  5.当图层太多时,需要在可视区内选中当前图标的图层时,可使用快捷键“ctrl+v+点击当前图标”;

  6.控制切片的图片质量大小:在存储为web格式中,jpg的保存质量约为60左右,原则是图片不失真,大小尽量小,无透明背景的图片尽量使用jpg,小图标可使用gif等;

     

  7.图片批量命名,可用 “拖把更名器”;

  8.css sprites 使用gopng快速生成及编码,(前提:需要有各个小图片的切片)

   在线工具:alloyteam.github.io/gopng/

   优点:能快速知道对应的图标在图片的位置;

   

二.关于sublime text

  1.使用快捷键可加快开发速度

  常用快捷键:ctrl+H 查找和替换

        ctrl+/ 注释

        ctrl+[/] 缩进

        ctrl+tab文件切换

        ctrl+D 删除本行

        ctrl+shit+D 复制并粘贴本行

        ctrl+L 选取整行

        home End 移动到行首与行尾

        alt+ f3 显示所有匹配项

        f11 切换到免打扰模式

        ctrl + y 重复到上一次操作

        ctr + z 撤销

        等等

三.html结构,css小拾

   1.使用 <i class="Icon Icon-search"></i>放置小图标,小图标使用css sprites 整合,background-position定位,css分类原子化,增强复用性

   2.定位float 定位时注意清除浮动,relative定位时注意其与相对位置的偏移,absolute定位时注意其是相对最近的relative的偏移;fixed定位注意是否需要相对窗体定位(窗体缩小,其定位变化),还是相对可视区(窗体缩小,其位置不变化,但含有fixed 的效果,内可嵌套一层以absolute定位的div);

   3.html结构。避免标签单一化,尽量多使用语言话标签,如 h1~h6,p,i,ul,li,ol,dl,dt,dd,span,html5类已兼容的标签如header,nav,section,sside,menu,article,footer等;

   4.慎用padding,会增加width的实际宽度,height的设定根据需求,尽量不设死,让其自适用;

   5.水平居中:1.已知宽度 margin:0 auto;2.未知宽度 定位absolute,left:50% margin-left:慢慢调;父类relative;

   6.垂直居中:1.知道高度 (1.单行居中:line-heightheight;2.多行居中:给出一致的 padding-bottom 和 padding-top 就行;3.把容器当做表格单元:display:           table-cell;vertical-align: middle;

         2.未知高度 (定位absolute,top:50% margin-top:慢慢调;父类relative)

   7.css文件归档

        将css分作两类:通用类(css reset和全局模块 复用性强的原子类)和业务类(细化到具体业务或页面层级);

        文件夹:通用类(全局引用):

              1.基本样式库 /css/core(内含css reset.css,颜色,字体大小,margin,float:left;float:right;等小原子类);

              2.通用UI元素样式库 /css/li (内含对应UI模块的样式 module.css 例如菜单样式,下拉样式,页头样式,页脚样式等等)

              3.JS组件相关样式库 /css/ui (内含一些被引入的js样式,也就是第三方的css,例如bootrap3.css);

            业务类(页面级,局部引用):

             1. 以导航功能区分(大项目,有一二三级导航)

                例如:

                读书 /css/book/

                电影 /css/movies/

                音乐/css/music/

                社区/css/sns/

                等等

              2.单个页面的css文件(小项目);

三.js小拾

    1.尽量减少Dom操作,常用Dom对象需要缓存,变量命名语义化,功能模块需注释,使用面向对象开发;

    2.js文档分类加载(主要用会模块化)

      1.文档分类如css分类,通用类(内含页头,页脚js)及业务类层级(具体业务或页面的js),具体文件夹如css文件夹分布,

      2.使用seajs轻盈加载相应页面的js

    

        

原文地址:https://www.cnblogs.com/hanbingljw/p/4521931.html