CSS命名规范

阿玲玲啊
阿玲玲啊 发布于 6 天前 浏览:130 类型:转载 - 随笔 分类:HTML/CSS - html/css 二维码: 转载说明
<!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>
<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>
z
给个赞 1 人点赞
收藏 1 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
阿玲玲啊 阿玲玲啊 作者

作者最新