css命名规范
笔记链接:http://www.w3cfuns.com/blog-5445898-5398950.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS命名规范</title> <meta charset="UTF-8" /> <style> body{ margin:20 auto; padding:0; font-family:"宋体"; font-size:14px;} div{ margin:0 auto; overflow:hidden;} .container{ width:900px; background:#fafafa; border:2px dashed #09C; padding:10px;} h1{ text-align:center; background:#ededed; padding:5px 0px;} h4{ width:900px; height:18px; overflow:hidden;} p{ margin:0px; padding:0px 0px;} a{ width:169px; margin:2px 4px 2px 0px; padding:2px; line-height:24px; color: #333; text-decoration:none; float:left; border:1px dashed #ccc;} a:hover{ background:#090; color:#FFF;} </style> </head> <body> <div class="container"> <h1>CSS样式命名整理</h1> <h4>页面结构</h4> <p> <a href="#.">容器: container/wrap</a> <a href="#.">整体宽度:wrapper</a> <a href="#.">页头:header</a> <a href="#.">内容:content</a> <a href="#.">页面主体:main</a> <a href="#.">页尾:footer</a> <a href="#.">导航:nav</a> <a href="#.">侧栏:sidebar</a> <a href="#.">栏目:column</a> <a href="#.">中间内容:center</a> </p> <h4>导航</h4> <p> <a href="#.">导航:nav</a> <a href="#.">导航:mainbav/globalnav</a> <a href="#.">子导航:subnav</a> <a href="#.">顶导航:topnav</a> <a href="#.">边导航:sidebar</a> <a href="#.">左导航:leftsidebar</a> <a href="#.">右导航:rightsidebar</a> <a href="#.">边导航图标:sidebarIcon</a> <a href="#.">菜单:menu</a> <a href="#.">子菜单:submenu</a> <a href="#.">标题: title</a> </p> <h4>功能</h4> <p> <a href="#.">标志:logo</a> <a href="#.">登陆:login</a> <a href="#.">登录条:loginbar</a> <a href="#.">注册:regsiter</a> <a href="#.">产品:products</a> <a href="#.">产品价格:productsPrices</a> <a href="#.">产品评论:productsReview</a> <a href="#.">编辑评论:editor-review</a> <a href="#.">最新产品:news-release</a> <a href="#.">广告/标语:banner</a> <a href="#.">摘要:summary</a> <a href="#.">生产商:publisher</a> <a href="#.">缩略图:screenshot</a> <a href="#.">常见问题:faqs</a> <a href="#.">关键词:keyword</a> <a href="#.">博客:blog</a> <a href="#.">论坛:forum</a> <a href="#.">搜索:search</a> <a href="#.">搜索输入框:search-input</a> <a href="#.">搜索输出:search-output</a> <a href="#.">搜索结果:search-results</a> <a href="#.">加入我们:joinus</a> <a href="#.">状态:status</a> <a href="#.">按钮:btn</a> <a href="#.">滚动:scroll</a> <a href="#.">标签页:tab</a> <a href="#.">文章列表:list</a> <a href="#.">提示信息:msg/message</a> <a href="#.">当前的: current</a> <a href="#.">小技巧:tips</a> <a href="#.">皮肤:skin</a> <a href="#.">充值:pay</a> <a href="#.">活动:activities</a> <a href="#.">推广:promotion</a> <a href="#.">公告:announcement</a> <a href="#.">排行:ranking</a> <a href="#.">公司简介:companyProfile </a> <a href="#.">公司设备:equipment</a> <a href="#.">公司荣誉:glories</a> <a href="#.">企业文化:culture</a> <a href="#.">企业规模:scaleScale</a> <a href="#.">营销网络:salesNetwork</a> <a href="#.">组织机构:organization</a> <a href="#.">技术力量:technology</a> <a href="#.">分支机构:branches</a> <a href="#.">企业资质:EnterpriseQualification</a> <a href="#.">公司实力:strengthStrength</a> <a href="#.">经营理念:operationPrinciple</a> <a href="#.">经理致辞:manager_oration</a> <a href="#.">发展历程:developmentHistory</a> <a href="#.">工程案例:EngineeringProjects</a> <a href="#.">分类浏览:browseByCategory</a> <a href="#.">应用领域:applicationFields</a> <a href="#.">人力资源:humanResourceHr</a> <a href="#.">领导致辞: leader_oration</a> <a href="#.">客户留言:customerMessage</a> <a href="#.">客户服务:customerService</a> <a href="#.">您的要求:yourRequirements</a> <a href="#.">销售信息:salesInformation</a> <a href="#.">招商:EnterpriseEstablishing</a> <a href="#.">教育培训:EducationTraining</a> <a href="#.">在线交流:onlineCommunication</a> <a href="#.">质量认证:qualityCertification</a> <a href="#.">合作加盟:joinInCooperation</a> <a href="#.">产品描述:productsDescription</a> <a href="#.">业务范围:businessScope</a> <a href="#.">产品销售:salesSales</a> <a href="#.">联系我们:contactUs</a> <a href="#.">信息发布:Information</a> <a href="#.">返回首页:homepage</a> <a href="#.">产品定购:order</a> <a href="#.">电子商务:E-business</a> <a href="#.">版权所有:copy Right</a> <a href="#.">友情连结:hot Link</a> <a href="#.">行业新闻:tradeNews</a> <a href="#.">行业动态:trends</a> <a href="#.">邮编:postalCodeZipcode</a> <a href="#.">新闻动态:newsTrends</a> <a href="#.">公司名称:companyName</a> <a href="#.">销售热线:salesHot_Line</a> <a href="#.">联系人:contactPerson</a> <a href="#.">建设中:InConstruction</a> <a href="#.">证书:certificate</a> <a href="#.">地址:ADD/Add</a> <a href="#.">电话:TEL/Tel</a> <a href="#.">传真:FAX/Fax</a> <a href="#.">产品名称:productName</a> <a href="#.">产品说明:description</a> <a href="#.">价格:price</a> <a href="#.">品牌:brand</a> <a href="#.">规格:specification</a> <a href="#.">尺寸:size</a> <a href="#.">生产厂家:manufacuturer</a> <a href="#.">型号:model</a> <a href="#.">产品标号:Item No</a> <a href="#.">技术指标:techniqueData</a> <a href="#.">产品描述:description</a> <a href="#.">产地:productionPlace</a> <a href="#.">用途:application</a> <a href="#.">论坛:Forum</a> <a href="#.">在线订购:on_lineOrder</a> <a href="#.">招标:bidInviting</a> <a href="#.">综述:general</a> <a href="#.">业绩:achievements</a> <a href="#.">大事:greatEvent</a> <a href="#.">动态:trends</a> <a href="#.">服务:service</a> <a href="#.">投资:Investment</a> <a href="#.">行业:Industry</a> <a href="#.">规划:programming</a> <a href="#.">环境:environment</a> <a href="#.">发送:delivery</a> <a href="#.">提交:submit</a> <a href="#.">重写:reset</a> <a href="#.">社区:community</a> <a href="#.">业务:business</a> <a href="#.">在线调查:onlineInquiry</a> <a href="#.">下载中心:download</a> <a href="#.">意见反馈:feedback</a> <a href="#.">常见问题:FAQ</a> <a href="#.">中心概况:generalProfile</a> <a href="#.">游乐园:amusementPark </a> <a href="#.">专题报道:specialReport</a> <a href="#.">图标: icon</a> <a href="#.">注释:note</a> <a href="#.">指南:guild</a> <a href="#.">服务:service</a> <a href="#.">热点:hot</a> <a href="#.">新闻:news</a> <a href="#.">下载:download</a> <a href="#.">投票:vote</a> <a href="#.">商 标:label/branding</a> <a href="#.">当前位置:breadcrumb/loc</a> <a href="#.">购物车:shop</a> <a href="#.">标签:tag</a> <a href="#.">信誉:siteinfo-credits</a> <a href="#.">网站信息:siteinfo</a> <a href="#.">法律声明:siteinfo-legal</a> <a href="#.">合作伙伴:partner</a> <a href="#.">友情链接:friendlink</a> <a href="#.">版权:copyright</a> </p> </div> </body> </html>