如何将psd网页切图转换成html

html-css09

如何将psd网页切图转换成html,第1张

psd网页切图转换成html，其实psd的切图就是网页前端的初步设计，这时候，网页的形象已经出来了，然后需要做的就是前端人员将psd的切图，参考psd去用html+css等一些语言去完成设计，如网站的背景，就需要css的background来实现，具体看下代码：

<html>

<head>

<style>

body{

width:960px

//限定网页的宽度

margin:0

auto

boreder:1px

solid

#f00

//加个边框利于观察

}

</style>

</head>

<body>

<p>我是测试文字</p>

</body>

</html>

将psd网站模板转换成html网页形式，首先需要理解，psd的模版，只是对于网站的一个整理布局，使用图片的形式来做的，而在浏览器上需要过html+css+js等等这些技术手段才可以来做出来，如PSD的网站的背景颜色，在网页中，需要去使用background：#f00，来实现，psd其实就是一种参考，具体我们看下，一些小的代码设计：

<html>

<head>

<style>

body{

width:960px //限定网页的宽度

margin:0 auto

boreder:1px solid #f00 //加个边框利于观察

}

</style>

</head>

<body>

<p>我是测试文字</p>

</body>

</html>