buju

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
#t1 {
padding-top: 100px;
padding-left: 50px;
width: 1500px;
height: 700px;
background-image: url(bg.jpg);
}

#yi {
float: left;
width: 800px;
height: 700px;
}

#er {
float: left;
width: 500px;
height: 700px;
}

span {
color: aliceblue;
font-size: 40px;
}
span:hover{
font-size: 60px;
color: aqua;
}
#xz{
font-size: 25px; color: aliceblue;
padding-top: 25px;
-webkit-transition: -webkit-transform 2s;
}
#xz:hover{
-webkit-transform: rotate(360deg);
}
#jb{
width: 270px;
height: 10px;
padding-top: 100px;
}
#jb2:hover{
width: 270px;
height: 10px;
padding-top: 100px;
background: url(001.png);
}
#er2:hover{
-webkit-transform: rotate(45deg);
}

</style>
</head>

<body>
<div id="t1">
<div id="yi">
<span><b>Blue App </b>Template</span></span><br />

<div id="xz">One page Responsive HTML5 parallax <br />business landing page</div>

<div style="color: aliceblue; padding-top: 25px; ">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Similique autem,<br />
atque in voluptatibus repellat nostrum iusto
architecto vel placeat <br /> numquam omnis assumenda.</div>

<div id="jb">
<img src="003.png " id="jb2" />
</div>

</div>
<div id="er ">
<img src="phone.png " id="er2" />
</div>
</body>
</html>

猜你喜欢