将PSD转换为前端网页其它注意事项

前期准备

• HTML
• CSS
• Photoshop

---

知识点

• CSS和HTML代码配合
• CSS命名和HTML标签结构应用
• 如何用好photoshop去审视一个设计稿
• 浏览器兼容性

---

1. 样式文件和初始化

1. 审视psd，查看结构，初步估计工作量和样式规范
2. 创建合理的目录结构
3. 划分样式结构：重置样式，公共样式，独立样式（这里提供一个重置样式的CSS代码）

    // reset.css
    body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,input,form,a,p,textarea{
        margin:0;
        padding:0;
        font-framily:font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    }

    ol,ul,li{
        list-style: none;
    }

    a{
        text-decoration: none;
        display: block;
    }

    img{
        border: none;
        display: block;
    }

    .clearfloat{
        zoom: 1;
    }

    .clearfloat:after{
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
    }

2. HTML页面结构整理

1. 框架能用HTML5就用HTML5，不行就用div
2. 样式的定义一般通过class实现，尽量不要用id
3. 语义化命名规范，公共样式的命名尽量在实际class名前加“public-”，独立样式的命名尽量在实际class名前加当前文件名，如：“index-nav”，“signUp-form”
4. 多级结构上下级之间尽量用中划线分离（下划线也行）如：“signUp-form-input”
5. 实现代码的复用
6. 切图前先搭建网页结构
7. 块级元素的各种长度尽量用偶数
8. 尽量不能让内联元素和块级元素处在同一级
9. 根据产品需求把独立样式和公共样式单独分离出来
10. 先填充公共元素的样式，再填充独立元素的样式
11. 认清页面中的超链接元素，有些页面的超链接是不容易看清但必须要有的，有时候页面看上去像是有超链接，但其实只是一种样式，需要自己去理解
12. 有些图片上的操作是可以通过CSS修饰的，不要有什么事就去切图
13. 微调页面
14. 调整网页的兼容性