笔记链接：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>