要求:
1.用html和css实现上图整体布局效果
2.当鼠标悬停在时,其字体变为原来的1.2倍,同时字体颜色发生变化。
3.当鼠标悬停在时,其字体旋转360度。
4.当鼠标移动到时,其图标渐变为(由之前的透明变为白底黑字),当鼠标再次移出时图标渐变为原来的样子。
5.当鼠标移动到“手机图片”上时,手机图片顺时针倾斜25度。
6.当尺寸调到PAD或更小尺寸时,右边的手机图片移动到下边
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>周考1练习</title>
<link rel="stylesheet" href="css/zhoukao1.css">
</head>
<body>
<div>
<div class="divleft">
<div id="d1">Blue App Template</div>
<div id="d2">
<p>One page Responsive HTML5 parallax </p>
<p>business landing page</p>
</div>
<div id="d3">
<p> consectetur adipisicing elit. Similique autem,</p>
<p> atque in voluptatibus repellat nostrum iusto architecto vel placeat</p>
<p> numquam omnis assumenda.</p>
</div>
<div id="d4"></div>
</div>
<div class="phone">
<img src="img/phone.png">
</div>
</div>
</body>
</html>
Css文件:
@charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
}
body{
background-image:url(../img/bg.jpg);
}
.divleft{
width:700px;
height:700px;
float:left;
}
.phone{
float: right;
width: 400px;
margin-top: 258px;
}
.phone:hover{
transform: rotate(25deg);
}
#d1{
width:500px;
height:40px;
text-align:center;
margin-top:100px;
font-weight:900px;
font-size:36px;
color:#FFF;
}
#d1:hover{
transform:scale(1,2);
color:#F00;
}
#d2{
margin-top:100px;
width:500px;
height:40px;
font-size:18px;
color:#FFF;
margin-left:80px;
}
#d2:hover{
transform:rotate(180deg);
}
#d3{
width:600px;
height:40px;
font-size:18px;
margin-top:50px;
margin-left:80px;
color:#FFF;
}
#d4{
width:280px;
margin-left:80px;
height:70px;
margin-top:100px;
background-image:url(../img/003.png);
}
#d4:hover{
background-image:url(../img/001.png);
}