命名规则

  • 简单来说完全可以使用 Java 或 C 语言的规范,可以使用连字符"-"链接单词增强辨识度,不要用汉字

常见 class 关键词

  • 布局类:header, footer, container, main, content, aside, page, section
  • 包裹类:wrap, inner
  • 区块类:region, block, box
  • 结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
  • 列表类:list, item, field
  • 主次类:primary, secondary, sub, minor
  • 大小类:s, m, l, xl, large, small
  • 状态类:active, current, checked, hover, fail, success, warn, error, on, off
  • 导航类:nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
  • 交互类:tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay
  • 星级类:rate, star
  • 分割类:group, seperate, divider
  • 等分类:full, half, third, quarter
  • 表格类:table, tr, td, cell, row
  • 图片类:img, thumbnail, original, album, gallery
  • 语言类:cn, en
  • 论坛类:forum, bbs, topic, post
  • 方向类:up, down, left, right
  • 其他语义类:btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…

页面结构

  • 容器: container/wrap
  • 整体宽度:wrapper
  • 页头:header
  • 内容:content
  • 页面主体:main
  • 页尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 中间内容:center

导航

  • 导航:nav
  • 导航:mainnav/globalnav
  • 子导航:subnav
  • 顶导航:topnav
  • 边导航:sidebar
  • 左导航:leftsidebar
  • 右导航:rightsidebar
  • 边导航图标:sidebarIcon
  • 菜单:menu
  • 子菜单:submenu
  • 标题:title

功能

  • 标志:logo
  • 登录:login
  • 登录条:loginbar
  • 注册:register
  • 产品:products
  • 产品价格:productsPrices
  • 产品评论:productsReview
  • 编辑评论:editor-review
  • 最新产品:news-release
  • 广告/标语:banner
  • 摘要:summary
  • 生产商:publisher
  • 缩略图:screenshot
  • 常见问题:faqs
  • 关键词:keyword
  • 博客:blog
  • 论坛:forum
  • 搜索:search
  • 搜索输入框:search-input
  • 搜索输出:search-output
  • 搜索结果:search-results
  • 加入我们:joinus
  • 状态:status
  • 按钮:btn
  • 滚动:scroll
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg/message
  • 当前的:current
  • 小技巧:tips
  • 皮肤:skin
  • 充值:pay
  • 活动:activities
  • 推广:promotion
  • 公告:announcement
  • 排行:ranking
  • 公司简介:companyProfile
  • 公司设备:equipment
  • 公司荣誉:glories
  • 企业文化:culture
  • 企业规模:scaleScale
  • 营销网络:salesNetwork
  • 组织机构:organization
  • 技术力量:technology
  • 分支机构:branches
  • 企业资质:EnterpriseQualification
  • 公司实力:strengthStrength
  • 经营理念:operationPrinciple
  • 经理致辞:manager_oration
  • 发展历程:developmentHistory
  • 工程案例:EngineeringProjects
  • 分类浏览:browseByCategory
  • 应用领域:applicationFields
  • 人力资源:humanResourceHr
  • 领导致辞: leader_oration
  • 客户留言:customerMessage
  • 客户服务:customerService
  • 您的要求:yourRequirements
  • 销售信息:salesInformation
  • 招商:EnterpriseEstablishing
  • 教育培训:EducationTraining
  • 在线交流:onlineCommunication
  • 质量认证:qualityCertification
  • 合作加盟:joinInCooperation
  • 产品描述:productsDescription
  • 业务范围:businessScope
  • 产品销售:salesSales
  • 联系我们:contactUs
  • 信息发布:Information
  • 返回首页:homepage
  • 产品定购:order
  • 电子商务:E-business
  • 版权所有:copy Right
  • 友情连结:hot Link
  • 行业新闻:tradeNews
  • 行业动态:trends
  • 邮编:postalCodeZipcode
  • 新闻动态:newsTrends
  • 公司名称:companyName
  • 销售热线:salesHot_Line
  • 联系人:contactPerson
  • 建设中:InConstruction
  • 证书:certificate
  • 地址:ADD/Add
  • 电话:TEL/Tel
  • 传真:FAX/Fax
  • 产品名称:productName
  • 产品说明:description
  • 价格:price
  • 品牌:brand
  • 规格:specification
  • 尺寸:size
  • 生产厂家:manufacturer
  • 型号:model
  • 产品标号:Item No
  • 技术指标:techniqueData
  • 产品描述:description
  • 产地:productionPlace
  • 用途:application
  • 论坛:Forum
  • 在线订购:on_lineOrder
  • 招标:bidInviting
  • 综述:general
  • 业绩:achievements
  • 大事:greatEvent
  • 动态:trends
  • 服务:service
  • 投资:Investment
  • 行业:Industry
  • 规划:programming
  • 环境:environment
  • 发送:delivery
  • 提交:submit
  • 重写:reset
  • 社区:community
  • 业务:business
  • 在线调查:onlineInquiry
  • 下载中心:download
  • 意见反馈:feedback
  • 常见问题:FAQ
  • 中心概况:generalProfile
  • 游乐园:amusementPark
  • 专题报道:specialReport
  • 图标:icon
  • 注释:note
  • 指南:guild
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 投票:vote
  • 商 标:label/branding
  • 当前位置:breadcrumb/loc
  • 购物车:shop
  • 标签:tag
  • 信誉:siteinfo-credits
  • 网站信息:siteinfo
  • 法律声明:siteinfo-legal
  • 合作伙伴:partner
  • 友情链接:friendlink
  • 版权:copyright