常用的CSS命名规则 web标准化设计

网站建设 2023-01-28 20:49www.1681989.com免费网站

 (一)常用的CSS命名规则
  头header
  内容content/contaer
  尾footer
  导航nav
  侧栏sidebar
  栏目column
  页面外围控制整体布局宽度wrapper
  左右中left right center
  登录条logbar
  标志logo
  广告banner
  页面主体ma
  热点hot
  新闻news
  下载download
  子导航subnav
  菜单menu
  子菜单submenu
  搜索search
  友情链接friendlk
  页脚footer
  版权copyright
  滚动scroll
  内容content
  标签页tab
  文章列表list
  提示信息msg
  小技巧tips
  栏目标题title
  加入jous
  指南guild
  服务service
  注册regsiter
  状态status
  投票vote
  合作伙伴partner
  (二)注释的写法:
  / Footer /
  内容区
  / End Footer /
  (三)id的命名:
  (1)页面结构
  容器: contaer
  页头header
  内容content/contaer
  页面主体ma
  页尾footer
  导航nav
  侧栏sidebar
  栏目column
  页面外围控制整体布局宽度wrapper
  左右中left right center
  (2)导航
  导航nav
  主导航mabav
  子导航subnav
  顶导航nav
  边导航sidebar
  左导航leftsidebar
  右导航rightsidebar
  菜单menu
  子菜单submenu
  标题: title
  摘要: summary
  (3)功能
  标志logo
  广告banner
  登陆log
  登录条logbar
  注册regsiter
  搜索search
  功能区shop
  标题title
  加入jous
  状态status
  按钮btn
  滚动scroll
  标签页tab
  文章列表list
  提示信息msg
  当前的: current
  小技巧tips
  图标: icon
  注释note
  指南guild
  服务service
  热点hot
  新闻news
  下载download
  投票vote
  合作伙伴partner
  友情链接lk
  版权copyright
  (四)class的命名:
  (1)颜色:使用颜色的名称或者16进制代码,如
  .red { color: red; }
  .f60 { color: #f60; }
  .ff8600 { color: #ff8600; }
  (2)字体大小,直接使用"font+字体大小"作为名称,如
  .font12px { font-size: 12px; }
  .font9pt {font-size: 9pt; }
  (3)对齐样式,使用对齐目标的英文名称,如
  .left { float:left; }
  .bottom { float:bottom; }
  (4)标题栏样式,使用"类别+功能"的方式命名,如
  .barnews { }
  .barproduct { }
  注意事项::
  1.一律小写;
  2.尽量用英文;
  3.不加中杠和下划线;
  4.尽量不缩写,除非一看就明白的单词.
  主要的 master.css
  模块 module.css
  基本共用 base.css
  布局,版面 layout.css
  主题 themes.css
  专栏 columns.css
  文字 font.css
  表单 forms.css
  补丁 mend.css
  打印 prt.css

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by