纲要

计划布局，划分整体结构
内容区域，从整体到局部，局部中的通用部分，根据上下文应用样式
- 公共头部（public-header）、尾部（public-footer）
- 公共容器（public-container/inner-center）
css文件，html结构，多考虑
- 不要让内联元素与块级元素处于同一级别下,如a标签与div标签
- reset.css、common.css、index.css
- 需要浮动的元素，父元素统统进行清理，给予统一的类clearfix
- 宽高度：使用偶数单位。
良好的代码规范和命名
- 不超过三级命名
巧妙属性和元素配合，还有没有更好的方案
- 活用overflow，针对一些图片、文字超出隐藏的情况。
- text-overflow，超出的文字部分，省略号显示。
- a标签可以嵌套任何p，h，div等标签（按照新的规范）一般见于同一组标题、图片文字组合等链接同一个地方的，那么大一块地方都需要链接样式去跳转，这样做比较方便。
```
  <a href="#" class="title"><h4>Voluptate cillum fugiat.</h4><p class="comment">Cheese, tomato, mushrooms, onions.</p></a>
```
兼容和细节的处理（放大100%以上，才能看出端倪）
- 反思HTML结构是否合理
  - 调试错误的时候，让错误的视觉效果极大化，更容易看出问题。
- css Hack处理

整体结构

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-centeraside.aside-leftmain.main>.content

双边栏设计

section.section-main>.inner-centeraside.aside-leftmain.main>.contentaside.aside-right

特定需求

固定宽度设计

.inner-center{width: 980px;margin-left: auto;margin-right: auto;
}

所有宽度都以像素为单位，这种布局最简便，适用于一些本身内容比较少的页面。
无论浏览器窗口多大，它们的尺寸总是不变，无法充分利用可用空间。此时可以使用

min-width: 980px

配合

min-width

的使用，页面部分内容如 三栏布局可以使用 百分比来设置宽度(流式布局)，实现当浏览器窗口宽度小于设计稿宽度时，允许出现横向滚动条，页面内容宽度保持不变，但是当浏览器窗口宽度大于设计稿宽度时，页面内容的宽度保持和浏览器窗口宽度一致

响应式设计

百分比设计

代码规范

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,error --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, login, register, join, del, add, confirm;message, tab, current, note,guide, service, hot, news, download, vote, partner, copyright, demo, summary, pages, themes, set, blog, photo, guestbook, global; view, status, loading...
对于命名的具体应用，可以查看W3school
图片命名与图标命名，index-header-logo,index-footer-logo.
- iconfont平台

约定规则

关键词间以中划线
```
-
```
连接以中划线连接，如.item-img
使用两个中划线表示特殊化，如.item-img.item-img--small表示在.item-img的基础上特殊化
状态类直接使用单词，参考上面的关键词，如.active, .checked
图标以icon-为前缀（字体图标采用.icon-font.i-name方式命名），详情应用见CSS Icons,可以下载参考Bootstrap的图标语义命名。
模块采用关键词命名，如.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<ul><li> <a href="#"><img src="" alt=""></a> <h3><a href="#"></a></h3> <p></p> </li> </ul>

参考资料

什么鬼，又不知道怎么命名class了
HTML整站结构设计
慕课网《从psd到html》
Web重构之道

从psd文件到html相关推荐

Python图片操作-psd_tools：将psd文件转换成BMP
§01 转换psd文件 psd文件是Phtoshop图片格式,使用Python的库psd-tools将它进行转换.最近由逐飞科技提供的第十六届智能汽车竞赛AI视觉组分赛区数据集所有的图片输出的 ...
英伟达“神笔马良”GauGAN发布Windows应用程序，可导出PSD文件
丰色发自凹非寺量子位报道 | 公众号 QbitAI 大家还记得致敬印象派大师高更的GauGAN吗? 只需简单画几笔,就能生成逼真风景画的那个: 这个能让普通人秒变"神笔马良" ...
40种为网页设计师准备的高品质和免费的多媒体PSD文件
好的东西总是非常稀少的,尤其是一些珍藏的PSD文件,网络上人们喜欢在线听歌看视频,不知道你注意没有,播放界面都是非常注重用户体验的,网页设计师在字面上创建美观的播放器皮肤.因此今天奉献给设计师40个p ...
[UE4]导入 PSD 文件失败的解决办法：输出为 PNG，将 PNG 再保存为 PSD 导入
导入 PSD 文件失败的解决办法:输出为 PNG,将 PNG 再保存为 PSD 导入图1 报错弹窗 LogFactory: FactoryCreateFile: Texture with Reimp ...
psd文件超大？教你如何压！ - 技巧篇
psd文件内存太大,打开太卡顿,教你如何压! 很多你不知道的PS技巧! 解决办法: 高效压缩! 有时候,几百兆的文件,能直接给你压缩到100M以内(源文件300M). 免费查看 · 资源地址: 参考技 ...
使用 PSD Validator 在线校验 PSD 文件的质量
PSD Validator 可以帮助你在线校验 PSD 文件的质量,使用的规则来自 Photoshop Etiquette.Photoshop Etiquette 整理了 PSD 文件的规范,例如删 ...
在线PS(PhotoShop),打开PSD文件,图像处理
在线PS(PhotoShop),打开PSD文件,图像处理打开并编辑PSD,XCF,Sketch(Photoshop,Gimp和Sketch)或任何其他图像文件. 检查PSD和Sketch文件. 将S ...
ps保存psd后图层全没了_明明只有几个图层，为什么我的 PSD 文件这么大？
不知道有多少人被这个问题困扰过,总有那么几个 PSD 文件,明明只有几个图层而已,图层内均没有特别大的图片,但 PSD 文件却特别大,至少都比合理的大小超出几倍.而且在设计过程当中,保存时也会出现明显 ...
大前端求人不如求己系列工具：如何PSD文件自动标注切图和真机预览
前言在很多时候,UI会给一部分切图,当你使用一个新的技术,需要的不再是png而是webp或者SVG时候,沟通变得异常复杂,沟通成本急剧增加. 很多时候在想,是否有一些工具,可以帮助我们解决这个尴尬的 ...
室内设计——海市蜃楼售楼部室内设计（包含预览图jpg和.psd文件）
一.设计说明海市属楼是人们对虚拟空间的幻想,一直以来都是在江面上或者沙漠上才会出现此奇景.设计灵感来自于海洋博物馆,它是在海洋上伫立的一座建筑物,人们可以任意观赏在海洋上发生的奇特景观. 此座售楼部 ...

从psd文件到html

纲要