老师请检查
<!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>
*{
margin: 0;
padding: 0;
}
div.box{
width: 100%;
height: 760px;
}
.box .box1,.box3,.box6,.box8{
width: 25%;
height: 380px;
float: left;
}
.box img{
height: 380px;
width: 100%;
}
.box .box2,.box4,.box5,.box7{
background-color: rgb(0, 226, 215);
width: 25%;
height: 380px;
float: left;
color: white;
}
.text1{
font-size: 24px;
font-weight: bold;
color: white;
margin-top: 20px;
margin-left: 20px;
}
.text2{
margin-top: 30px;
margin-left: 20px;
font-size: 16px;
}
.text3{
margin-top: 20px;
margin-left: 20px;
font-size: 14px;
color: gray;
margin-right: 20px;
}
.button{
width: 138px;
height: 40px;
background-color: black;
color: white;
font-size: 16px;
line-height: 40px;
text-align: center;
display: block;
margin: 0 auto;
margin-top: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<img src="images/b1.jpg" alt="图片1">
</div>
<div class="box2">
<p class="text1"> Library</p>
<p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="text3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="button"><button>EXPLORE</button></div>
</div>
<div class="box3">
<img src="images/b2.jpg" alt="图片2">
</div>
<div class="box4">
<p class="text1"> Library</p>
<p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="text3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="button"><button>EXPLORE</button></div>
</div>
<div class="box5">
<p class="text1"> Library</p>
<p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="text3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="button"><button>EXPLORE</button></div>
</div>
<div class="box6">
<img src="images/b3.jpg" alt="图片3">
</div>
<div class="box7">
<p class="text1"> Library</p>
<p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="text3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="button"><button>EXPLORE</button></div>
</div>
<div class="box8">
<img src="images/b4.jpg" alt="图片4">
</div>
</div>
</body>
</html>
相关截图：
相关截图：
相关截图：
相关截图：
相关截图：
搜索
复制
正在回答
同学你好，同学的结构写的很清晰，的确按照任务要求还原了作业，老师先赞一个~。
优化建议：
1、按钮样式。如下图：
优化方案，如下：
其他的按钮，同学尝试用这个方法自己试试看。
2、 margin建议用缩写的形式，如下：
作业中还有类似可以优化的地方哦~，同学可以自己尝试优化一下哈~
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星