DIV+CSS 命名规范

    技术2025-11-09  11

    1.CSS ID 的命名 外 套:  wrap 主导航:  mainnav 子导航:  subnav 页 脚:  footet 整个页面: content 页 眉:  header 页 脚:  footer 商 标:  label 标 题:  title 主导航:  mainbav(globalnav) 顶导航:  topnav 边导航:  sidebar 左导航:  leftsidebar 右导航:  rightsidebar 旗 志:  logo 标 语:  banner 菜单内容1: menu1 content 菜单容量: menu container 子菜单:  submenu 边导航图标:sidebarIcon 注释:   note 面包屑:  breadcrumb(即页面所处位置导航提示) 容器:   container 内容:   content 搜索:   search 登陆:   Login 功能区:  shop(如购物车,收银台) 当前的   current 2.另外在编辑样式表时可用的注释可这样写: <-- Footer --> 内容区 <-- End Footer --> 3.样式文件命名 主要的 master.css 布局,版面 layout.css 专栏 columns.css 文字 font.css 打印样式 print.css 主题 themes.css 注:来源于“烟儿圈教程网” css命名: 页头:header 登录条:loginbar 标志:logo 侧栏:sidebar 广告:banner 导航:nav 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 滚动:scroll 页面主体:main 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guild 服务:service 热点:hot 新闻:news 下载:download 注册:regsiter 状态:status 按钮:btn 投票:vote 合作伙伴:partner 友情链接:friendlink 页脚:footer 版权:copyright 3.样式文件命名 基本的 base.css 主要的 master.css 布局,版面 layout.css 局部 part.css 专栏 columns.css 文字 font.css 打印样式 print.css 主题 themes.css 4.缩写命名 左浮 fl = float:left; 右浮 fr = float:right; 清楚浮动 clear = clear:both; 左对齐 tl = text-align:left; 右对齐 tri = text-align:right; 居中   tc = text-align:center; 宽度  w1(width) = 1px……..w1000 = 1000px 高度  h1(height) = 1px……..h1000 = 1000px 清楚边框  bd_n = border:none!important; 加粗     fw_b = font-weight:bold; 清楚加粗 fw_n = font-weight:normal; 隐藏块   dp_n = disipay:none; 显示块   dp_b = disipay:block; 清楚背景色 bg_n = background:none; 外边距(上右下左) m_05 = margin:5px; 外边距(上下左右) m_0510 = margin:5px 10px; 外边距(上左右下) m_051007 = margin:5px 10px 7px; 外边距(上)       mt_10 = margin-top:10px; 外边距(右)       mr_10 = margin-right:10px; 外边距(下)       mb_10 = margin-bottom:10px; 外边距(左)       ml_10 = margin-left:10px; 内边距(上右下左) p_05 = padding:5px; 内边距(上下左右) p_0510 = padding:5px 10px; 内边距(上左右下) p_051007 = padding:5px 10px 7px; 内边距(上)       pt_10 = padding-top:10px; 内边距(右)       pr_10 = padding-right:10px; 内边距(下)       pb_10 = padding-bottom:10px; 内边距(左)       pl_10 = padding-left:10px; 如:<div class="fl h100">www.hemin.cn</div>//适合做大型网站重复调用样式 5.颜色命名 黑色 black = #000 白色 white = #FFF 灰色 gray  = #999   #666   #333 红色 gules = #F00 黄色 yellow= #FF0 蓝色 blue  = #00F 绿色 green = #0F0 青色 cyan  = #0FF 紫色 purple= #F0F 缩写 #F0F = #FF00FF 如:<div><a href="#">hm</a><a class="gules" href="#">hemin</a></div> 皆可

     

    http://xiaozmn.javaeye.com/category/31298?show_full=true

    最新回复(0)