Html5+CSS3命名规范(前端web开发命名规范,符合SEO规范)
任何代码编程都有各自特点的常用命名规范,div+css页面设计也不例外。遵守常用的css命名规范有利于代码的升级和扩展,也有利于让别人读懂你的css代码,让你的页面显得清晰有条理。
css文件名命名规范
-
模块:module.css
-
基本共用:base.css
-
布局、版面:layout.css
-
主题:themes.css
-
专栏:columns.css
-
文字:font.css
-
表单:forms.css
-
补丁:mend.css
-
打印:print.css
页面结构元素div命名规范
-
头: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
页面结构
-
容器: container
-
页头:header
-
内容:content/container
-
页面主体:main
-
页尾:footer
-
导航:nav
-
侧栏:sidebar
-
栏目:column
页面外围控制整体布局宽度:wrapper 左右中:left right center
颜色命名-使用颜色的名称或者16进制代码
.red {color: red;}
.f60 {color: #f60;}
.ff8600 {color: #ff8600;}
字体大小命名-直接使用“font+字体大小”作为名称
.font12px {font-size: 12px;}
.font9pt {font-size: 9pt;}
对齐样式命名-使用对齐目标的英文名称
.left {float:left;}
.bottom {float:bottom;}
标题栏样式命名-使用“类别+功能”的方式命名
.barnews { }
.barproduct { }
注释书写规范
1.行间注释-直接写于属性值后面,如:
.search{
border:1px solid #fff;/*定义搜索输入框边框*/
background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/
}
2.整段注释-分别在开始及结束地方加入注释,如:
/*=====搜索条=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索条结束=====*/
注意事项:
1、一律小写;
2、尽量用英文;
3、尽量不缩写,除非一看就明白的单词;
4、属性的值一定要用双引号(“”)括起来,且一定要有值如class="divcss5",id="divcss5";
5、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整。
大家在日常的页面设计中要逐步养成规范命名的好习惯。
相关文章
- HTML5 Canvas指纹及反追踪介绍
- HTML5文件上传qq、百度、taobao等比较(改进支持三种状态提示)
- 数百个HTML5例子学习HT图形组件 – 3D建模篇
- 【酷炫烟花特效表白(Html5+CSS3+JS,带背景音乐哦!)】
- 【京东网站主界面仿写——使用Html5+CSS3+JavaScript等实现(附源代码和效果),挺炫的喔~~~】
- 15个前卫的 HTML5 & CSS3 网页设计作品
- JSCapture – 基于 HTML5 实现的屏幕捕捉库
- CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】
- Web 前沿——HTML5 Form Data 对象的使用
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
- Html5响应式设计与实现广场
- HTML5读取本地文件
- HTML5上传图片并预览
- 【Web安全】HTML5安全
- 基于html5背景图片自适应代码
- 基于HTML5/CSS3可折叠的3D立方体动画
- html5和css3打造一款创意404页面
- 前端面试题总结:HTML5,JS,CSS3,兼容性。