首页 > 5811标准 > 规范

布局模型和命名规范

布局模型

三层布局模型把网页分为:布局层,公用样式层(栏目层),内容层


  1. 布局层:专注于布局一般用div标签,命名范围为:row-*,col-*,wp 等仅限于布局使用不可用作定义样式

  2. 公用样式层(栏目层):专注于公用模块层比如一样模块的标题、边框、间距等等,常用语首页的模块,一般使用范围:dl dt dd , m-mod* ,公用元素包含 g-tit, g-inp ,g-btn 等

  3. 内容层:一般的模块层如:新闻列表,头部,底部,产品列表,图片列表,自定义模块等等,其中有些是公用的,有些是非公用的,一般命范围:列表类用ul,li 标签,其它类型的用 m-* div标签



image.png

例子


下面的图片列表是列表模块使用ul li 标签,而不是布局


image.png


上面这样的是一个列表模块,可以用 Ul li 实现,一个完整的列表模块里面的内容是重复性的,以上3个都是重复的,只是底部颜色不一样。



class命名规范

头部:.header

底部:.footer

主导航:.nav

子导航: .navsub

侧边导航:.snv

当前位置:.cur

页码:.pages

栏目标题:.g-tit-* (1,2,3,4,...)


列表:ul.ul-* (news,case,txt,info,list)


请下载规范fpd: 

标签命名规范示例表.pdf



上一篇:HTML基本原则