一，PS工具
1，组成
菜单栏（上） 工具栏（左） 辅助面板（右）
2，图片常见格式
jpg ： 色彩丰富，比较适合做照片格式
png ： 可以做透明的图片
gif ： 动图
psd ： 是设计图的源文件
3，PS的简单操作
①，alt+鼠标滑轮： 放大缩小图片
②，辅助面版 ： 图层，；历史记录， 信息（查看图片宽高）
③，标尺 ： 最好先调出来，视图->标尺
④，参考线 ： 可以从标尺上拖拽出来，也可以拖拽回去，也可以视图->清除所有参考线
⑤，撤销 ： ctrl+z，辅助面板中的历史纪录
⑥，tab键可以显示与隐藏工具栏与辅助面板
4,工具栏工具
①，移动工具
先点中自动选择按钮，然后就可以点击任意的图层进行选择
②，矩形选框工具
对JPG，PNG进行切图处理，还可以量取尺寸大小
微调 :
通过键盘的上下左右键，进行选框的移动，这样可以将位置对齐
alt : 可以对所选框进行减少的操作
shift ： 可以对所选款进行添加的操作
切图 ：
ctrl+c复制，ctrl+n新建界面，ctrl+v粘贴，导出->快速生成png，导出为web存储格式（jpg，gif）
注 ： 要想对png进行半透明操作，需要用到魔术棒
如果要切图，必须先选中这个图层
③，切片工具
在工具栏的第五个工具，可以一次性切多个图片
④，吸管工具
吸取图片颜色，颜色在拾色器中获取
⑤，排版文字工具
添加或选中一些文本相关的操作（进行文字尺寸的对比测量）
⑥，抓手工具
可以移动图层到指定的可视区域（快捷键：空格）
⑦，放大镜工具
类似于alt+滑轮，将图片进行放大与缩小
5，PSD切图
要选择CC以上版本
①，编辑->首选项->增效工具->启用生成器
②，文件->生成->图像资源
6，企业中是如何切图的？
1. 蓝湖的账号。
2. 下载PS相关的插件。然后去安装。
3. 窗口 -> 扩展功能 -> 蓝湖
4. 小姐姐通过 蓝湖插件上传到web网页端。
鹏哥(前端届最帅的开发)：
1. 蓝湖的账号。
2. 直接在网页中查看到相关的数值。也可以直接下载切图。
2,PS实战
1，先写HTML结构
2，重置默认样式
3，写选择器
4，通过PS测量具体的数值
3，float浮动
1，文档流
文档流是文档中可显示对象在排列时所占用的位置。
2，float特性
加浮动的元素，会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
3，float取值
left：左浮动 right：右浮动 none：不浮动
4，float注意点
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列，当容器放不下这些浮动元素的时候，就会换行排列 ( 尽量让浮动的元素高度是统一 )
主要给块元素添加，但也可以给内联元素添加。
5，清除浮动
①，解决上下排列的情况
利用clear属性清除float浮动
clear：left | right | both（常用）
②，解决嵌套排列的情况
固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。
overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} a{text-decoration: none;} img{display: block;} ul{list-style: none;} #box{ width: 366px;height: 289px;margin: auto; } h2{ background: url(./img/2.png) no-repeat 6px center; line-height: 24px;font-size: 12px; background-color: #ebf6f9; padding-left: 30px; margin-bottom: 13px; } img{ clear: both; float: left; border: 1px #c8c4d3 solid; padding: 2px;margin-left: 5px;margin-bottom: 22px;margin-right: 13px; } .imgs{ margin-bottom: 11px; } p{ width: 240px; float: left; font-size: 10px;line-height: 20px; } .text1{ font-weight: bold; } </style> </head> <body> <div id="box"> <h2>外媒精选评论</h2> <div id="content1"> <img src="./img/3.png" alt=""> <p class="text1">《加勒比海盗4》--商业味浓郁</p> <p class="text2">本集加勒比海盗简述了杰克船长受<br>英王所 托寻找“不老泉”，与他。<a href="#">【详细】</a></p> </div> <div id="content2"> <img src="./img/6.png" alt=""> <p class="text1">测试文字</p> <p class="text2">测试文字测试文字测试文字测试文</p> </div> <div id="content3"> <img src="./img/8.png" alt="" class="imgs"> <p class="text1">测试文字</p> <p class="text2">测试文字测试文字测试文字</p> </div> </div> </body> </html>
