麻烦老师帮忙看下
来源：2-17 自由编程
ToExpress
2020-12-25 21:55:12
# 具体遇到的问题
感觉写的东西在网页上显示多了个边框
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.big {
height: 792px;
background: #07CBC9;
margin: 0 auto;
overflow: hidden;
}
.all {
width: 25%;
height: 396px;
float: left;
overflow: hidden;
}
.spans {
display: block;
font-size: 24px;
font-weight: bold;
color: white;
margin: 20px 20px 0;
}
.one2 button {
background-color: black;
width: 138px;
height: 40px;
margin: 20px;
margin-left: 130px;
color: white;
border: none;
overflow: hidden;
}
.all .one {
color: white;
font-size: 16px;
margin: 30px 20px 0px;
overflow: hidden;
display: block;
}
.all button {
display: block;
margin: 30px auto;
background-color: black;
width: 138px;
height: 40px;
color: white;
border: none;
overflow: hidden;
}
.all .p1 {
width: 90%;
margin-left: 40px;
color: gray;
margin: 20px 20px 0;
}
.big .all::before {
content: "";
display: block;
width: 0;
height: 0;
border: 20px solid transparent;
position: absolute;
top: 50%;
margin-top:-198px;
}
.big .before::before {
border-right-color: #07cbc9;
margin-left: -40px;
}
.big .after::before {
border-left-color: #07cbc9;
top: 100%;
margin-top:-198px;
margin-left:375px;
}
</style>
</head>
<body>
<div class="big">
<div class="one all">
<img src="/Study/作业素材/images/b1.jpg">
</div>
<div class="one2 all before">
<span class="spans">Library</span>
<p>
<span class="one">Ipsum is simply dummy text of the printing
and typesetting industry</span></p>
<p class="p1">Lorem Ipsum has been the industry's standard
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="one3 all">
<img src="/Study/作业素材/images/b2.jpg">
</div>
<div class="one4 all before">
<span class="spans">Library</span>
<p>
<span class="one">Ipsum is simply dummy text of the printing
and typesetting industry</span></p>
<p class="p1">Lorem Ipsum has been the industry's standard
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="one5 all after">
<span class="spans">Library</span>
<p>
<span class="one">Ipsum is simply dummy text of the printing
and typesetting industry</span></p>
<p class="p1">Lorem Ipsum has been the industry's standard
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="one6 all">
<img src="/Study/作业素材/images/b3.jpg">
</div>
<div class="one7 all after">
<span class="spans">Library</span>
<p>
<span class="one">Ipsum is simply dummy text of the printing
and typesetting industry</span></p>
<p class="p1">Lorem Ipsum has been the industry's standard
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="one8 all">
<img src="/Study/作业素材/images/b4.jpg">
</div>
</div>
</body>
</html>
代码，可通过选择【代码语言】突出显示
1回答
-
好帮手慕久久
2020-12-26
同学你好，代码中有如下问题:
1、body等元素有默认的margin或padding样式：
建议使用通配符选择器，去掉所有元素默认的边距样式，如下：
2、全屏时，图片没有填充满父元素：
原因是图片默认会按照原始大小来显示，不会按照父元素的大小来显示。
建议给图片设置宽高为100%，这样图片就会与父元素一样大了，如下：
3、小三角形，只需要加在图片区或文字区，即总共只有4个三角形。同学的三角形是通过.big .all::before这个样式来实现的，这样会造成8组内容都有三角形。
建议将三角形，设置在.before和.after元素上，如下：
4、优化建议：
图片的路径，建议改成./开头，如下：
“/”开头的路径比较特殊，当使用服务器打开页面时（利用vscode编辑器的liver server插件打开页面），该路径才有效:
所以建议将“/”换成“./“（直接写“Study/作业素材/images/b4.jpg”也行），这样的路径更通用。
5、优化建议：每组图文上的类名.one~.one8是多余的，可以去除：
祝学习愉快！
0h020-12-27
相似问题