编码规范
- 命名技巧
-
语义化
- 语义化标签优先
- 基于功能命名、基于内容命名、基于表现命名
- 简略、明了、无后患
-
命名范例
- 所有命名都使用英文小写
- 命名用引号包裹
- 用中横线链接
- 命名体现功能，不涉及表现样式（颜色、字体、边框、背景等）
命名 场景 .wrap 或 .wrapper 用于外侧包裹 .container 或 .ct 包裹容器 .header 用于头部 .body 页面body .footer 页面尾部 aside、sidebar 用于侧边栏 .content 和header、footer 对应，用于主要内容 .navigation 导航元素 .pagination 分页 .tab > .tab tab切换 .breadcrumbs 导航列表、面包屑 .article 文章 .main 用于主体 .thumbnail 头像，小图像 .media 媒体资源 .panel 面板 .tooltip 鼠标放置上去的提示 .popup 鼠标点击弹出的提示 .button、.btn 按钮 .ad 广告 .subnav 二级导航 .menu 菜单 .tag 标签 .message 或 .notice 提示消息 .summary 摘要 .logo logo .search 搜索框 .login 登录 .register 注册 .username 用户名 .password 密码 .banner 广告条 .copyright 版权 .modal 和 .dialog 弹窗
-
CSS规范
- 书写规范
-
tab用两个空格表示 - css的
:后加个空格，{前加个空格 - 每条声明后都加上分号
- 换行，不要放到一行
- 颜色用小写，用缩写
#fff - 小数不用写前缀，
0.5s->.5s，0不用加单位 - 尽量缩写，
margin: 5px 10px 5px 10px;->margin: 5px 10px;
-
实现垂直居中的多种方法
-
table自带功能
<table> <tr> <td> 我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中 </td> </tr> </table> - 100%高度的 after before 加上 inline-block
- div模拟table
- margin-top: -50%;
- translate -50%
- absolute margin auto
- flex
