布局
*{
margin: 0;
padding: 0;
}
.quan{
width: 100%;
height: 2000px;
background: black url("../ima/bg.jpg") no-repeat;
}
.zhuo{
margin-top: 90px;
width: 60%;
height: 1000px;
float: left;
}
.you{
margin-top: 90px;
width: 30%;
height: 1000px;
float: right;
}
.tou{
width: 100px;
height: 80px;
margin: 60px 150px;
font-size: 50px;
color: white;
transition: all 1s ease;
}
.tou:hover {
transform: scale(1.5);
color: yellow;
}
.z1{
width: 100px;
height: 80px;
margin: 60px 150px;
font-size: 50px;
color: white;
transition: all 1s ease;
}
.z1:hover {
transform: rotate(360deg);
}
.z2{
width: 200px;
height: 200px;
margin: 60px 150px;
font-size: 30px;
color: white;
}
.wei{
width: 270px;
height: 60px;
margin: 60px auto;
background: black url("../ima/003.png") no-repeat;
transition: all 1s ease;
}
.wei:hover{
background: black url("../ima/001.png") no-repeat;
}
.tu{
width: 60%;
margin: 20px auto;
transition: all 1s ease;
}
.tu:hover{
transform: skew(-25deg);
}
@media screen and (max-width: 1100px) {
.zhuo{
width: 100%;
margin: 0 auto;
float: none;
}
.you{
width: 100%;
margin: 0 auto;
float: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
</head>
<body>
<!--布局-->
<div class="quan">
<div class="zhuo">
<!--布局-->
<div class="tou">BlueAppTemplate</div>
<div class="z1">OnepageResponsiveHTML5parallax businesslandingpage</div>
<div class="z2">Loremipsumdolorsitamet,consecteturadipisicingelit.Similiqueautem,
atqueinvoluptatibusrepellatnostrumiustoarchitectovelplaceat
numquamomnisassumenda.</div>
<div class="wei"></div>
<!--布局-->
</div>
<!--布局-->
<div class="you">
<div class="tu"><img src="ima/phone.png"></div>
</div>
</div>
</body>
</html>
