;title>CSS3 select</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
/* 访问之前的颜色*/
.a1:link {
color: yellow;
}
/* 访问之后的颜色 */
.a1:visited {
color: red;
}
/*鼠标划上去的颜色*/
.a1:hover{
color: pink;
}
/*鼠标点击时的颜色*/
.a1:active{
color: green;
}
/* 得到焦点*/
.a1:focus {
color: blue;
}
.nav {
width: 200px;
height: 500px;
border: 1px solid red;
position: relative;
}
.list {
display: none;
}
.item{
height: 40px;
background: orange;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 40px;
}
.item:nth-child(2){
background: skyblue;
}
.item:hover .list {
width: 225px;
height: 40px;
background: skyblue;
position: absolute;
left: 202px;
top: 0;
display: block;
}
</style>
</head>
<body>
<a class="a1" href="http://qq.com">tiaozhandaoQQ</a>
<div class="nav">
<div class="item">
1
<div class="list">
a
</div>
</div>
<div class="item">
2
<div class="list">
b
</div>
</div>
</div>
</body>
</html>
21. 阿里巴巴矢量字体图标
http://www.iconfont.cn
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- <link href="http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.css
" rel="stylesheet"> -->
<style>
@font-face {
font-family: 'iconfont'; /* project id 654997 */
src: url('http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.eot');
src: url('http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.eot?#iefix') format('http:embedded-opentype'),
url('http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.woff') format('woff'),
url('http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.ttf') format('truetype'),
url('http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont";
width: 16px;
height: 16px;
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="iconfont"></div>
</body>
</html>
22. 隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
* {
margin: 0;
padding: 0;
}
.box1, .box2 {
width: 150px;
height: 150px;
}
.box1 {
background: orange;
/*完全隐藏不占据空间 ，也可以用一个父类有高宽度的盒子占据空间*/
/*display: none;*/
/* 隐藏占据空间*/
visibility: hidden; /* 默认 visiable*/
}
.box2 {
background: blue;
}
</style>
</head>
<body