图片容器网页

[一对一讲什么] 之什么叫切图？

今天有人在我公众号里留言，问我“什么叫切图？是不是按着图片切。。。”？我没有直接回复他，而是决定把这个问题拿...

今天有人在我公众号里留言，问我“什么叫切图？是不是按着图片切。。。”？我没有直接回复他，而是决定把这个问题拿到这里用一篇文章来回答。

严格来讲，切图，是网页制作的一部分；网页制作，是前端开发的一部分。

切图，从操作形式上，是用图片编辑软件，对UI设计图的一种图片编辑操作，就是“图片另存为”。另存为什么呢？就是另存为网页中可以使用的图片。

那这图片，该切成什么样呢？

我不打算把下面的文章写成教程，因为切图的教程已经太多了。咱们这样，随便在网上找一张UI设计图，然后我结合我的工作经验，来讲一讲切图的过程。

随便百度“网页设计图”，就它了，这是缩略图，

原图网址：http://www.doooor.com/thread-19535-1.html

从最上往下看，

画红框的地方，就是title，为什么叫title？大家在切图之前第一件事就是确定前端规划。否则命名就会很low，这里是一篇反而教材，先行者切图小组的作业分析 & 论黑锅是怎么甩到你头上的，大家看看，，

具体的如何制定适合自己的前端开发规范，我会在“一对一视频教学”中给予详细讲解。

这里就以这个title为例来分析一下如何切图：

它是一个左中右的一行三列结构，大家注意，它的左侧LOGO和右侧的三个share按钮，都是位置固定的。但中间这个红色的东西，它的位置极有可能是会移动的。

因为这东西只是个UI图，没有详细的需求讲解，我们不知道在实际操作中，这个红色块的具体功能，但看它的位置，是在一个按钮的上面且遮盖了部分按钮，而且这个红块很像一个可以展开的菜单样的东西。

更重要的一点在于，title容器的下面是nav导航条容器，而title和nav是二个独立的DIV容器。但这个红块，身在title中，却遮盖了nav中的button，这意味着它很有可能不在title容器中，而是独立于title这个DIV层之上。

为什么会这样呢？

因为title这种东西，一般情况下都是：

.title{width:100%;height:30px;overflow:hidden;}

而红块如果在title之中，那么它就弹出不了菜单，因为overflow:hidden了

那么首先，

（1）这个红色按钮，它必须是绝对定位的；

（2）它不在title和nav二个DIV任何一个之中；

（3）它的位置用CSS绝对定位 + 负百分比固定位置；

（4）看它的设计，是外一个红块，内一个淡红块。那么二个DIV足矣，无需图片。

写了这么多，只是说明了一个title和nav，和一个menuButton的功能分析过程。拿到UI图，先要分析需求，需求不明就要从设计分析功能，搞懂了功能和需求之后，才能开始切图。

所以，切图绝对不是简单的按着图片的印儿，往下切那么简单。

篇幅所限就不多写了，这个UI图下面的分析都与此类似。

这方面详细的内容，我肯定会在一以一的视频教学中，详细的讲解的。这是基础中的基础。如果由着我讲，我能讲上一天，这得多少字才能写完啊，至少我是没这个耐心写这么多字。

所以，就讲解一个部分，剩下的大家自己体会吧。“静态页面练习小组”里的同学，你们也要从功能，从需求的角度去看待网页设计图。

其实，网页设计图，它不是一张好看的图。它其实是一个网站的工程图纸。