2.5css ps切图、

PS切图

常见的图片格式：

jpg：产品类图片经常用jpg格式

gif：可保存透明背景和动画效果，实际经常用于一些图片小动画效果

png：如果想要切成背景透明的图片选择

psd：对前端来说最大的优点是可以直接从上面复制文字获得图片，还可以测量大小和距离

图层切图

（1）用鼠标选中图层>右击图层>快速导出为PNG

（2）合并图层再导出：选中需要的图层，图层菜单，合并图层（ctrl+e），在快速导出为PNG

切片切图

利用切片工具手动划出
导出选中图片：文件菜单>导出>存储为web设备所用格式>选择所需的图片格式>存储

ps插件切图

cutterman插件

CSS属性书写顺序（体现专业-重点）

布局定位属性：display/position/float/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.....

页面布局整体思路：

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

网页布局第二准则：先设置盒子大小，之后设置盒子位置

必须确定页面的版心（可视区），可通过测量得知
分析页面中的行模块，以及每个模块中的列模块（页面布局第一准则）
一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置（页面布局第二准则）
制作html结构。还是遵循先有结构，后有样式（结构永远最重要）
先理清布局结构，再写代码

6、案例学成在线网页制作

1、头部制作（header）

导航栏（nav）注意点:

实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法

ul>li>a

li+a语义更清晰，一看这就是有条理的列表型内容
如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权风险），从而影响网站排名

注意：（1）让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示

（2）这个nav导航栏可以不给宽度，将来可以继续添加其余文字

（3）因为导航栏里文字不一样多，所以最好给链接a左右padding撑开盒子，而不是给指定宽度

2.5css ps切图、相关推荐

web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
ps切图后 JAVA开发_2018年设计师都在用的PS切图插件--摹客
终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...
两种ps切图方法（图层/切片）
两种Ps切图方法一．基础操作: a) Ctrl++ 放大图片,ctrl - -缩小图片 b) 按住空格键space+,点击鼠标左键,拖动图片. c) 修改单位,点击编辑 ...
ps切图详解以及上传至蓝湖
ps切图详解以及上传至蓝湖介绍普通切片切图选择图层切图接下来是强烈推荐的上传蓝湖切图方式小结介绍我是一名前端开发工程师,随着工作环境的改变,遇到过公司没有ui设计师,或者ui设计师只为我 ...
前端编程中利用PS切图还原设计图
一. PS 切图 1.1. 常见的图片格式序号格式特点和常用的用途 1 jpg JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们**产品类的图片** 经常用jp ...
PS切图 - （快捷键）操作方法
PS快速切图 - 动作(Shift + F8) PS切图 - (快捷键)操作方法动作快捷键: 选中你需要切图的图层: Shift + F8 就会直接切图(以图层的边缘为准): 然后,保存就好. @2 ...
ps切图的零散小知识
关于ps切图的零散小知识认识多种图片文件格式选择测量的工具 ctrl+D可以取消选区,或者点击旁边一下也可以取消选区 ctrl+R可以调出标尺,也可以在视图->标尺打开标尺 (调出的时候需要 ...
前端ps切图，图文教程，详细。
写在前面:本文主要内容是目前我所知道的切图技巧结合网上的资料,写出来分享一波.图文教程,多图!! BB:很多人都会说,切图这个活倒底分给UI还是分给前端.虽然好的UI会给我们把图切好,但是他们切的图不 ...
ps切图与版心页面布局注意问题
版心是页面内容的展示区域有具体宽度 width:px: 左右居中 margin{0 auto} Ps切图方式方式一矩形选框工具选中区域 > ctrl+c > ctrl+n > c ...
Sprite 从PS切图到具体实现完整过程
CSS雪碧图(sprite)是一种网页图片非常高效的处理方式,它是将页面中包含的零星图片利用PS制作到一张大图中,再结合background-position属性进行定位的的方式实现. 它的优点有以下 ...

2.5css ps切图、

2.5css ps切图、相关推荐

最新文章

热门文章