psd快速转化html模版(切图)

知识点

● css和html代码配合
● css命名和html标签结构应用
● 用ps去审视一个设计稿
● 浏览器兼容性

切图的方法

准备好一张psd的网站图，软件photoshop；
对于样式分类，有助于提高效率
分为公共样式common，重置样式reset，主页样式index三个部分来写，当然看个人需求，大部分可以写在一块，但是新手这样比较清晰。

reset.css//
body,div,dl,dt,dd,ul,li,a,p,h1,h2,h3,h4,h5,h6,input,form,textarea{
    margin:0px;
    padding:0px;
}
ol,ul li{
    list-style:none;
}
a{
    text-decoration:none;
    display:block;
}
img{
    border:none;
    display:block;
}

.clearfix{
    zoom:1;
}
.clearfix:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
}
//

1. html页面开始布局时，先要有大局观，把公共部分搞定，而且所有的命名要规范，仔细。命名规范和层次性很重要
2. 命名时切记用拼音，都用英文单词，或者中划线连接。
3. 典型的公共样式，公共宽度或者居中容器，样式都分开来写，只用加在class前就可以了。
4. 内联元素和块级元素在布局时，尽量不要在同一级中出现。像是ul，li这种常用的列表，写样式的时候不要直接对li操作，最好都加上一个class来局部操作。
5. 对于有浮动布局的元素，基本都在后面加上清除浮动clearfix，可以防止以后布局混乱
6. 不常换的图片或者logo，都用css的background背景去显示，要与后台数据交互的才放在html标签里。
7. 使用ps抠图，选中图片图层-右键智能化对象-框选中图片-复制-新建ctrl+n-粘贴-存储为png/jpg. |ctrl+d取消选择 ，ctrl+alt放大镜效果，h选中拖拉。
   可以调整图像-画布大小自己来布置一张icon精灵图
8. 破折号的css可以用设置一个宽和上表框，inline-block以后可以显示出来。
9. span标签可以多用来存精灵图，和特殊颜色的字符。
   当我们把内联元素变成inline-block的时候，如span，用font-size : 0;清除行内块元素的4px间距.
   最后要做一些兼容性的处理，尤其在IE浏览器下,对css样式做hack处理，像是
   margin-top:20px; /只在IE7下实现*/

最后，需要自己练习一份从拿到psd内容，到能比较快速的变成静态web布局的水平，后续会再上传一份代码块。