一.想要将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代码的书写
示例图：如
总结：按照步骤完成的话，最基本的简单页面，就可以实现出来了。
一、首先HTML布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图设置</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
二、添加CSS样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图设置</title>
<style type="text/css">
.box {
width: 700px
height: 350px
margin: 0 auto
background: url(pic.jpg) no-repeat center
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
三、html+css最终在浏览器显示的效果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）