作业上传不了，只能在这上传了，请老师点评~辛苦了

html部分：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

<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>

<form>

</form>

</div>

<h1>ABOUT</h1>

<P>Lorem Ipsum is simply dummy text of the printing and typesetting<br/>

industry. Lorem Ipsum has been the industry's standard dumm<br/>

text ever since the 1500s</P>

</div>

<h1> A WORD<br/>ABOUT US</h1>

<p>Praesent dignissim viverra est, sed<br/>

bibendum ligula congue non Sed ac nisti<br/>

et felis gravida commodo? Suspendisse<br/>

eget ullamcorper ipsum. Suspendisse<br/>

diam amet.

<br/>

</div>

</div>

<div class="people">Students</div>

</div>

<div class="people">Faculty</div>

</div>

<h2>Library</h2>

<div class="para1">Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry

</div>

<div class="para2">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

pediment book</div><br/>

</div>

<h2>Computer Lab</h2>

<div class="para1">Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry

</div>

<div class="para2">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

pediment book</div><br/>

</div>

<h2>Conference Hall</h2>

<div class="para1">Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry

</div>

<div class="para2">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

pediment book</div><br/>

</div>

<h2>Play Ground</h2>

<div class="para1">Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry

</div>

<div class="para2">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

pediment book</div><br/>

</div>

</div>

<h1>GALLARY</h1>

<P>Lorem Ipsum is simply dummy text of the printing and typesetting<br/>

industry. Lorem Ipsum has been the industry's standard dumm<br/>

text ever since the 1500s</P>

</div>

<div class="descri">SCIENCE LAB</div>

</div>

<div class="descri">INDOOR STADIUM</div>

</div>

<div class="descri">TRANSPORTATION</div>

</div>

</div>

<div class="descri">MEDITATION CLASSES</div>

</div>

<div class="descri">KIDS PLAY GTOUND</div>

</div>

<p>© 2016 imooc.com 京ICP备13046642号</p>

</div>

</body>

</html>

css部分：

padding: 0;

margin: 0;

}

body{

font-family:"Microsoft YaHei UI";

}

.header{

width: 100%;

height: 80px;

background-color: #07cbc9;

position: fixed;

top: 0;

z-index: 9999;

}

.logo{

margin-top: 14px;

margin-left: 100px;

float: left;

}

.nav ul{

float: right;

margin-right: 80px;

}

.nav ul li{

float: left;

width: 80px;

line-height: 80px;

margin: 0 5px;

list-style-type: none;

font-weight: bold;

text-align: center;

}

.nav ul li:hover{

background-color: gray;

}

.nav ul li a{

text-decoration: none;

color: white;

}

.banner{

padding-top: 80px;

width: 100%;

height: 600px;

}

.banner img{

width: 100%;

height: 600px;

}

.bannerLayer{

position: absolute;

top: 80px;

width: 100%;

height: 600px;

background-color: black;

opacity: 0.5;

z-index:

}

.bannerLayer-top{

width: 506px;

height: 450px;

position: absolute;

top: 190px;

left: 50%;

margin-left: -253px;

}

.name,.phone,.email{

width: 500px;

height: 40px;

border: 3px solid gray;

margin-bottom: 20px;

background: transparent;

}

.comment{

width: 500px;

height: 140px;

border: 3px solid gray;

margin-bottom: 20px;

background: transparent;

font-size:16px;

color: gray;

text-indent: 10px;

font-family:"Microsoft YaHei UI";/*为何此处一定要补充设置字体才能与上面的表单项字体一致？*/

}

.name:hover{

border-color: #07cbc9;

}

.phone:hover{

border-color: #07cbc9;

}

.email:hover{

border-color: #07cbc9;

}

.comment:hover{

border-color: #07cbc9;

}

.submit:hover{

background: #07cbc9;

border: none;

}

.submit{

width: 150px;

height: 50px;

border: 3px solid gray;

margin-bottom: 20px;

margin-left: 178px;

color: gray;

font-weight: bold;

background: transparent;

}

input::placeholder{

font-size:16px;

color: gray;

text-indent: 10px;

}

.about .top,.gallery .top{

width: 600px;

margin: 0 auto;

margin-top: 40px;

text-align: center;

}

.about .top .line,.gallery .top .line{

width: 50px;

height: 20px;

border: 2px solid #07cbc9;

margin-top: 22px;

margin-left: 273px;

border-color: #07cbc9 transparent transparent transparent;

}

.about .top p,.gallery .top p{

font-size: 16px;

color: gray;

}

.about .middle{

width: 70%;

height: 435px;

margin: 0 auto;

margin-top: 35px;

}

.about .middle .left{

float: left;

z-index: 222;

margin-left: 20px;

}

.about .middle .left h1{

width: 200px;

margin-left: 10px;

font-weight: normal;

}

.about .middle .left p{

border: 1px solid white;

padding: 20px;

background-color: rgba(225,225,225,0.3);

margin-top: 10px;

position: absolute;

z-index: 222;

}

.about .middle .left input{

width: 100px;

height: 50px;

background-color: black;

color: white;

border: none;

margin-top: 20px;

}

.about .middle .middle-middle{

float: left;

position:absolute;

left: 420px;

}

.about .middle .middle-middle img{

height: 350px;

}

.about .middle .right{

float: right;

}

.students,.faculty{

width: 180px;

height: 120px;

border: 1px solid #07cbc9;

margin-bottom: 20px;

text-align: center;

}

.right .line{

width: 50px;

height: 15px;

border: 2px solid #07cbc9;

margin-top: 22px;

margin-left: 64px;

border-color: #07cbc9 transparent transparent transparent;

}

.num{

font-size: 26px;

font-weight: bold;

margin-top: 10px;

}

.about .bottom{

width: 100%;

height: 600px;

}

.pic1,.word1,.pic2,.word2{

width: 25%;

height: 300px;

float: left;

}

.pic1 img,.pic2 img{

width: 100%;

height: 300px;

}

.word1,.word2{

font-size: 12px;

padding: 30px;

background-color: #07cbc9;

box-sizing: border-box;

}

.word1 .para1,.word1 .para2,.word2 .para1,.word2 .para2{

margin-top: 20px;

}

.word1 h2,.word2 h2{

color: white;

}

.word1 .para1,.word2 .para1{

color: white

}

.word1 .para2,.word2 .para2{

color: gray;

}

.word1 input,.word2 input{

width: 80px;

height: 40px;

background-color: black;

border: none;

color: white;

margin-left: 88px;

margin-top: 20px;

}

.about .middle .left .explore:hover{

color: black;

background-color: transparent;

border:1px solid black;

}

.about .bottom .explore:hover{

color: black;

background-color: transparent;

border:1px solid black;

}

.tri1{

width: 0;

height: 0;

border-top:15px solid transparent;

border-left:15px solid transparent;

border-bottom:15px solid transparent;

border-right:15px solid #07cbc9;

margin-left: -60px;

margin-top: -130px;

}

.tri2{

width: 0;

height: 0;

border-top:15px solid transparent;

border-right:15px solid transparent;

border-bottom:15px solid transparent;

border-left:15px solid #07cbc9;

margin-left: 307px;

margin-top: -130px;

z-index: 2222;

position: absolute;/*这里单独设置绝对定位就可以实现三角形层级在上面了。。为何？relative不用设置吗？*/

}

.gallery .bottom{

width: 60%;

height: 480px;

margin: 20px auto;

}

.bottom .s{

width: 33.33%;

float: left;

padding: 10px;

box-sizing: border-box;

}

.bottom .s img{

width: 100%;

height: auto;

display: block;

}

.descri{

width: 100%;

height: 40px;

line-height: 40px;

background-color: black;

color: gray;

font-size: 12px;

text-indent: 10px;

}

.footer{

width: 100%;

height: 50px;

background-color: #07cbc9;

color: white;

}

.footer p{

width: 400px;

height: 50px;

line-height: 50px;

margin: 0 auto;

text-align: center;

}

情人节礼物 2019-04-27

源自：项目：网页布局案例 2-10 作业题

收起

2回答

好帮手慕糖 2019-05-10 16:05:12

同学你好，可以详细的描述下，你说的tri是指哪里哦。便于准确的定位与解决问题。

祝学习愉快！

收起回答

慕的地7201671 #1

就是在about块下的bottom那里的class名字为tri1，tri2的是干什么的

2019-05-10 16:18:03
慕的地7201671 #2

麻烦老师讲解一下

2019-05-10 17:04:16
好帮手慕糖回复慕的地7201671 #3

同你好，这两个是用来设置文字区块指向图片的小三角的哦。祝学习愉快！

2019-05-10 19:23:35

好帮手慕码 2019-04-28 10:32:18

同学你好！

同学可以在代码中标注相关的注释，以便后期维护哦~

作业效果总体实现效果是很好的哦~有一些问题，问题如下：

（1）顶部导航栏右侧的链接间隙应该是相同的，每个li的宽度是不同的，因此建议不要给li设置宽度，而是使用padding来撑大左右间隙，

（2）图文混排区域的三角形实现，在老师这边那是没有显示出来的，可能是因为分辨率不同：

以这个三角形为例，可以给它的父级设置相对定位，而三角形使用top/right的方式布局出来，top:50%,margin-top：负的元素高度一半是可以实现垂直居中的;另，同学在注释中问的问题，可以查看如下图片：

如果帮助到了你欢迎采纳祝学习愉快~

收起回答

慕的地7201671 #1

请问这个tri的class是什么呢

2019-05-10 15:13:34

相似问题

老师我统一挂号平台的作业上传错了怎么办？？

老师文件上传错误了???

上次交作业，老师看错文档了，把我之前初步的作业构架看了。这是我根据老师的意见修改了一点之后的代码

作业怎么上传？

老师我传错作业了还能从传吗

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36713 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

作业上传不了，只能在这上传了，请老师点评~辛苦了

作业上传不了，只能在这上传了，请老师点评~辛苦了

正在回答回答被采纳积分+1

请选择置顶位置