DIV 清除浮动--CSS 伪元素-- 阴影---鼠标事件

整理css的使用：

一、1. CSS 伪元素 

http://www.w3school.com.cn/css/css_pseudo_elements.asp

     2.  清除浮动

很多网站是在div包裹层定义

div:before，div:after{
content:"";
display:table;
}
div:after{
clear:both
}

实际使用，定义一个清除浮动的样式

div.clearfix:before,
div.clearfix:after {
content: " ";
display: table;
}
div.clearfix:after {
clear: both;
}
div.clearfix {
overflow: visible;
}
div.clearfix  XXX {
float: left;
}

==用于清除浮动的div

<div class="clearfix">
<div class="XXX"></div>
<div class="XXX"></div>
<div class="XXX"></div>
</div>

二 在HTML中以上a:link a:visited a:hover a:active

这几个设置的是超链接样式
a:link        链接未点击上去时候

a:visited   链接已经点击过的

a:hover    鼠标放在链接上未点击

a:active    是介于hover visited 之间的一个状态,可以说是链接被按下时候的状态

尝试如下样式可理解

a:link,
a:visited {
color: #333;
text-decoration: none;
}
a:hover {
color: #c00;
text-decoration: none;
}
h1 a:link,
h1 a:visited,
h2 a:link,
h2 a:visited,
h3 a:link,
h3 a:visited {
color: #333;
}
h1 a:hover,
.h2 a:hover,
h3 a:hover {
color: #c00;
}
a:focus {
outline: none;
}
a.f-blue:link,
a.f-blue:visited {
color: #2981a9;
text-decoration: none;
}
a.f-blue:visited {
color: #025d87;
text-decoration: none;
}
a.f-undline:link,
a.f-undline:visited {
text-decoration: underline;
}
a.f-undline:visited {
text-decoration: underline;
}

三  与上类似 当input被聚焦时 改变border颜色

input:focus,
textarea:focus {
border-color: #9cf;
box-shadow: none;
}

四 给元素增加阴影

box-shadow: 0px 3px 2px red;

box-shadow: 0px(向右) 3px(向下) 2px(四周扩大) red(阴影颜色);