将PSD转换为前端网页其它注意事项
来源:互联网 发布:js用cookie统计uv 编辑:程序博客网 时间:2024/06/06 01:38
前期准备
- HTML
- CSS
- Photoshop
知识点
- CSS和HTML代码配合
- CSS命名和HTML标签结构应用
- 如何用好photoshop去审视一个设计稿
- 浏览器兼容性
1. 样式文件和初始化
- 审视psd,查看结构,初步估计工作量和样式规范
- 创建合理的目录结构
- 划分样式结构:重置样式,公共样式,独立样式(这里提供一个重置样式的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页面结构整理
- 框架能用HTML5就用HTML5,不行就用div
- 样式的定义一般通过class实现,尽量不要用id
- 语义化命名规范,公共样式的命名尽量在实际class名前加“public-”,独立样式的命名尽量在实际class名前加当前文件名,如:“index-nav”,“signUp-form”
- 多级结构上下级之间尽量用中划线分离(下划线也行)如:“signUp-form-input”
- 实现代码的复用
- 切图前先搭建网页结构
- 块级元素的各种长度尽量用偶数
- 尽量不能让内联元素和块级元素处在同一级
- 根据产品需求把独立样式和公共样式单独分离出来
- 先填充公共元素的样式,再填充独立元素的样式
- 认清页面中的超链接元素,有些页面的超链接是不容易看清但必须要有的,有时候页面看上去像是有超链接,但其实只是一种样式,需要自己去理解
- 有些图片上的操作是可以通过CSS修饰的,不要有什么事就去切图
- 微调页面
- 调整网页的兼容性
0 0
- 将PSD转换为前端网页其它注意事项
- 如何将AI文件转换为PSD文件
- 将网页转换为PDF
- psd转换为html案例
- 将二进制转换为其它进制(这里转化为16进制,其它自己尝试)
- Java parseInt将其它进制整数转换为十进制
- 将word转换为网页(WordToHtml)
- 转换 PSD 为 HTML 的教程
- 前端切图,把psd文件做成一个网页
- 为Web前端开发者准备的免费PSD资源网站
- 其它数据类型转换为字符串
- 如何将PSD批量装换为JPG如何对PSD批量减小体积
- 将网页在线转换为PDF的网站
- 将网页内容转换为pdf文件存档
- WORD:将word文档转换为HTML网页
- 通过程序将Visio文档 转换为html网页
- 将skia支持的其它格式图像转换为bmp8888的小工具
- 关于如何从PSD转换为HTML&CSS的教程
- 欢迎使用CSDN-markdown编辑器
- Java总结篇系列:Java多线程(三)
- 代码与inline关键字的使用
- 详细解读 LLDB 调试器
- 视差滚动
- 将PSD转换为前端网页其它注意事项
- Weblogic 数据源 连接池占满的一种解决思路
- Base64编码与解码原理和使用及复杂数据的存储
- 程序员必读书单 1.0
- study-11 文件系统选型及nfs网络文件
- Git使用记录,项目中常用的操作步骤。无概念
- ase64编码与解码原理和使用及复杂数据的存储
- java递归查询公司下所有部门及子部门
- AEAI DP V3.7.0 发布,开源综合应用开发平台