从psd文件到html教程分享

计划布局，划分整体结构

内容区域，从整体到局部，局部中的通用部分，根据上下文应用样式

公共头部（html' target='_blank'>public-header）、尾部（public-footer）

公共容器（public-container/inner-center）

css文件，html结构，多考虑

不要让内联元素与块级元素处于同一级别下

reset.css、common.css、index.css

需要浮动的元素，父元素统统进行清理，给予统一的类clearfix

宽高度：使用偶数单位。

良好的代码规范和命名

不超过三级命名

巧妙属性和元素配合，还有没有更好的方案

活用overflow，针对一些图片、文字超出隐藏的情况。

text-overflow，超出的文字部分，省略号显示。

a标签可以嵌套任何p，h，div等标签（按照新的规范）一般见于同一组标题、图片文字组合等链接同一个地方的，那么大一块地方都需要链接样式去跳转，这样做比较方便。

 a href= # >
兼容和细节的处理（放大100%以上，才能看出端倪）
反思HTML结构是否合理
css Hack处理
开始之前
 
如果你还没有准备好，我们建议您阅读完这个教程系列的第一部分
: 
用
photoshop
设计一个小型、现代的
产品主页
 
，
 
因为第二部分需要第一部分做好了的
psd
文件。
 
如果你想跳过第一部分，你可以直接在第一部分中下载源文件，下面将会需要它才能继续。
 
创建文件结构，准备文件
 
1 
在桌面上创建新的空目录，取名
portfolio
。
 
2 
在
portfolio
目录下面继续创建
images
目录用于存放图片。
 
3 
接下来创建两个空文件
 
styles.css
和
index.html
 
整体结构
page-content
header
section-feature（可增/删）
section-main
section-postscript（可增/删）
footer
公共部分
inner-center
or
page-content
header
section-feature（可增/删）
section-name-1
section-name-2
...
footer
公共部分
inner-center/public-container
section-main无边栏设计
section.section-main .inner-center
左边栏设计
section.section-main .inner-center aside.aside-left main.main .content
双边栏设计
section.section-main .inner-center aside.aside-left main.main .content aside.aside-right
特定需求
响应式设计
百分比设计
固定宽度设计
代码规范
HTML(fex-team)
CSS(fex-team)
命名约定与应用常见class关键词
布局类：header, footer, container, main, content, aside, page, section
包裹类：wrap, inner
区块类：region, block, box
结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表类：list, item, field
主次类：primary, secondary, sub, minor
大小类：s, m, l, xl, large, small
状态类：active, current, checked, hover, fail, success, warn, error, on, off
导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, --scroll, overlay,
星级类：rate, star
分割类：group, seperate, divider
等分类：full, half, third, quarter
表格类：table, tr, td, cell, row
图片类：img, thumbnail, original, album, gallery
语言类：cn, en
论坛类：forum, bbs, topic, post
方向类：up, down, left, right
其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
图片命名与图标命名，index-header-logo,index-footer-logo.
iconfont平台
约定规则
关键词间以中划线-连接 以中划线连接，如.item-img
使用两个中划线表示特殊化，如.item-img.item-img--small表示在.item-img的基础上特殊化
状态类直接使用单词，参考上面的关键词，如.active, .checked
图标以icon-为前缀（字体图标采用.icon-font.i-name方式命名）。
模块采用关键词命名，如.slide, .modal, .tips, .tabs，特殊化采用上面两个中划线表示，如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
js操作的类统一加上js-前缀
不要超过四个class组合使用，如.a.b.c.d
一个类名，不要超过三个单词的连接。
主体结构命名前加上该页的命名，如index-banner，index-main。
实践应用
通过添加前缀修饰关键词
public-header,article-header，index-banner,index-panel
通过层级关系特殊化类，一般子元素接着父元素的最后一个单词（继承式）
ul.card-list  li.list-item  a.item-img-link img.item-img  h3.item-tt a.item-tt-link  p.item-text a href= # img src= alt= /a  h3 a href= # /a /h3  p /p  /li  /ul 
参考资料
什么鬼，又不知道怎么命名class了
HTML整站结构设计
慕课网《从psd到html》
以上就是从psd文件到html教程分享的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。