不知道为什么三角形显示不出来
来源：2-17 自由编程
Nasiba
2020-12-18 21:29:03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Career Bulider</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- heade区域 -->
<header>
<div class="hd">
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
<!-- banner区域 -->
<div class="banner">
<img class="banner-img" src="images/banner3.jpg" alt="">
<div class="mask"></div>
<form>
<input type="text" placeholder="your name">
<input type="text" placeholder="your phone">
<input type="email" placeholder="your email">
<textarea cols="40" rows="5" placeholder="Write Your Comment Here"></textarea><br>
<input type="submit" value="send message">
</form>
</div>
<!-- about区域 -->
<div class="section">
<div class="top">
<h1>ABOUT</h1>
<div class="line"></div>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="m1">
<div class="leftbox">
<h2>A WORD<br>ABOUT US</h2>
<div class="left-text">
<p class="p2">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
<p class="p3">EXPLORE</p>
</div>
</div>
<img src="images/bb3.jpg" alt="">
<div class="right">
<div class="right-top">
<p class="p4">70000</p>
<div class="line1"></div>
<p class="p5">Students</p>
</div>
<div class="right-bt">
<p class="p6">600</p>
<div class="line2"></div>
<p class="p7">Faculty</p>
</div>
</div>
</div>
</div>
<main>
<div class="img">
<img src="images/b1.jpg" alt="" >
</div>
<div class="text left">
<h3>Library</h3>
<p class="p1">Lorem Ipsum is simply 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>
<span>EXLORE</span>
</div>
<div class="img">
<img src="images/b2.jpg" alt="" >
</div>
<div class="text left">
<h3>Library</h3>
<p class="p1">Lorem Ipsum is simply 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>
<span>EXLORE</span>
</div>
<div class="text right">
<h3>Library</h3>
<p class="p1">Lorem Ipsum is simply 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>
<span>EXLORE</span>
</div>
<div class="img">
<img src="images/b3.jpg" alt="" >
</div>
<div class="text right">
<h3>Library</h3>
<p class="p1">Lorem Ipsum is simply 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>
<span>EXLORE</span>
</div>
<div class="img">
<img src="images/b4.jpg" alt="" >
</div>
</main>
<!-- gallery区域 -->
<div class="gallery">
<div class="upper">
<h3>Gallery</h3>
<div class="line"></div>
<p class="p1">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</br> when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
<!-- 下部分是gallery详细信息区 -->
<div class="lower">
<dl>
<dt><img src="images/03-01.jpg" alt="" ></dt>
<dd>Science Lab</dd>
</dl>
<dl>
<dt><img src="images/03-02.jpg" alt="" ></dt>
<dd>Indoor Stadium</dd>
</dl>
<dl>
<dt><img src="images/03-03.jpg" alt="" ></dt>
<dd>Transportation</dd>
</dl>
<dl>
<dt><img src="images/03-04.jpg" alt="" ></dt>
<dd>Kids Room</dd>
</dl>
<dl>
<dt><img src="images/03-05.jpg" alt="" ></dt>
<dd>Meditation Classes</dd>
</dl>
<dl>
<dt><img src="images/03-06.jpg" alt="" ></dt>
<dd>Kids Play Ground</dd>
</dl>
</div>
</div>
<!-- fotter区域 -->
<footer>
<p>© 2016 imooc.com 京IC备13046642号</p>
</footer>
</body>
*{
margin: 0;
padding: 0;
}
ul
,li{
list-style: none;
}
a{
text-decoration: none;
}
/* header */
header{
width: 100%;
height: 80px;
background-color: #07cbc9;
}
header .hd{
width: 1200px;
height: 80px;
margin: 0 auto;
}
header .hd .logo{
float: left;
height: 48px;
margin-top: 16px;
margin-bottom: 16px;
}
header .hd nav{
float: right;
}
header .hd nav ul li{
float: left;
margin-left: 20px;
font-size: 16px;
line-height: 80px;
color: #ffffff;
text-align: center;
}
.banner{
position: relative;
width: 100%;
height: 600px;
}
.banner .banner-img{
width: 100%;
height: 600px;
}
.banner .mask{
position: absolute;
width: 100%;
height: 600px;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
.banner form{
position: absolute;
left: 50%;
width: 504px;
margin-left: -252px;
text-align: center;
top: 100px;
}
.banner form input{
border: 1px solid #808080;
margin-top: 20px;
color: #808080;
width: 502px;
height: 40px;
background: none;
}
.banner form input:last-child{
width: 200px;
height: 40px;
}
.banner form textarea{
width: 502px;
height: 110px;
background: none;
color: #808080;
margin-top: 20px;
}
.section{
width: 1201px;
height: 1201px;
margin: 0 auto;
}
.section .top{
font-size: 32px;
text-align: center;
}
.section .line{
width: 60px;
height: 3px;
background: #07cbc9;
margin: 10px auto;
}
.section .p1{
text-align: center;
color: gray;
font-size: 14px;
}
.section .m1{
width: 1201px;
height: 464px;
position: relative;
overflow: hidden;
}
.section .m1 .leftbox {
float: left;
}
.section .m1 .leftbox h2{
margin-top: 50px;
}
.section .m1 img{
width: 650px;
height: 435px;
position: absolute;
left: 50%;
margin-left: -325px;
z-index: -1;
margin-top: 30px;
}
.section .m1 .leftbox .left-text{
float: left;
width: 340px;
border: 1px solid gray;
position: absolute;
margin-top: 30px;
background: rgba(255, 255, 255, 0.5);
padding: 20px;
}
.section .m1 .leftbox .left-text .p2{
font-size: 18px;
width: 300px;
}
.section .m1 .leftbox .left-text .p3{
width: 140px;
height: 40px;
margin-top: 30px;
color:white;
background-color: black;
text-align: center;
line-height: 40px;
}
.section .m1 .right{
float: right;
}
.section .m1 .right .right-top{
width: 260px;
padding: 40px 0;
border: 1px solid #07cbc9;
margin-top: 30px;
margin-bottom: 30px;
margin-top: 30px;
}
.section .m1 .right .right-top .p4{
font-size: 28px;
font-weight: bold;
text-align: center;
}
.section .m1 .right .right-top .line1{
width: 60px;
height: 5px;
background: #07cbc9;
margin: 10px auto;
}
.section .m1 .right .right-top .p5{
font-size: 20px;
font-weight: normal;
text-align: center;
}
.section .m1 .right .right-bt{
width: 260px;
padding-top: 40px;
padding-bottom: 40px;
border: 1px solid #07cbc9;
margin-top: 30px;
}
.section .m1 .right .right-bt .p6{
font-size: 28px;
font-weight: bold;
text-align: center;
}
.section .m1 .right .right-bt .line2{
width: 60px;
height: 5px;
background: #07cbc9;
margin: 10px auto;
}
.section .m1 .right .right-bt .p7{
font-size: 20px;
font-weight: normal;
text-align: center;
}
main{
overflow: hidden;
background: #07cbc9;
}
main .img {
height: 380px;
float: left;
width: 25%;
overflow: hidden;
}
main .text{
height: 380px;
width: 25%;
float: left;
}
main .text ::before{
content: "";
display: block;
width:0;
height: 0;
border: 30px solid transparent;
position:absolute;
top:50%;
}
main .left::before{
border-left-color: #07cbc9;
right: -40px;
}
main .right::before{
border-right-color: #07cbc9;
left: -40px;
}
main .text h3 {
margin-top: 20px;
margin: 20px 20px 0 20px;
font-size: 24px;
color: #ffffff;
}
main .text .p1 {
margin-top: 30px;
margin: 20px 20px 0 20px;
font-size: 16px;
color: #ffffff;
}
main .text .p2 {
margin-top: 20px;
margin: 20px 20px 0 20px;
font-size: 14px;
color: gray;
}
main .text span {
margin: 30px auto;
display: block;
width: 138px;
height: 40px;
background: black;
color: white;
text-align: center;
line-height: 40px;
}
.gallery .upper{
font-size: 32px;
text-align: center;
}
.gallery .line{
width: 60px;
height: 3px;
background: #07cbc9;
margin: 10px auto;
}
.gallery .p1{
text-align: center;
color: gray;
font-size: 14px;
}
.gallery .lower{
width: 1200px;
height: 653px;
margin: 0 auto;
}
.gallery .lower dl{
float: left;
margin: 30px 20px 0 20px;
}
.gallery .lower dl img {
width: 360px;
height: 240px;
display: block;
}
.gallery .lower dl dd {
width: 360px;
height: 50px;
background: black;
line-height: 50px;
color: white;
text-indent: 20px;
}
footer{
width: 100%;
height: 80px;
background: #07cbc9;
}
footer p{
text-align: center;
line-height: 80px;
}
在这里输入代码，可通过选择【代码语言】突出显示
1回答
-
好帮手慕言
2020-12-19
同学你好，代码中存在以下问题：
1、类名与伪元素之间是没有空格的，如下：
2、元素的位置不对，建议：给类名为text 的元素设置相对定位，让小三角相对于.text元素定位，如下：
3、第一行的小三角朝向和位置不对，要修改一下，例如：
4、图片的宽度需要与其父级保持一致，如下：
5、第二排的小三角位置和朝向需要修改一下，例如：
祝学习愉快~
0
相似问题
回答 1
回答 1