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

评论 抢沙发

评论前必须登录!