纯html+css写首页

最新推荐文章于 2024-05-18 23:52:07 发布

听说名字长键盘敲得更响

最新推荐文章于 2024-05-18 23:52:07 发布

阅读量176

点赞数

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/weixin_54656536/article/details/131912426

版权

<!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;
}