web第八天，PS切图与float浮动

标签：生成   one   bsp   play   取值   alt   模拟   安装   排列   

一，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，企业中是如何切图的？

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（常用）

　　　　②，解决嵌套排列的情况

　　　　　 固定宽高   :  不推荐 , 不能把高度固定死，不适合做自适应的效果。

web第八天，PS切图与float浮动

标签：生成   one   bsp   play   取值   alt   模拟   安装   排列   

原文地址：https://www.cnblogs.com/lykpy/p/12357256.html