请老师帮我批改一下作业
来源：4-10 自由编程
好学生慕小帅
2021-07-28 20:28:42
HTML代码：
<!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>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="a">
<div class="img"><img src="b1.jpg" alt=""></div>
<div class="content">
<h2>Library</h2>
<p class="p1">Lorem Ipsum is simoly dummy text of the printing and typesetting industry</p>
<p class="p2">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>
<button>EXPLORE</button>
</div>
<div class="img"><img src="b2.jpg" alt=""></div>
<div class="content" id="c">
<h2>Library</h2>
<p class="p1">Lorem Ipsum is simoly dummy text of the printing and typesetting industry</p>
<p class="p2">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>
<button>EXPLORE</button>
</div>
<div class="content">
<h2>Library</h2>
<p class="p1">Lorem Ipsum is simoly dummy text of the printing and typesetting industry</p>
<p class="p2">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>
<button>EXPLORE</button>
</div>
<div class="img"><img src="b3.jpg" alt=""></div>
<div class="content">
<h2>Library</h2>
<p class="p1">Lorem Ipsum is simoly dummy text of the printing and typesetting industry</p>
<p class="p2">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>
<button>EXPLORE</button>
</div>
<div class="img"><img src="b4.jpg" alt=""></div>
</div>
</body>
</html>
CSS代码：
*{
margin: 0;
padding: 0;
}
.a{
width: 100%;
}
.a div{
width: 25%;
float: left;
}
.a .img{
width: 25%;
height: 380px;
}
.a .img img{
width: 100%;
}
.a .content{
width: 25%;
height: 380px;
background: #07cbc9;
}
.a .content h2{
font-size: 24px;
margin-top: 20px;
margin-left: 20px;
color: white;
}
.a .content .p1{
margin-top: 30px;
margin-left: 20px;
font-size: 16px;
color: white;
}
.a .content .p2{
margin-top: 20px;
margin-left: 20px;
font-size: 14px;
color: gray;
margin-bottom: 30px;
}
.a .content button{
width: 138px;
height: 40px;
display:block;
margin: auto;
line-height: 40px;
background: #000;
color: white;
border: none;
}
1回答
-
同学你好，代码实现基本没问题，不过img图片的高度过高，超出外层盒子，在布局上多出一部分，如图
建议：可以给img图片的父盒子设置overflow:hidden属性，将超出部分隐藏，参考如下
祝学习愉快！
0
相似问题