<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.boss {
margin-left: 10%;
}
.div-head {
width: 1200px;
height: 100px;
background-color: pink;
float: left;
}
.div-logo {
width: 50px;
height: 35px;
background-color: rgb(110, 136, 17);
text-align: center;
float: left;
margin-top: 24px;
margin-left: 20px;
color: white;
padding-top: 15px;
}
.div-logo:hover {
transform: scale(2);
color: rgb(230, 70, 70);
}
.ul-01 {
list-style-type: none;
margin-right: 50px;
}
.ul-01>li {
float: right;
color: white;
font-size: larger;
font-weight: bolder;
margin: 20px 5px;
margin-left: 40px;
}
.li-01 {
display: inline-block;
}
.li-01:hover .div-more {
display: block;
}
.div-more {
display: none;
background-color: rgb(184, 233, 93);
color: black;
}
.ul-more {
list-style-type: none;
margin-right: 30px;
height: 200px;
}
.ul-more>li {
font-size: small;
color: white;
}
.ul-more>li:hover {
background-color: rgb(60, 207, 226);
}
.ul-01>li:hover {
color: white;
}
.div-mid {
width: 1200px;
clear: both;
border-top: 30px solid transparent;
}
.div-md01 {
width: 200px;
height: 500px;
background-color: aquamarine;
float: left;
}
.div-md0101 {
width: 120px;
height: 50px;
background-color: rgb(235, 235, 197);
margin-top: 20px;
margin-left: 35px;
}
.div-md0101:hover {
transform: scale(1.5);
background-color: rgb(205, 241, 151);
}
.div-md02 {
width: 970px;
height: 500px;
background-color: rgb(163, 224, 171);
float: right;
}
.div-md0201 {
background-color: rgba(241, 209, 239, 0.8);
width: 200px;
height: 200px;
margin: 20px;
margin-left: 200px;
float: left;
-webkit-animation: move 2s;
-webkit-animation-iteration-count: 1;
}
.div-md0201:hover {
transform: rotate(45deg);
background-color: rgb(174, 245, 245);
}
/* .div-md0202 {
background-color: rgb(245, 197, 242);
width: 100px;
height: 100px;
margin: 20px;
margin-left: 100px;
float: left;
z-index: 0;
-webkit-animation: move2 2s;
-webkit-animation-iteration-count: 1;
}
*/
@keyframes move {
0% {
transform: rotate(72deg);
background-color: chartreuse;
}
25% {
transform: rotate(172deg);
background-color: rgb(71, 131, 11);
}
50% {
transform: rotate(272deg);
background-color: rgb(35, 65, 5);
}
75% {
transform: rotate(372deg);
background-color: rgb(29, 54, 4);
}
100% {
transform: rotate(472deg);
background-color: rgb(9, 17, 1);
}
}
@keyframes move2 {
0% {
transform: rotate(-72deg);
background-color: rgb(235, 234, 176);
}
25% {
transform: rotate(-172deg);
background-color: rgb(226, 177, 210);
}
50% {
transform: rotate(-272deg);
background-color: rgb(70, 175, 236);
}
75% {
transform: rotate(-372deg);
background-color: rgb(171, 226, 116);
}
100% {
transform: rotate(-472deg);
background-color: rgb(207, 235, 180);
}
}
.div-bottom {
clear: both;
background-color: rgb(175, 128, 128);
border-top: 30px solid white;
height: 100px;
width: 1200px;
}
</style>
</head>
<body>
<div class="boss">
<div class="div-head">
<div class="div-logo">LOGO</div>
<ul class="ul-01">
<li>首页</li>
<li>购物</li>
<li>充值</li>
<li>举报</li>
<li>登录</li>
<li class="li-01">更多
<div class="div-more">
<ul class="ul-more">
<li>原神</li>
<li>地下城</li>
<li>梦幻西游</li>
<li>英雄联盟</li>
<li>怪物猎人</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="div-mid">
<div class="div-md01">
<div class="div-md0101"></div>
<div class="div-md0101"></div>
<div class="div-md0101"></div>
<div class="div-md0101"></div>
<div class="div-md0101"></div>
<div class="div-md0101"></div>
<div class="div-md0101"></div>
</div>
<div class="div-md02">
<div class="div-md0201">
<div class="div-md0202"></div>
</div>
<div class="div-md0201">
<div class="div-md0202"></div>
</div>
<div class="div-md0201">
<div class="div-md0202"></div>
</div>
<div class="div-md0201">
<div class="div-md0202"></div>
</div>
</div>
</div>
<div class="div-bottom"></div>
</div>
</body>
</html>
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
