不考虑低版本浏览器，可以尝试使用 grid。grid 的兼容情况可以参考
代码修改如下：
body {
background-color: #BBFFFF;
max-width: 85%;
margin: 0 auto;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1;
grid-row: 1;
}
.two {
grid-column: 2;
grid-row: 1;
}
.three {
grid-row: 2;
grid-column: 1;
}
.four {
grid-column: 2;
grid-row: 2;
}
ul {
list-style: none;
}
li {
/* float: left; */
font: 14px/10px Arial, Verdana, sans-serif;
color: #FFF;
background-color: #CCCC00;
width: 80px;
height: 80px;
padding: 20px;
margin: 0 30px 0 0;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
box-shadow: 3px 3px 3px #666;
}
li#btn1 {
background-color: #FF9933;
/* position: absolute;
left: 40%;
top: 20%;
margin-top: -;
margin-left: -; */
}
li#btn2 {
background-color: #FF7799;
/* position: absolute;
left: 55%;
top: 20%;
margin-top: -;
margin-left: -; */
}
li#btn3 {
background-color: #33FF66;
/* position: absolute;
left: 40%;
top: 45%;
margin-top: -;
margin-left: -; */
}
li#btn4 {
background-color: #D15FEE;
/* position: absolute;
left: 55%;
top: 45%;
margin-top: -;
margin-left: -; */
}
li a {
color: #FFF;
text-decoration: none;
display: block;
width: 80px;
height: 45px;
text-align: center;
padding: 35px 0 0 0;
margin: 0 40px 0 0;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
font-size: 14px;
font-weight: bold;
-o-text-shadow: 1px 1px 0px #333333;
-ms-text-shadow: 1px 1px 0px #333333;
-webkit-text-shadow: 1px 1px 0px #333333;
text-shadow: 1px 1px 0px #333333
}
li#btn1 a {
background-color: #FF6600;
-o-box-shadow: 1px 10px 5px #B04600 inset;
-ms-box-shadow: 1px 10px 5px #B04600 inset;
-webkit-box-shadow: 1px 10px 5px #B04600 inset;
box-shadow: 1px 10px 5px #B04600 inset
}
li#btn2 a {
background-color: #FF3366;
-o-box-shadow: 1px 10px 5px #AA002B inset;
-ms-box-shadow: 1px 10px 5px #AA002B inset;
-webkit-box-shadow: 1px 10px 5px #AA002B inset;
box-shadow: 1px 10px 5px #AA002B inset
}
li#btn4 a {
background-color: #9400D3;
-o-box-shadow: 1px 10px 5px #B04600 inset;
-ms-box-shadow: 1px 10px 5px #B04600 inset;
-webkit-box-shadow: 1px 10px 5px #B04600 inset;
box-shadow: 1px 10px 5px #B04600 inset
}
li#btn3 a {
background-color: #009900;
-o-box-shadow: 1px 10px 5px #005B00 inset;
-ms-box-shadow: 1px 10px 5px #005B00 inset;
-webkit-box-shadow: 1px 10px 5px #005B00 inset;
box-shadow: 1px 10px 5px #005B00 inset
}
li a:hover,
li a:focus,
li a:active {
width: 120px;
height: 65px;
padding: 55px 0 0 0;
margin: -20px 0 0 -20px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
}
li a:hover,
li a:focus,
li a:active {
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
}
扫一扫
6018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
