经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
web开发tools
来源:cnblogs  作者:新新子  时间:2021/2/18 15:01:10  对本文有异议

1、Web代码工具

 

  网页开发工具:HBuilderX、VSCode、SublimeText、Dreamweaver、WebStorm...

 

  • HBuilderX —— 内置浏览器、app云打包
  • VScode —— 丰富的快捷键、代码整理方便

  • SublimeText——文艺青年 轻量级,打开速度超快

  • Dreamweaver——普通青年
  • WebStorm

 

2、Emmet语法

 1- 快速生成HTML结构

  1、生成标签 — 直接输入标签名,按tab键即可:比如div+tab 键, 就可以生成 <div></div>

  2、生成多个相同标签,加 * 即可:比如 div * 3 就可以快速生成3个div

  3、生成有父子级关系的标签,可以用 > 即可,比如 ul > li 就可以了

  4、生成有兄弟关系的标签,用 + 即可,比如 div + p

  5、生成带有 类名 或者 id 名字的, 直接写 .demo 或者 #two ,再tab 键

  6、如果生成的div 类名是有顺序的, 可以用 自增符号 $,.demo$*5


    <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

 

  7、如果想要在生成的标签内部写内容可以用 { } 表示, 如 div{ }

    <!-- .div{文字内容直接显示} -->
    <div class="div">文字内容直接显示</div>

    <!-- .div{文字内容直接显示}*5 -->
    <div class="div">文字内容直接显示</div>
    <div class="div">文字内容直接显示</div>
    <div class="div">文字内容直接显示</div>
    <div class="div">文字内容直接显示</div>
    <div class="div">文字内容直接显示</div>

  

  8、同时生成五个超链接,并且内嵌文字:a{文字内容}*5;

  然后按住shift和alt,鼠标左键向下拖动,别松开,输入#号,可同时设置5个;

 

 2- 快速生成CSS样式语法

  CSS 基本采取简写形式即可.

  1、比如 w200 按tab 可以 生成 width: 200px;

  2、比如 lh26px 按tab 可以生成 line-height: 26px;

 

3、VSCode快捷操作

输入 !再按 tab 键,生成 html5 架构;

Ctrl + x 剪切;

Ctrl + / 注释;
Ctrl + h 查找替换;
Ctrl + S 自动调节格式保存; 

shift+alt+向下键 快速复制上一行;

Ctrl + 加号键 ,Ctrl + 减号键 可以放大缩小视图;

IDEA ctrl+d 复制上一行;ctrl+alt 多行选中;

导航栏里 查看 选项里有 自动换行,可针对p标签的文字内容自动调节;

 

4- VSCode插件

  左侧最后一个

插件作用
chinese(simplified) 汉化语言包
open in browser 右键点击浏览器打开html文件
auto rename tag 自动重命名配对的html标签
css peek 追踪至样式
easy less less转css文件(rem+less+媒体查询)
cssrem px转rem插件(rem+flexible)
terminal 控制台调试

  

  1、cssrem插件:因为 cssrem 中css自动转化为rem是参照默认插件的16转换的所以需要自己配置;

          右上角设置键,设置更多操作 首选项按钮——打开setting. json——输入cssroot——cssrem.cootFontSize:16px;——点击左侧编辑,复制修改,——重启

 

  2、快速格式化代码配置:右键格式化代码——ctrl+s 自动对齐;

  步骤:

    1、文件——首选项——设置;

    2、搜索 emmet.inlcude;

    3、在 setting.json下的 【用户】 中添加以下语句:

      "editor.formatOnType":true,

      "editor.formatOnSave":true

 

 

5、ps基本操作

  因为网页美工大部分效果图都是利用ps 来做的,所以,以后我们大部分切图工作都是在ps里面完成。

 1、ps快捷键

  • 文件--打开 -- 可以打开 我们要测量的图片

  • ctrl+r 可以打开标尺 或者 视图 -- 标尺

  • 右击标尺, 把里面的单位改为 像素 (默认cm)

  • ctrl+ 加号 键 可以 放大 视图 ; ctrl+ 减号 缩小视图

  • 按住空格键, 鼠标可以 变成小手 ,拖动 ps 视图

  • 用选区(矩形工具) 拖动 可以 测量 大小

  • ctrl+ d 可以取消选区 或者旁边空白处点击一下也可以取消选区

  1. ctrl + j 复制图层

  2. ctrl + g 合并图层

  3. ctrl + t 移动图层

  4. alt + 放大

  5. ctrl + d 取消选区

  6. shift + alt 以中心点向外画圈

  7. 前景色 填充:alt + delete

  8. 背景色 填充: ctrl + delete

 

 2、套索工具

  多边形套索:有角度,用于形状,选区之后按移动键,到新图层;

  磁性套索:自动吸附,用于人体描边;

  魔棒工具:根绝容差自动选择颜色,容差越小越接近;

  反选:魔棒选区的是颜色,我们要的是人,ctrl + shift +i;

 

 3、切图

  1、手动切图

    切图——勾选——存储为web所用格式——在页面中选中切片——存储式改为当前切片;

  2、图层切图

  3、基于参考线切图——利用标尺基于参考线的切片——存储为web格式

  4、清除切片、视图:

  视图——清除切片、辅助线

 

 4、PS切图

  

  4.1 常见的图片格式

  1. jpg图像格式:

    JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式的

  2. gif图像格式:

    GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果

  3. png图像格式

    是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景

  4. PSD图像格式

    PSD格式是Photoshop的专用格式,里面可以存放图层、通道、遮罩等多种设计草稿。

  

  4.2 PS切图 可以 分为 利用切片工具切图 以及 利用PS的插件快速切图

  1、图层切图:

    移动工具,点击图层,右击导出png;

    若需要选择多个图层,需要合并为一个图层在导出;shift+选中,ctrl+e合并为一个图层,右键导出;

  2、PS切片工具

  1). 用切片选中图片

  • 利用切片工具手动划出

  • 图层菜单---新建基于图层的切片

  • 利用辅助线 来切图 -- 基于参考线的切片

  2). 导出切片

  文件菜单 -- 存储为web设备所用格式 ---- 选择 我们要的图片格式 ---- 点存储 --- 别忘了选中的切片

  3). 辅助线和切片使用及清除

  视图菜单-- 清除 辅助线/ 清除切片

 

  4.3、切图插件

  Cutterman是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出, 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。

  它支持各种各样的图片尺寸、格式、形态输出,方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则,纯点击操作,方便、快捷,易于上手。

  官网: http://www.cutterman.cn/zh/cutterman

  注意: cutterman插件要求你的ps 必须是完整版,不能是绿色版,所以大家需要从新安装完整版本。

  窗口菜单——扩展功能,能用就是完整版,安装注册完成后,扩展功能显示;

 

原文链接:http://www.cnblogs.com/xinxinzi/p/14373625.html

 友情链接: NPS