麻烦老师再帮看看这样可以吗？谢谢！
来源：2-10 作业题
慕UI4313976
2020-02-20 14:37:52
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
/* reset */
*{margin:0;padding:0;}
img{display: block;}
.float-fix:after{
content: "";
visibility: hidden;
clear: both;
display: block;
height: 0;
}
/* about */
.about{
width: 100%;
height: 800px;
}
/* title */
.about .title{
width: 600px;
margin: 0 auto;
text-align: center;
}
.about .title .title-top{
font-size: 50px;
font-weight: bolder;
}
.about .title-line{
width: 40px;
margin: 0 auto;
}
.about .title-line hr{
width: 40px;
height: 2px;
background-color: #07cbc9;
border: none;
margin: 20px 0;
}
/* content */
.about .content{
/* width: 1200px; */
width: 1140px;
margin: 0 auto;
position: relative;
}
.about .content .content-1,
.about .content .content-2,
.about .content .content-3{
float: left;
/* margin: 15px 15px; */
margin: 15px 0;
}
.about .content .content-1{
font-size: 40px;
font-weight: bold;
}
.about .content .content-3 .up,
.about .content .content-3 .down{
width: 200px;
height: 100px;
border: 1px solid #07cbc9;
/* margin: 15px 15px; */
margin: 15px 0;
text-align: center;
}
.about .content .content-3 .up .up-1,
.about .content .content-3 .down .down-1{
font-size: 25px;
padding-top: 25px;
}
.about .content .content-3 .up .up-2,
.about .content .content-3 .down .down-2{
margin: 0 auto;
width: 40px;
height: 1px;
background-color: #07cbc9;
border: none;
}
.about .content .content-3 .up .up-3,
.about .content .content-3 .down .down-3{
font-size: 20px;
}
.content-float{
position: absolute;
width: 370px;
top: 132px;
/* left: 30px; */
}
.about .content-3 .content-3{
float: right;
}
.content-float .content-layer{
position: absolute;
width: 370px;
height: 246px;
background: rgb(129, 129, 129);
opacity: 0.7;
}
.content-float .content{
width: 370px;
height: 246px;
}
.content-float .content p{
padding:15px
}
.content-float button{
width: 102px;
height: 45px;
border: none;
background: #000;
color: #ffffff;
margin-top: 25px;
margin-left: 15px;
}
/* bottom */
.bottom{
width: 100%;
}
.box1,.box2,.box3,.box4,
.box5,.box6,.box7,.box8{
float: left;
width: 25%;
min-height: 396px;
background-color: #07cbc9;
position: relative;
}
.box1 img,.box3 img,.box6 img,.box8 img{
width: 100%;
height: 396px;
}
.box2-2,.box4-4{
width: 0;
height: 0;
border-style: solid;
border-width: 40px;
border-color: transparent #07cbc9 transparent transparent;
position: absolute;
left:-80px;
top:158px;
}
.box5-5,.box7-7{
width: 0;
height: 0;
border-style: solid;
border-width: 40px;
border-color: transparent transparent transparent #07cbc9;
position: absolute;
/* left:-80px; */
top:158px;
right: -80px;
z-index: 1;
}
</style>
</head>
<body>
<div class="about">
<div class="title">
<div class="title-top">ABOUT</div>
<div class="title-line"><hr></div>
<div class="title-content">
lorem Ipsum simply dummy text of the printing and typesetting industry.lorem Ipsum has been the inddust's standard dummy text ever since the 1500s.
</div>
</div>
<div class="content float-fix">
<div class="content-1">
<p>A WORD</p>
<p>ABOUT US</p>
</div>
<div class="content-2">
<img src="images/bb3.jpg" alt="">
</div>
<div class="content-3">
<div class="up">
<div class="up-1">70000</div>
<div class="up-2"></div>
<div class="up-3">Students</div>
</div>
<div class="down">
<div class="down-1">600</div>
<div class="down-2"></div>
<div class="down-3">Faculity</div>
</div>
</div>
<div class="content-float">
<div class="content-layer"></div>
<div class="content">
<p>
Prasesnt dignissim viverra set sed bibendum ligula conggue non.Sed ac nislet felis gravida commdod?Suspendisseegtullamcprper ipsum.Suspendisse diam amet
</p>
<button>EXPLEOR</button>
</div>
</div>
</div>
<div class="bottom">
<div class="box1"><img src="images/b1.jpg" alt=""></div>
<div class="box2">
<div class="box2-2"></div>
</div>
<div class="box3"><img src="images/b2.jpg" alt=""></div>
<div class="box4">
<div class="box4-4"></div>
</div>
<div class="box5">
<div class="box5-5"></div>
</div>
<div class="box6"><img src="images/b3.jpg" alt=""></div>
<div class="box7">
<div class="box7-7"></div>
</div>
<div class="box8"><img src="images/b4.jpg" alt=""></div>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，整体布局以及效果是可以的。
还有优化的地方：
右侧间距太大，content盒子没有撑满，可以给右侧content-3盒子设置右浮动
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题