psd->html 原型图的转换

来源：互联网发布：并行计算与性能优化编辑：程序博客网时间：2024/05/16 07:11

PSD 转换 html ，就是美工的图给你,你弄成 Html .

<!DOCTYPE html><html><head><title>psd -> html</title><meta charset="utf-8"><!-- 先建立文件和文件目录存放不同类型的文件 css js img 引入文件: 样式重置文件 公共样式文件（head foot） 独立样式文件  --><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/common.css"><link rel="stylesheet" type="text/css" href="css/index.css"></head><body> <!-- 先粗略分出页面结构 --><div class="public-header">    <!-- public-header  公共头 语义化标签 --><!-- 居中容器 来去通用居中的效果 -->   <div class="public-container">  <!-- 清浮动 clearfloat --><!-- 存放 logo --><!-- <a class="header-logo"></a> 这样可以但是一个标签下 不要内联块元素处于同级别 --><div class="header-logo">  <!-- 将图片写到css 的background中 ，因为经常换 --><a href=""></a></div><!-- 存放 nav1, nav2 ... --><div class="header-nav"><ul><!-- 单独给 li 样式 设置 class 的属性 --><li class= 'nav-item'><a href="">首页</a></li><li class= 'nav-item'><a href="">文章</a></li><li class= 'nav-item'><a href="">栏目</a></li><li class= 'nav-item'><a href="">列表</a></li></ul></div></div></div><div class="index-banner"></div><div class="index-list public-container"></div><div class="index-pannel"><div class="index-pannel-header">面板的头部标签</div></div><div class="index-pannel "></div><div class="public-footer "></div></body></html>

初始化目录：将项目所用的资源目录规划 js css img 。便于引入和管理；

初始化结构: html 初始化时候在头部进行引入 css , 前端三大类基本样式：重置样式，公共头尾文件样式，独立样式。规划好样式就可以往下写

初始化文件: reset.css 进行重置基本的浏览器样式，( normail.css 优于 reset.css )

分析页面结构: 然后大致对设计进行查看：主要看看页面的整体结构分几块怎么写有没有相同的部分？

编写注意点:

样式使用的时候尽量用 class 少用 id 通用性更强一点灵活性稍高， id 可以留用做 js 操作
类的命名十分重要并且注意分文件进行 css 样式编写。例如: public-header public-footer public-index
标签注意: 在同级标签之下不同时存在行内元素和块状元素
标签使用注意灵活尽量不用 publi-index li {} 而是用 <li class="nav-item">
块状容器的意义: 居中样式定义通用的样式进行封装

# 对于样式重置的一种更优选择: normalize.css

Article： http://jerryzou.com/posts/aboutNormalizeCss/

# xhEditor 全屏编辑的快捷键居然是 ESC ---

阅读全文

1 0