1. ps切图
切图方式：图层切图、切片切图、ps插件切图
1.1. 常见的图片格式
jpg格式：产品类的图片经常用jpg格式
GIF图像：颜色少，智能存储256，可以保存透明背景和动画效果，实际经常用于一些图片小动画效果
PNG格式：储存形式丰富，可以保存透明背景，如果想切成透明背景的图片，可以选择PNG格式
PSD格式：Photoshop的专用格式，对前端来说最大的优点是可以直接从上面复制文字获得图片，还可以测量大小和距离
1.2. 图层切图
最简单的切图方式，右击图层->快速导出PNG ps合并图层：Ctrl+E
1.3. 切片切图
（1）利用切片工具手动划出 （2）导出选中的图片 文件菜单->导出->储存为web设备所用格式->选择格式->储存
1.4. ps插件切图
cutterman是一款运行在Photoshop中的插件，能够自动的将需要的图层进行输出，以替代传统的手工“导出为web所用格式”以及使用切片工具进行挨个切图的繁琐流程
2. 学成在线网站案例
2.1. css属性书写顺序
建议遵循一下顺序：
- 布局定位属性：display/position/flaot/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
- 自身属性：width/height/margin/padding/border/background
- 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
- 其他属性(css3)：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...
2.2. 页面布局整体思路
- 为了提高网页制作的效率，布局时通常有以下的整体思路：
- 必须确定页面的版心（可视区），我们测量可得知
- 分析页面中的行模块，以及每个行模块中的列模块。其是页面布局的第一准则
- 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则
- 制作HTML结构，还是遵循先有结构，后有样式的原则，结构永远最重要
- 所以，先理清楚结构，再写代码尤为重要
2.3. 头部制作
导航栏注意点：
- 实际开发中，不会直接用链接a而是用li包装含链接（li+a）的做法
- li+a语义更清晰
- 如果直接用a，搜索引擎容易辨认为有堆砌关键词嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
注意：
- 让导航栏一行显示，给包含a的li标签加浮动。a是行内元素，本身就应该在一行显示，但是因为li是块级元素，每个块级元素独占一行，正是li导致了a标签不能在一行显示
- 导航栏可以不给宽度，将来可以继续添加其他文字
- 因为导航栏的文字不一样多，最好给链接a左右padding撑开盒子，而不是指定宽度
search搜索框：
一个search大盒子包含2个表单 input文本框+button按钮
注意：
- button默认有个边框，需要手动去掉
- input文本框和button都属于行内块元素，两个行内块元素在一行内挨着中间会产生一个缝隙，当两个标签在同一个盒子且宽度加起来正好是盒子的宽度时，第二个标签（button）就会被挤掉下来，解决方法是给两个行内块元素都加上浮动，浮动的元素是没有缝隙的。
注意：
- 浮动的盒子不会有外边距合并的问题
- 行高（line-height）会从父标签继承到子标签
vscode小技巧：Ctrl+G（goto）后输入行数快速跳转
