zoukankan      html  css  js  c++  java
  • 命名的整理

    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

  • 相关阅读:
    poj 2942 Knights of the Round Table(无向图的双连通分量+二分图判定)
    Java序列化的几种方式
    Android 四大组件学习之Service六
    cursor:pointer的意思
    JSP中<base href="<%=basePath%>">的作用
    一篇让Java程序猿随时可以翻看的Oracle总结
    史上最全的javascript知识点总结,浅显易懂。
    史上最全的HTML、CSS知识点总结,浅显易懂。
    css学习归纳总结
    Web前端开发Chrome插件
  • 原文地址:https://www.cnblogs.com/sosore/p/5326347.html
Copyright © 2011-2022 走看看