博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端开发代码命名的整理
阅读量:6637 次
发布时间:2019-06-25

本文共 1904 字,大约阅读时间需要 6 分钟。

转自http://www.cnblogs.com/janessasmith/p/3685266.html

 Div+CSS命名规范

一. 窗体

头:header  

内容:content/container  

尾:footer  

导航:nav  

侧栏:sidebar

栏目:column  

页面外围控制整体布局宽度:wrapper  

左右中:left right center

登录条:loginbar  

标志:logo  

广告:banner  

页面主体:main  

热点:hot

新闻:news  

下载:download  

子导航:subnav  

菜单:menu

子菜单:submenu  

搜索:search  

友情链接:friendlink  

页脚:footer

版权:copyright  

滚动:scroll  

内容:content  

标签页:tab

文章列表:list  

提示信息:msg  

小技巧:tips  

栏目标题:title

加入:joinus  

指南:guild  

服务:service  

注册:regsiter

状态:status  

投票:vote  

合作伙伴:partner

二. css注释的写法   

/* Footer */   内容区  /* End Footer */

Html注释的写法 :<!--header头部-- >

三. id的命名

1. 页面结构  

容器: container  

页头:header  

内容:content/container   

页面主体:main  

页尾:footer  

导航:nav   

侧栏:sidebar  

栏目:column  

页面外围控制整体布局宽度:wrapper   

左右中:left right center

2. 导航  

导航:nav  

主导航:mainnav  

子导航:subnav   

顶导航:topnav  

边导航:sidebar  

左导航:leftsidebar   

右导航:rightsidebar  

菜单:menu  

子菜单:submenu   

标题: title  

摘要: summary

3. 功能  

标志:logo  

广告:banner  

登陆:login  

登录条:loginbar   

注册:regsiter  

搜索:search  

功能区:shop   

标题:title  

加入:joinus  

状态:status  

按钮:btn   

滚动:scroll  

标签页:tab  

文章列表:list  

提示信息:msg   

当前的: current  

小技巧:tips  

图标: icon  

注释:note   

指南:guild 

服务:service  

热点:hot  

新闻:news   

下载:download  

投票:vote  

合作伙伴:partner   

友情链接:link  

版权:copyright

四. class的命名

 1. 颜色

使用颜色的名称或者16进制代码,如 .red { color: red; }; .f60 { color: #f60; }; .ff8600 { color: #ff8600; }

2. 字体大小

直接使用’font+字体大小’作为名称,如 .font12px { font-size: 12px; }; .font9pt {font-size: 9pt; }

3. 对齐样式

使用对齐目标的英文名称,如 .left { float:left; }; .bottom { float:bottom; }

4. 标题栏样式

使用’类别+功能’的方式命名,如 .barnews { }; .barproduct { }

注意事项:

1. 一律小写;   

2. 尽量用英文;   

3. 不加中杠和下划线;   

4. 尽量不缩写,除非一看就明白的单词,主要的: 

母版块:master.css  

模块:module.css  

基本共用:base.css   

布局,版面:layout.css  

主题:themes.css  

专栏:columns.css   

文字:font.css  

表单:forms.css  

补丁:mend.css  

打印:print.css

转载于:https://www.cnblogs.com/shuishuowobushihuiyuan/p/3690268.html

你可能感兴趣的文章
nltk-比较英文文档相似度-完整实例
查看>>
【转载】条款29: 避免返回内部数据的句柄
查看>>
图解Struts,Hibernate工作原理-备忘
查看>>
菜菜鸟Zend Framework 2 不完全学习涂鸦(十一)-- Zend 框架工具(ZFT...
查看>>
redis使用小结
查看>>
Spring boot+VUE+websocket 实现消息推送
查看>>
oracle 性能优化 03_闩锁及33等待事件
查看>>
xml 序列化操作
查看>>
用jQuery实现WordPress侧边上下滚动导航条效果
查看>>
APACHE 支持.htaccess 并对其配置
查看>>
要不要听听小白学习Linux经验小谈
查看>>
Eclipse构建Maven项目
查看>>
可以在onCreate或者onResume中start Animation吗?
查看>>
Cocos2dx 搓牌效果
查看>>
java 密码扩展无限制权限策略文件
查看>>
python的virtualenv和pip
查看>>
Sublime Text 3 安装 Package Control
查看>>
DoModal 函数的用法
查看>>
Java 持有对象简要笔记
查看>>
http协议
查看>>