从psd文件到html
纲要
-
计划布局，划分整体结构
-
内容区域，从整体到局部，局部中的通用部分，根据上下文应用样式
- 公共头部（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处理
- 反思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
特定需求
固定宽度设计
.inner-center{
width: 980px;
margin-left: auto;
margin-right: auto;
}
所有宽度都以像素为单位，这种布局最简便，适用于一些本身内容比较少的页面。
无论浏览器窗口多大，它们的尺寸总是不变，无法充分利用可用空间。此时可以使用
min-width: 980px
配合min-width的使用，页面部分内容如三栏布局可以使用百分比来设置宽度(流式布局)，实现当浏览器窗口宽度小于设计稿宽度时，允许出现横向滚动条，页面内容宽度保持不变，但是当浏览器窗口宽度大于设计稿宽度时，页面内容的宽度保持和浏览器窗口宽度一致
响应式设计
百分比设计
代码规范
命名约定与应用
常见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.
约定规则
- 关键词间以中划线
-连接 以中划线连接，如.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>
