<!doctype html>
.top_info {
width: 100%;
height: 600px;
position: relative;
}
.top_info:after {
background-color: #2aae67;
content: ‘’;
width: 160%;
height: 650px;
position: absolute;
left: -30%;
top: 0;
z-index: -1;
border-radius: 0 0 50% 50%;
}
.top_info .top-text {
height: 130px;
width: 620px;
margin-top: 40px;
margin-right: auto;
margin-left: auto;
font-size: 0.87em;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #f2f2f2;
line-height: 32px;
color: #f2f2f2;
padding-top: 18px;
text-align: justify;
}
.top_info .round_div_all {
height: 120px;
width: 700px;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
display: -webkit-flex;/* 定义内部为弹性布局 /
display: flex; / 定义内部为弹性布局 /
flex-wrap: wrap; / 让弹性盒元素在需要的时候拆列 /
justify-content: space-around; / (横轴)方向上均匀排列每个元素 /
}
.mian01 {
width: 850px;
margin-top: 40px;
margin-right: auto;
margin-left: auto;
padding-top: 40px;
padding-bottom: 40px;
overflow: hidden; / 防止塌陷 /
display: -webkit-flex;/ 定义内部为弹性布局 /
display: flex; / 定义内部为弹性布局 /
flex-wrap: wrap; / 让弹性盒元素在需要的时候拆列 /
justify-content: space-around; / (横轴)方向上均匀排列每个元素 /
}
.square_div {
float: left;
height: 160px;
width: 180px;
margin-top: 30px;
border-radius: 6px;
background-color: #ffffff;
box-shadow: 0px 0px 5px 5px rgba(152,152,152,0.07);/ 设置一个阴影 颜色 透明度 /
cursor: pointer; / 鼠标在此处的效果为“小手”样式 */
margin-right: auto;
margin-left: auto;
}
}
@media (max-width: 600px){ /*响应式 <=600的设备使用如下css样式表 */
.top_info {
width: 100%;
height: 750px;
background-color: #2aae67;
border-bottom-left-radius: 60% 15%;
border-bottom-right-radius: 60% 15%;
}
.top_info .top-text {
height: 130px;
width: 80%;
margin-top: 40px;
margin-right: auto;
margin-left: auto;
font-size: 0.87em;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #f2f2f2;
line-height: 32px;
color: #f2f2f2;
padding-top: 18px;
text-align: justify;
}
.top_info .round_div_all {
width: 80%;
margin-right: auto;
margin-left: auto;
padding-top: 40px;
display: -webkit-flex;/* 定义内部为弹性布局 /
display: flex; / 定义内部为弹性布局 /
flex-wrap: wrap; / 让弹性盒元素在需要的时候拆列 /
justify-content: space-around; / (横轴)方向上均匀排列每个元素 /
}
.mian01 {
width: 90%;
margin-right: auto;
margin-left: auto;
text-align:center;
padding-top: 40px;
padding-bottom: 40px;
overflow: hidden; / 防止塌陷 /
display: -webkit-flex;/ 定义内部为弹性布局 /
display: flex; / 定义内部为弹性布局 /
flex-wrap: wrap; / 让弹性盒元素在需要的时候拆列 /
justify-content: space-around; / (横轴)方向上均匀排列每个元素 /
}
.square_div {
float: left;
height: 142px;
width: 160px;
margin-top: 30px;
border-radius: 6px;
background-color: #ffffff;
box-shadow: 0px 0px 5px 5px rgba(152,152,152,0.07);/ 设置一个阴影 颜色 透明度 /
cursor: pointer; / 鼠标在此处的效果为“小手”样式 */
margin-right: auto;
margin-left: auto;
}
}
.top_info .login {
height: 22px;
width: 45px;
margin-top: 1%;
float: left;
margin-left: 91%;
font-size: 0.9em;
letter-spacing:3px;
}
.top_info .logo {
height: 64px;
width: 200px;
margin-right: auto;
margin-left: auto;
padding-top: 120px;
}
.top_info .logo img:hover {
opacity : 0.8;
}
.top_info .round_div_all .round_div {
float: left;
height: 110px;
width: 110px;
margin-top: 30px;
border-radius: 50%;
background-color: #39b472;
cursor: pointer; /* 鼠标在此处的效果为“小手”样式 */
margin-left: 25px;
margin-right: 25px;
}
.top_info .round_div_all .round_div:hover {
background-color: #4aba7e;
transition-duration: 0.3s;/* 缩放的过渡时间 */
}
.top_info .round_div_all .round_div .r-s01 {
height: 40px;
width: 40px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
}
.top_info .round_div_all .round_div .r-s02 {
height: 25px;
width: 90px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
color: #f2f2f2;
text-align: center;
}
.square_div:hover {
-webkit-transform:scale(1.11,1.11);
-moz-transform:scale(1.11,1.11);
-transform:scale(1.11,1.11);
transition-duration: 0.5s;/* 缩放的过渡时间 */
}
.square_div .s-s01 {
height: 43px;
width: 43px;
margin-top: 38px;
margin-right: auto;
margin-left: auto;
}
.square_div .s-s02 {
height: 25px;
width: 120px;
margin-top: 18px;
margin-right: auto;
margin-left: auto;
font-size: 0.9em;
color: #1a1a1a;
text-align: center;
}
.down {
background-color: #ffffff;
text-align: center;
height: 50px;
width: 100%;
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
}
.f82 {
font-size: 0.82px;
color: #4c4c4c;
line-height: 28px;
letter-spacing:1px;
}
.f75 {
font-size: 0.75px;
color: #a0a2a0;
line-height: 30px;
letter-spacing:1px;
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: none;
color: #ececec;
}
a:active {
text-decoration: none;
}
.banquan {
height: 36px;
width: 1000px;
margin-right: auto;
margin-left: auto;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #f2f2f2;
background-image: url(https://i-blog.csdnimg.cn/blog_migrate/08b158273620e356359c11dc6ae6dfae.png);
background-color: #FFF;
}
![](https://i-blog.csdnimg.cn/blog_migrate/9a8cb52f7393577c57baa028b4e6acd1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4fc169f01cea411ffd5f9fa23291474f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a2154f77b45dfc6668da941211dedec6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/206a5d3337cccd2bcf61baf67d3acf2f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/67f7b02efcb79b90676928ec3e52cae8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e3a4b6d808d35a59d5ff792792f10b2e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9fe50cffa909ea60e44e58010ab08d76.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c6731fe67fdaa44873af47b40a2d7573.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c8be1fdb348cb49e22049ddf03a2a482.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4115b4620a70708cadb5883a91279b71.png)
![](https://i-blog.csdnimg.cn/blog_migrate/56ad4537d4ee2f6fc53ad3e816585782.png)
![](https://i-blog.csdnimg.cn/blog_migrate/08623067a281724707d34868883ae9ca.png)