博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Div+CSS命名规范(前端web开发命名规范)
阅读量:5999 次
发布时间:2019-06-20

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

hot3.png

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://my.oschina.net/leipeng/blog/215563

你可能感兴趣的文章
Android判断网络连接状态
查看>>
leetcode_1033. Moving Stones Until Consecutive
查看>>
logback logback.xml常用配置详解(二)<appender>
查看>>
js常用的函数库
查看>>
Sqlserver 数据库安全
查看>>
netstat命令简单使用
查看>>
Python标示符命名规则
查看>>
SSL certificate problem unable to get local issuer certificate解决办法
查看>>
20145209 刘一阳 《网络对抗》实验四:恶意代码分析
查看>>
个人学期总结
查看>>
CodeForces 985E Pencils and Boxes
查看>>
为什么Elasticsearch查询变得这么慢了?
查看>>
Cetos 中添加bbr服务
查看>>
win7_64位操作系统安装python3.6.3遇到的问题和解决方法
查看>>
html5笔记
查看>>
WPF操作邮箱,发送邮件
查看>>
Error copying image in the datastore: Not allowed to copy image file
查看>>
kvm在线磁盘扩展
查看>>
libvirt-adabddad
查看>>
apache的配置及检查
查看>>