• 前端小总结


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

    一.关于切图

      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

        

            

  • 相关阅读:
    Unity 游戏性能优化 学习
    常用网站
    Unity3d插件开发与SDK对接实战 学习
    Unity3D常用网络框架与实战解析 学习
    问题:grid卸载后重新安装时ASM磁盘识别不到了
    问题:oracle 12c rac数据库服务器的home目录丢失问题解决2018-06-25 18:30
    Linux启动报:UNEXPECTED INCONSISTENCY: RUN fsck MANUALLY问题解决
    linux下网卡bonding配置(转)
    热扩容LVM形式的/(根)分区(无损增大、缩小LVM分区)
    LVM逻辑卷管理
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/4521931.html
Copyright © 2020-2023  润新知