命名规范
header 头部 menu菜单栏 banner导航栏 show显示
不能使用拼音 或汉语
不能使用数字开头命名
可以用下划线或横杠命名 ,一般用来拼两个名字
命名的两种方式
class类命名:指代一类用法
可以使用多个类命名
id命名
具有唯一性
企业命名规范
标题: title
摘要: summary
箭头: arrow
商标: label
网站标志: logo
转角/圆角: corner
横幅广告: banner
子菜单: subMenu
搜索: search
搜索框: searchBox
登录: login
登录条:loginbar
工具条: toolbar
下拉: drop
标签页: tab
当前的: current
列表: list
滚动: scroll
服务: service
提示信息: msg
热点:hot
新闻: news
小技巧: tips
下载: download
栏目标题: title
热点: hot
加入: joinus
注册: regsiter
指南: guide
友情链接: friendlink
状态: status
版权: copyright
按钮: btn
合作伙伴: partner
投票: vote
左/右/中:left/right/center
简介:profiles
评论:comment
ID命名
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
(3)功能
标志:logo
广告:banner
登陆:login
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权: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 { }
(5)图标库的引用
1.字体图标的颜色
i { color:#ddd; }
2.字体图标的大小
i { font-size:20px; }
3.字体图标的位置
i { transform-translateY(30%); }
标签嵌套遵循的规则
p dt h标签 里面不能嵌套块属性标签
a标签不能嵌套a标签
块级元素可以包含内联或某些块级标签
行内元素可以嵌套行内元素 特殊:a标签不能嵌套a标签
初级选择器
*通配符选择器 选择到所有的标签
标签选择器 选择到所对应的tag标签
类选择器 (class) 选择到.class所对应的类
id选择器 选择到id命名的元素
后代选择器 之间是空格 是选择到tag1里面的子元素tag2
div.p 是选择到是div标签 他的名字是p
标签要语义化
背景属性
background-image 背景图片 会覆盖背景颜色
background-repeat 背景平铺 background-repeat:repeat-x 水平方向平铺 repeat-y 垂直方向平铺
background-color 背景颜色
background-position 背景定位 方位值
x水平方向: left center right
%
px距离上边
y垂直方向: top bottom center
%距离左边
px
background-size 背景图片的大小 只给一个值 第二个会默认auto
x:px %
y: px contain 等比例缩放x轴和y轴 直到接触到边缘为止
背景图片综合写法 color image repeat position /size cover 按照盒子最大边等比例缩放
background-attachment:fixed
3人点赞
作者:吡啵吡啵萌萌哒
链接:https://www.jianshu.com/p/b610f9d707e9
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。