欢迎使用CSDN-markdown编辑器
来源:互联网 发布:vr全景合成软件 编辑:程序博客网 时间:2024/06/06 10:42
从psd文件到html
- 计划布局,划分整体结构
- 内容区域,从整体到局部,局部中的通用部分,根据上下文应用样式
- 公共头部(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="#" 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-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<ul> <li> <a href="#"><img src="" alt=""></a> <h3><a href="#"></a></h3> <p></p> </li> </ul>
参考资料
- 什么鬼,又不知道怎么命名class了
- HTML整站结构设计
- 慕课网《从psd到html》
阅读全文
0 0
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 编程老手的哪些特点,是值得新手程序员学习的?
- 【剑指offer】字符串的排列
- 找零问题
- js中const,var,let区别
- Linux 简单的命令
- 欢迎使用CSDN-markdown编辑器
- 虚拟机:mac系统虚拟机安装
- 使用spring boot连接数据库出现no profiles are currently active的问题
- hiho #1532 : 最美和弦(记忆化搜索思路的DP写法)
- 笨方法学python(本文为阅读时从此书摘录的笔记) 第四天
- 免费的h5下载网站,资源。
- CNTK API文档翻译(9)——使用自编码器压缩MNIST数据
- 5-30 字符串的冒泡排序 (20分)
- webpack 1.x构建react项目简单配置