说一说你平时写代码遵守的编码规范
注意,html文件第一行先加
<Doctype HTML>
首先,html标签和css样式均用英文小写。
第二,命名用引号包裹。
第三,复合命名尽量用中横线-
来连接命名单词。
- 语义化标签优先:
-
对应文章的能用各个分类的标签尽量用标签。
例如:如果是图文混排的列表<div class="list"> <ul> <li> ![](xxx) <h3>标题</h3> <p>描述</p> </li> </ul>
- css样式命名:
- 基于内容的命名
具体模块命名尽量用内容命名。 - 基于表现的命名
通用调整类标签用表现命名,尽量少用。 - 基于功能的命名
某些交互功能,如:banner,movie;可用交互功能命名。
- css规范:
- tab用两个空格表示
- 声明后面加上分号
- 样式换行
- 颜色用小写,尽量用缩写。(疑问:以前在哪处看到过一篇文章:颜色用缩写会降低执行效率,并未测试。)
- 小数点前面尽量不写前缀;0不用加单位。
- 可以合并的样式尽量缩写。如:
margin:5px 10px;
垂直居中有几种实现方式,给出代码范例
-
利用
padding
添加上下边距<div class="demo">内容<br>内容</div> .demo{line-height:1.5;padding:20px 0;}
-
绝对定位居中(宽高固定)
<div class="dialog"> <h3>对话框标题</h3> <p>对话框内容</p> </div> .dialog{position:absolute; width:100px; height:100px; left:50%;right:50%; margin-left:-50px;margin-top:-50px;}
-
绝对定位居中(宽高不固定) ---注意兼容性问题
<div class="dialog"> <h3>对话框标题</h3> <p>对话框内容</p> </div> .dialog{position:absolute; transform:translate(-50%,-50%);}
行内元素垂直居中
vertical-align:middle
-
table-cell
实现垂直居中<div class="box">内容</div> .box{width:100px; height:100px;display:table-cell;vertical:middle;text-align:center;}