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(阴影颜色);