用实例详细讲解PSD转成HTMLCSS.docxVIP

用实例详细讲解将PSD转成HTMLCSS（上） HYPERLINK /space-uid-3.html 前端小编?发布于 2011-3-30 16:12 查看数: 11151 评论数: 5 HYPERLINK /thread-743-1-1.html 帖子模式 将PSD转成一个静态的html/css对一些朋友来说是一个很大的困扰。这个教程通过对一个完整实例的详细讲解，来教大家如何将psd转成html/css，以及JS插件的使用，制作完成的html/css页面兼容各种主流浏览器。我们将设计页面分成基本的5个部分，每一个部分都有自己的容器wrapper和内容。基本的流程是先编写Html代码，然后通过编写CSS来还原psd设计稿。 1. 我们需要从PSD文件得到什么？如下图，我们只需要从这个psd文件得到4个非常基本的东西。推荐内容(featured)的背景、底部背景、欢迎文字（Welcome）、推荐图片的框（少女面部图的白色透明边框）。其余的部分我们只需要通过CSS生成或者在html里嵌入相应图片。下图红线圈起来的地方，就是我们需要从psd获取的内容。本部分内容需要读者具备一定的Photoshop的基础知识和操作能力。你可以借助Photoshop的切片工具或者自己手动切片，并将其保存成相应的图片格式。 2.设置站点为一个网站设置良好的开发环境是非常重要的，我