DIV+CSS 命名规范 .
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> 皆可