div+css3笔记

下列快捷输入在phpstrom、webstrom、subline等中使用。

1、快速写入文档类型

输入:!+tab。即可完成以下代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

2、快捷输入ul下多个li

例:输入5个li

快捷输入为:ul>li*5+tab。即可完成如下代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

 3、h1建议使用在logo图片处

理由:可以增加收索引擎的权重,网络爬虫会对该语句非常重视。

4、快捷输入多个div

.fahter+.son+tab即可直接生成

<div class="father"></div>
<div class="son"></div>

5、快捷输入width、height

w100px+tab即为width:100px;

h100px+tab即为height:100px;

6、after伪类清除浮动

.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容; 
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;
line-height: 0; <----行高为0;
height: 0; <----高度为0;
font-size:0; <----字体大小为0;
}
.clearfix { *zoom:1;} <----这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的 话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。
整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果。
之所以用它,是因为,你不必在html文件中写入大量无意义的空标签,又能清除浮动。

话说回来,你这段代码真是个累赘啊,这样写不利于维护。
只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了。
如:
<div class="head clearfix"></div>

你可能感兴趣的:(div+css3笔记)