阶段一 · 边框与圆角，三角形一直不显示 ，是什么问题
<!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>Career Builder</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
.header{
height: 80px;
background-color: #07cbc9;
margin-top: 20px;
}
.header .nav-main{
width: 1200px;
height: 80px;
margin: 20px auto;
}
.header .nav-main .logo-pic h1{
height: 48px;
float:left;
margin-top: 16px;
margin-bottom: 16px;
color: white;
/* font-size: 30px; */
line-height: 48px;
}
.header .nav-main .nav{
width: 600px;
height: 80px;
float: right;
}
.header .nav-main .nav ul li a{
display: block;
width: 80px;
height: 80px;
margin-right: 16px;
float:left;
color: white;
font-size: 20px;
line-height: 80px;
}
.main-con {
width: 100%;
height: 600px;
position: relative;
}
.main-con .mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
}
.banner {
width: 100%;
height: 600px;
margin: 0 auto;
}
.main-con .login {
width: 508px;
height: 370px;
position: absolute;
top: 50%;
margin-top: -200px;
left: 50%;
margin-left: -202px;
font-size: 20px;
}
.main-con .login .cur {
width: 504px;
height: 40px;
margin-bottom: 20px;
background: none;
line-height: 40px;
}
.main-con .login textarea {
background: none;
height: 110px;
width: 504px;
margin-bottom: 20px;
font-size: 20px;
line-height: 110px;
}
.main-con .login button {
display: block;
background: none;
width: 200px;
height: 40px;
margin: 0 auto;
color: #808080;
}
.about .top-about h2 {
text-align: center;
font-size: 32px;
margin-top: 30px;
}
.about .top-about .blue {
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.about .top-about p {
text-align: center;
color: gray;
font-size: 14px;
}
.middle-content {
width: 1201px;
height: 470px;
/* border: 1px solid #000; */
margin: 0 auto;
position: relative;
}
.middle-content .img {
width: 650px;
height: 435px;
margin-top: 30px;
left: 50%;
margin-left: -325px;
position: absolute;
}
.middle-content .lef {
width: 340px;
height: 465px;
float: left;
left: 0;
position: relative;
}
.middle-content .lef h3 {
margin-top: 40px;
font-size: 30px;
}
.middle-content .lef .lef-words {
width: 300px;
height: 180px;
padding: 20px;
font-size: 18px;
border: 1px solid gray;
background: rgb(255, 255, 255, 0.5);
top: 50%;
margin-top: -90px;
position: absolute;
}
.middle-content .lef .lef-words span {
display: block;
width: 140px;
height: 40px;
border: 1px solid #000;
background-color: #000;
color: white;
font-size: 20px;
margin: 20px;
text-align: center;
line-height: 40px;
}
.middle-content .rig {
width: 260px;
position: absolute;
float: right;
right: 0px;
margin: 30px 0 30px 20px;
}
.middle-content .rig .rig-div {
width: 260px;
height: 180px;
border: 1px solid #07cbc9;
margin-bottom: 30px;
}
.middle-content .rig .rig-div .blue {
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.middle-content .rig .rig-div span {
font-size: 28px;
font-weight: bold;
text-align: center;
display: block;
margin-top: 40px;
}
.middle-content .rig .rig-div span.rig-font {
font-size: 18px;
font-weight: normal;
margin-top: 0;
}
.big-div {
width: 100%;
height: 760px;
position: relative;
}
.img-div {
float: left;
width: 25%;
height: 380px;
}
.img-div img {
display: block;
height: 380px;
width: 100%;
}
.words-div {
width: 25%;
height: 380px;
background-color: #07cbc9;
float: left;
}
.big-div .words-div::before {
content: '';
position: absolute;
width: 0px;
height: 0px;
border: 20px solid transparent;
border-right-color: #07cbc9;
top: 50%;
margin-top: -20px;
left: -40px;
z-index: 999;
}
.words-div h3 {
font-size: 24px;
color: white;
font-weight: bold;
margin: 20px auto 30px 20px;
}
.words-div .p1 {
font-size: 16px;
margin-bottom: 20px;
color: white;
margin: 30px 20px 20px 20px;
}
.words-div .p2 {
font-size: 14px;
color: gray;
margin: 30px 20px 20px 20px;
}
.words-div .p3 {
text-align: center;
height: 40px;
line-height: 40px;
width: 138px;
/* margin-top: 30px; */
font-size: 24px;
font-weight: bold;
background-color: #000;
color: white;
margin:30px auto;
}
.big-graphics{
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.big-graphics .graphics .title {
font-weight: bold;
text-align: center;
font-size: 32px;
margin: 30px auto;
}
.big-graphics .graphics .blue {
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 30px auto;
}
.big-graphics .graphics .info{
text-align: center;
color: gray;
font-size: 14px;
display: block;
width: 600px;
margin: 0 auto;
height: 90px;
line-height: 30px;
}
.big-graphics .gallery li{
float:left;
}
.big-graphics .gallery .galpic{
width: 360px;
height: 240px;
margin-right: 40px;
margin-top: 20px;
}
.big-graphics .gallery .galword{
background-color: #000;
color: white;
width:340px;
height: 50px;
font-size: 20px;
padding-left: 20px;
padding-top: 10px;
}
.footer{
width: 100%;
background-color: #07cbc9;
height: 80px;
}
.footer p {
text-align: center;
line-height: 80px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<!-- logo -->
<div class="nav-main">
<div class="logo-pic">
<h1>Career Builder</h1>
</div>
<!-- 导航区域 -->
<div class="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">FACULTY</a></li>
<li><a href="">EVENTS</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
</div>
<div class="main-con">
<div class="mask">
</div>
<img class="banner" src="images/banner3.jpg" alt="">
<form action="" method="post">
<div class="login">
<input class="cur" type="text" placeholder="your name">
<input class="cur" type="text" placeholder="your phone">
<input class="cur" type="email" placeholder="your email">
<textarea class="text-cur" cols="30" rows="10" placeholder="write your comment here"></textarea>
<button type="submit">SEND MESSAGE</button>
</div>
</form>
</div>
<div class="about">
<div class="top-about">
<h2>ABOUT</h2>
<div class="blue"></div>
<p>Lorem Ipsum is simpiy dummy text ofthe printing and typrdrtting<br> industry.Lorem Ipsum has been the
industry's standard dummy<br>
text ever the 1500s</p>
</div>
<div class="middle-content">
<div class="img">
<img src="images/bb3.jpg" alt="">
</div>
<div class="lef">
<h3>A WORD <br />ABOUT US</h3>
<div class="lef-words">
<p>Praesent dignissim viverra est, sed bibendum ligula congue non.Sed<br> ac nisl et felis grvida
commodo?<br>
Suspendisse eget ullamcorper<br>
ipsum.Suspendisse diam amet.
<span>EXPLORE</span>
</div>
</div>
<div class="rig">
<div class="rig-div">
<span> 700000 </span>
<div class="blue"></div>
<span class="rig-font">Students</span>
</div>
<div class="rig-div">
<span>600 </span>
<div class="blue"> </div>
<span class="rig-font">Facutly</span>
</div>
</div>
</div>
</div>
<div class="big-div">
<div class="img-div">
<img src="images/b1.jpg" alt="">
</div>
<div class="words-div lf-bd">
<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>
<p class="p3">EXPLORE</p>
</div>
<div class="img-div">
<img src="images/b2.jpg" alt="">
</div>
<div class="words-div lf-bd">
<h3>Computer Lab</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>
<p class="p3">EXPLORE</p>
</div>
<div class="words-div rg-bd">
<h3>Conference Hall</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>
<p class="p3">EXPLORE</p>
</div>
<div class="img-div">
<img src="images/b3.jpg" alt="">
</div>
<div class="words-div rg-bd">
<h3>Play Ground</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>
<p class="p3">EXPLORE</p>
</div>
<div class="img-div">
<img src="images/b4.jpg" alt="">
</div>
</div>
<div class="big-graphics">
<div class="graphics">
<h2 class="title">GALLERY</h2>
<div class="blue"></div>
<span class="info">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.
</span>
</div>
<div class="gallery">
<ul>
<li>
<div class="galpic">
<img src="images/03-01.jpg" alt="">
</div>
<div class="galword">
<p>Science Lab</p>
</div>
</li>
<li>
<div class="galpic">
<img src="images/03-02.jpg" alt="">
</div>
<div class="galword">
<p>Indoor Stadium</p>
</div>
</li>
<li>
<div class="galpic">
<img src="images/03-03.jpg" alt="">
</div>
<div class="galword">
<p>Transportation</p>
</div>
</li>
<li>
<div class="galpic">
<img src="images/03-04.jpg" alt="">
</div>
<div class="galword">
<p>Kids Room</p>
</div>
</li>
<li>
<div class="galpic">
<img src="images/03-05.jpg" alt="">
</div>
<div class="galword">
<p>Meditation Classes</p>
</div>
</li>
<li>
<div class="galpic">
<img src="images/03-06.jpg" alt="">
</div>
<div class="galword">
<p>Kids Play Ground</p>
</div>
</li>
</ul>
</div>
</div>
<div class="footer">
<p>©2016 imooc.com 京ICP备13046642号</p>
</div>
</body>
</html>
问题描述：
三角形一直不显示
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星