第四课
主要学了一些图标跟超连接的结合如
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <link rel="stylesheet" href="lesson4_2.css"/> | |
| </head> | |
| <body> | |
| <!--利用行高 将标题 挤走--> | |
| <h1 class="test1_h1"> | |
| <a href="#" class="test1_a">豆瓣豆瓣办</a> | |
| </h1> | |
| <!--文字透明--> | |
| <h1 class="test2_h1"> | |
| <a href="#" class="test2_a">豆瓣豆瓣斑斑</a> | |
| </h1> | |
| <!--text-indent--> | |
| <h1 class="test3_h1"> | |
| <a href="#" class="test3_a">豆瓣豆瓣3</a> | |
| </h1> | |
| <a href="#" class="test4_a"> | |
| <h1 class="test4_h1"> | |
| <span></span> | |
| 豆瓣 | |
| </h1> | |
| </a> | |
| <div class="div1"></div> | |
| <!--CSS3特效--> | |
| <div class="div2"></div> | |
| <div class="div3"></div> | |
| <div class="div4"></div> | |
| <div class="div5"></div> | |
| </body> | |
| </html> |
超链接
.test1_h1{
width: 154px;
height: 30px;
background-image: url("../img/logo_db.png");
/*超出隐藏*/
overflow: hidden;
}
.test1_a{
height: 34px;
/*行内 变 块级*/
display: block;
line-height: 200px;
}
.test2_h1{
background-image: url("../img/logo_db.png");
width: 154px;
height: 30px;
}
.test2_a{
color: transparent;
}
.test3_h1{
background-image: url("../img/logo_db.png");
width: 154px;
height: 30px;
text-indent: -300px;
}
.test3_a{
display: block;
}
.test4_h1{
width: 51px;
height: 47px;
position: relative;
font-size: 12px;
}
.test4_h1 span{
background-image: url("../img/20150416H1049_53Uux_03.png");
position: absolute;
width: 100%;
height: 100%;
display: block;
}
/*雪碧图*/
.div1{
width: 180px;
height: 180px;
/*outline: 1px solid #000;*/
background-image: url("../img/sprite.jpg");
background-size: 1000px 729px;
}
.div1:hover{
width: 180px;
height: 180px;
/*outline: 1px solid #000;*/
background-image: url("../img/sprite.jpg");
background-size: 1000px 729px;
background-position: -280px 0;
cursor: pointer;
}
/*CSS特效*/
.div2{
width: 100px;
height: 100px;
background: red;
/*border-radius: 50%;*/
box-shadow: 5px 5px 10px #666;
}
.div3{
width: 500px;
height: 300px;
/*background: linear-gradient(red,yellow);*/
/*background: linear-gradient(to right,red,yellow);*/
/*background: linear-gradient(to bottom right,red,yellow);*/
/*background: linear-gradient(-20deg,red,yellow);*/
/*background: linear-gradient(-20deg,rgba(0,0,0,.5),rgba(255,255,0,.5));*/
/*background:radial-gradient(#000,burlywood,lightgrey);*/
}
.div4{
width: 300px;
height: 200px;
background: mediumpurple;
/*-webkit-transform: translate(45px 45px);*/
/*-webkit-transform: rotate(20deg);*/
/*-webkit-transform: scale(.5);*/
/*-webkit-transform: rotateY(10deg);*/
-webkit-transition:all .8s linear;
}
.div4:hover{
background: pink;
}
.div5{
width: 200px;
height: 200px;
background: mediumpurple;
-webkit-animation: fanencai 5s linear infinite;
}
@keyframes fanencai {
/*from{*/
/*width: 200px;*/
/*background: plum;*/
/*}to{*/
/*width: 500px;*/
/*background: #dddddd;*/
/*}*/
0%{
background: red;
}
20%{
background: orange;
}
40%{
background: yellow;
}
60%{
background: green;
}
80%{
background: blue;
}
100%{
background: plum;
}
}
