zoukankan      html  css  js  c++  java
  • 前端开发代码命名的整理

    转自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

  • 相关阅读:
    Nginx安装与运行配置总结
    不知道为什么随笔分类出不来
    springboot打war包
    python爬取网站页面时,部分标签无指定属性而报错
    python爬取某站新闻,并分析最近新闻关键词
    插了带蠕虫的U盘后,文件不见了怎么快速恢复
    CompTIA Security+ 常见知识点
    JAVA学习--集合的遍历
    JAVA学习--ArrayList使用方法:List的主要实现类
    JAVA学习--异常Exception的处理
  • 原文地址:https://www.cnblogs.com/shuishuowobushihuiyuan/p/3690268.html
Copyright © 2011-2022 走看看