做移动版html图片怎样布局

html-css015

做移动版html图片怎样布局,第1张

看你怎么来做这个移动站了，我给你举几个例子吧：

1、如果你做的是width:320px；那么你的banner图也是320px，其余的小图自己固定控制即可；

2、如果你是做最小宽度min-width与最大宽度max-width的话，控制区域最大宽度不要超过多少px，然后图片可以设置width:100%；即可自动适应；

3、页面布局100%，这样的很多时候可能会导致图片在pc电脑上失真，但是咱们做的是移动端的，所以不用顾虑那么多，设置width为100%即可；

现在的移动端整体布局都不会超出这个范围，看你自己合适做什么，选其一种即可；

最好可以想办法用JS算好你要铺背景的装载款的高宽，然后类似以下的css

div

{

background:url(/i/bg_flower.gif)

background-size: 100% 100%

-moz-background-size:35% 100%/* 老版本的 Firefox */

background-repeat:no-repeat

}

关键是：background-size: 100% 100%这句。IE下大部分会不支持的background-size的

一.想要将psd转为html，首先需要具备几个条件：

重点1就是会用切图工具，如果切图工具都不会用，那么就需要先学习制作图片的工具，例如photoshop，fireworks...等

重点2会用代码编写工具，有编写html,css,js等代码的工具

重点3会页面布局的基本代码，如果不会代码，需要先学习代码，会基本的html代码，css样式代码，如果页面稍微复杂点，还需要会javascript

二.切图以photoshop工具的切片工具切图为例，进行切图的展示（说明:切图的方法有很多，像选择选区然后ctrl+c然后ctrl+n然后ctrl+v，就可以开始保存，此为最简单的切图方法）

1.将所需的PSD文件打开

2.点击打开按钮，选择需要打开的文件

3.文件打开以后，选择工具栏的切片工具，根据需要进行图片的分割，选择切片工具，然后在psd页面上拉动选择位置，就可完成一张图的切片

4.将切图保存

5.选择保存的格式

三.根据psd设计图，进行html代码的书写

示例图：如

总结：按照步骤完成的话，最基本的简单页面，就可以实现出来了。