史上最全CSS命名规则总结及公用常见的CSS前端整理小知识

CSS命名规则

头部：header
		(分别三层head-top、head-cont、head-down)
标志：logo
导航：nav
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
电话：tele
登陆：login
　　	登录条：loginbar
注册：regsiter

中间主要内容：main
页面外围控制整体布局宽度：wrapper
轮播（广告）：banner
　　	顶导航：topnav
　　	边导航：sidebar
　　	左导航：leftsidebar
右导航：rightsidebar
文章列表：list
栏目标题：title
栏目：sidebar
指南：guild
服务：service
热点：hot
新闻：news
下载：download
标签页：tab
状态：status
按钮：btn
投票：vote
合作伙伴：partner
摘要: summary
功能区：shop
图标: icon
注释：note
加入：joinus
状态：status
　	滚动：scroll
提示信息：msg
　		当前的: current

底部：footer(分两层或三层foot-top、foot-cont、foot-down)
友情链接：friendlink
版权：copyright
容器: container

css常用类

.pa { position: absolute; }
.pr { position: relative; }
.pf { position: fixed; }
.fl { float: left; }
.fr { float: right; }
.ofh { overflow: hidden; }
.left { text-align: left;}
.right { text-align: right; }
.center { text-align: center; }
.block { display: block!important; }
.inline { display: inline-block!important; }
.none{ display: none!Important;}
清除浮动
.clear{ clear:both；}
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;font-size:0；}
.clearfix { *zoom:1;}
居中：content
.content{width: 100%;margin:0 auto;max-width:1200px；}
上下左右padding和margin快捷标识
.ml20{ margin-left: 20px; }
.mr20{ margin-right: 20px; }
.mt20{ margin-top: 20px; }
.mb20{ margin-bottom: 20px; }
.mlr20{ margin: 0 20px; }
.pt20{ padding-top: 20px; }
.pb20{ padding-bottom: 20px; }
.pl20{ padding-left: 20px; }
.pr20{ padding-right: 20px; }
plr20{ padding: 0 20px; }
字体颜色快捷标识
.red{ color:red; }
.blue{ color:blue; }
.c666{ color:#666; }
.cff8d00{ color:#ff8d00; }
背景颜色标识
.bg-blue { background: #blue; }
.bg-yellow { background: #ff8d00; }
边框颜色标识
.bd-ddd{ border:1px solid #ddd; }
.bd-blue{ border:1px solid blue; }

注释：

命名：用“_”隔开！规则须统一，页面代码整洁有序。

七牛云、阿里云和腾讯云云存储基础环境搭建教程