老师请检查下
来源：2-17 自由编程
__Promise
2021-05-15 12:02:48
<!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.css">
</head>
<body>
<header>
<div class="headertop">
<a href="#" class="logo"><img src="images\images\logo.png" alt="logo"></a>
<ul class="nav">
<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>
</header>
<div class="banner">
<img src="images\images\banner3.jpg" alt="">
<div class="mask"></div>
<form action="">
<input class="form name" type="text" placeholder="your Name">
<input class="form phone" type="tel" placeholder="your Phone">
<input class="form email" type="email" placeholder="your Email">
<textarea class="form comment" placeholder="Write Your Comment Here"></textarea>
<input class="form message" type="submit" value="SEND MESSAGE">
</form>
</div>
<div class="about">
<div class="aboutup ag">
<div class="up1">ABOUT</div>
<div class="up2 line"></div>
<div class="up3">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry. Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
</div>
<div class="aboutdown">
<div class="down1">
<p class="dl1">A WORD</p>
<p class="dl2">ABOUT US</p>
</div>
<div class="down2">
<p>Praesent dignissim viverra est, sedbibendum liqula congue non. Sedac nisl et felis gravida commodo?Suspendisse eqet ullamcorperipsum. Suspendisse diam amet.</p>
<input type="button" value="EXPLORE ">
</div>
<div class="down3">
<img src="images\images\bb3.jpg" alt="">
</div>
<div class="down4 dr">
<p class="dr1">7000</p>
<div class="line"></div>
<p class="dr2">Students</p>
</div>
<div class="down5 dr">
<p class="dr1">600</p>
<div class="line"></div>
<p class="dr2">Faculty</p>
</div>
</div>
</div>
<div class="img-text">
<div class="img">
<img src="images\images\b1.jpg" alt="">
</div>
<div class="text triangle1">
<p class="p1">
Library
</p>
<p class="p2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</p>
<p class="p3">
Lorem Ipsum has been the inkustry's standard dummy text ever• since the 1500s, when an unknown printer took a galley of typeand scrambled it to make a type specimen book.
</p>
<input type="submit" value="EXPLORE">
</div>
<div class="img">
<img src="images\images\b2.jpg" alt="">
</div>
<div class="text triangle1">
<p class="p1">
Library
</p>
<p class="p2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</p>
<p class="p3">
Lorem Ipsum has been the inkustry's standard dummy text ever• since the 1500s, when an unknown printer took a galley of typeand scrambled it to make a type specimen book.
</p>
<input type="submit" value="EXPLORE">
</div>
<div class="text triangle2">
<p class="p1">
Library
</p>
<p class="p2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</p>
<p class="p3">
Lorem Ipsum has been the inkustry's standard dummy text ever• since the 1500s, when an unknown printer took a galley of typeand scrambled it to make a type specimen book.
</p>
<input type="submit" value="EXPLORE">
</div>
<div class="img">
<img src="images\images\b3.jpg" alt="">
</div>
<div class="text triangle2">
<p class="p1">
Library
</p>
<p class="p2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</p>
<p class="p3">
Lorem Ipsum has been the inkustry's standard dummy text ever• since the 1500s, when an unknown printer took a galley of typeand scrambled it to make a type specimen book.
</p>
<input type="submit" value="EXPLORE">
</div>
<div class="img">
<img src="images\images\b4.jpg" alt="">
</div>
</div>
<div class="gallery">
<div class="gup ag">
<div class="up1">GALLERY</div>
<div class="up2 line"></div>
<div class="up3">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry. Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
</div>
<div class="gdown">
<dl>
<dt>
<img src="images\images\03-01.jpg" alt="">
</dt>
<dd><span>Science Lab</span></dd>
</dl>
<dl>
<dt>
<img src="images\images\03-02.jpg" alt="">
</dt>
<dd><span>Indoor Stadium</span></dd>
</dl>
<dl>
<dt>
<img src="images\images\03-03.jpg" alt="">
</dt>
<dd><span>Transportation</span></dd>
</dl>
<dl>
<dt>
<img src="images\images\03-04.jpg" alt="">
</dt>
<dd><span>Kids Room</span></dd>
</dl>
<dl>
<dt>
<img src="images\images\03-05.jpg" alt="">
</dt>
<dd><span>Meditation Classes</span></dd>
</dl>
<dl>
<dt>
<img src="images\images\03-06.jpg" alt="">
</dt>
<dd><span>Kids Play Ground</span></dd>
</dl>
</div>
</div>
<footer>
<p>© 2016 imooc.com 京ICP备13046642号</p>
</footer>
</body>
</html>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
header{
height: 80px;
background-color: #07cbc9;
}
header .headertop{
height: 80px;
width: 1200px;
margin: 0 auto;
}
header .headertop .logo{
height: 80px;
float: left;
}
header .headertop .nav{
height: 80px;
float: right;
}
header .headertop .logo img{
height: 48px;
margin-top: 16px;
}
header .headertop .nav li{
float: left;
margin-right: 20px;
}
header .headertop .nav li a{
font-size: 16px;
color: white;
display: block;
line-height: 80px;
}
header .headertop .nav li a:hover{
border-top: 1px solid red;
background-color: #289e9c;
}
.banner{
position: relative;
}
.banner img{
width: 100%;
height: 600px;
}
.banner .mask{
position: absolute;
width: 100%;
height: 600px;
background:rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
}
.banner form{
position: absolute;
width: 506px;
top: 100px;
left: 50%;
margin-left: -253px;
text-align:center;
}
.banner form .form{
background: none;
border: 1px solid #aaa;
color: white;
margin-bottom: 20px;
}
.banner form .name,
.banner form .phone,
.banner form .email{
width: 504px;
height: 40px;
}
.banner form .comment{
width: 504px;
height: 110px;
}
.banner form .message{
width: 200px;
height: 40px;
color: #aaa;
cursor: pointer;
}
.banner form .message:hover{
background-color: #aaa;
color: white;
}
.ag{
width: 1200px;
margin: 0 auto;
text-align: center;
padding-top: 30px;
}
.ag .up1{
font-size: 32px;
}
.line{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.ag .up3{
color: gray;
font-size: 14px;
}
.about .aboutdown{
width: 1200px;
height: 435px;
margin: 0 auto;
padding-top: 30px;
position: relative;
}
.about .aboutdown .down1{
float: left;
font-size: 32px;
font-weight: bold;
}
.about .aboutdown .down1 .dl1{
margin-bottom: 10px;
}
.about .aboutdown .down2{
width: 300px;
padding: 20px;
border: 1px solid gray;
background:rgba(255,255,255,0.5);
font-size: 18px;
position: absolute;
top: 130px;
}
.about .aboutdown .down2 input{
width: 140px;
height: 40px;
background-color: #000;
border: none;
color: #fff;
margin-top: 20px;
cursor: pointer;
}
.about .aboutdown .down3{
width: 650px;
height: 435px;
float: left;
margin-left: 100px;
}
.about .aboutdown .dr{
width: 258px;
padding: 40px 0;
border: 1px solid #07cbc9;
text-align: center;
float: right;
}
.about .aboutdown .dr .dr1{
font-size: 28px;
font-weight: bold;
}
.about .aboutdown .dr .dr2{
font-size: 18px;
}
.about .aboutdown .down4{
margin-bottom: 30px;
}
.img-text{
width: 100%;
overflow: hidden;
margin-top: 30px;
}
.img-text div{
float: left;
width: 25%;
height: 380px;
}
.img-text .img img{
width: 100%;
height: 380px;
display: block;
}
.img-text .text{
background-color: #07cbc9;
position: relative;
}
.img-text .text .p1{
font-size: 24px;
font-weight: bold;
color: #fff;
margin: 20px 20px 30px;
}
.img-text .text .p2{
font-size: 16px;
color: #fff;
margin: 0 20px;
}
.img-text .text .p3{
font-size: 14px;
color: gray;
margin: 20px 20px 0;
}
.img-text .text input{
width: 138px;
height: 40px;
background-color: #000;
color: #fff;
border: none;
display: block;
margin: 30px auto;
cursor: pointer;
}
.gallery .gdown{
width: 1200px;
margin: 0 auto;
padding: 30px 0;
overflow: hidden;
}
.gallery .gdown dl{
float: left;
width: 360px;
height: 290px;
margin: 30px 20px;
}
.gallery .gdown dl dt{
width: 360px;
height: 240px;
display: block;
}
.gallery .gdown dl dd{
width: 360px;
height: 50px;
background-color: #000;
overflow: hidden;
}
.gallery .gdown dl dd span{
color: #fff;
display: block;
margin: 10px;
}
footer{
width: 100%;
height: 80px;
background-color: #07cbc9;
}
footer p{
text-align: center;
line-height: 80px;
}
.triangle1::after{
content: '';
position: absolute;
width: 0;
height: 0;
border: 20px solid transparent;
border-right: 30px solid #07cbc9;
top: 50%;
margin-top: -20px;
left: -50px;
}
.triangle2::after{
content: '';
position: absolute;
width: 0;
height: 0;
border: 20px solid transparent;
border-left: 30px solid #07cbc9;
top: 50%;
margin-top: -20px;
right: -50px;
}
写回答
1回答
-
好帮手慕慕子
2021-05-15
同学你好，代码整体效果实现的很棒，有两点需要注意的地方，如下：
1、headertop大盒子水平居中了，但是里面的内容距离大盒子左右间距不同，导致内容水平居中存在误差，如下图所示：
建议：调整为margin-left属性设置间距，让文字内容紧挨着大盒子右侧
2、文字内容没有垂直居中显示，如下图所示：
建议：去掉margin属性，通过line-height属性实现垂直居中效果，然后添加padding-left属性调整文字左侧空白间距
祝学习愉快~
0
相似问题