ABOUT区三角角标的问题，没有思路不知道该咋弄。
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端作业</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 顶部 -->
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="logo">
<div class="nav">
<a href="" title="">HOME</a>
<a href="" title="">ABOUT</a>
<a href="" title="">GALLER</a>
<a href="" title="">FACULTY</a>
<a href="" title="">EVENTS</a>
<a href="" title="">CONTACT</a>
</div>
</div>
</div>
<!-- banner区 -->
<div class="banner">
<div class="top">
<img src="images/banner3.jpg" alt="banner">
</div>
<!-- banner遮罩层 -->
<div class="toplayer"></div>
<div class="toplayer-top">
<input type="text" value="Your Name" name="name1"></br>
<input type="text" name="password" value="Your Phone"></br>
<input type="email" name="email" value="Your Email"></br>
<textarea rows="6" cols="23">Write Your Comment Here
</textarea></br>
<button>SEND MESSAGE</button>
</div>
</div>
<!-- ABOUT区 -->
<div class="about">
<!-- ABOUT区顶部 -->
<div class="about-top">
<div class="about-top-t">ABOUT</div>
<label class="line"></label> <!-- 下划线 -->
Lorem Ipsum is simply dummy text of the printing and typesetting </br>
industry.Lorem Ipsum has been the industry`s standard dummy </br>
text ever since the 1500s.</br>
</div>
<!-- ABOUT区中部 -->
<div class="about-middle">
<div class="textleft">
<p>  A WORD</p>
<p>ABOUT US</p>
<div class="text-left2">
Paresent dingnissim viverra est,sed <br>
bibendum lgula congue non.Sed ac nisl <br>
et felis gravida commodm? Suspendisse <br>
eget ullamcorper ipsum.Suspendisse <br>
diam amet.<br>
<input type="button" value="EXPLORE" name="">
</div>
</div>
<div class="about-middle-img">
<img src="images/bb3.jpg" alt="">
</div>
<div class="textleftright">
<div class="textleftright-top">
<h1>70000</h1>
<label class="line"></label>
<h4>Students</h4>
</div>
<div class="textleftright-bot">
<h1>600</h1>
<label class="line"></label>
<h4>Faculty</h4>
</div>
</div>
</div>
<!-- ABOUT区底部 -->
<div class="about-bottom">
<div class="top">
<div class="img">
<img src="images/b1.jpg" alt="">
</div>
<div class="img2">
<p class="p1">Library</p>
<p class="p2">Lorem Ipsum is simply dummy text of the <br>
printing and typesetting industry</p>
<p class="p3">Lorem Ipsum has been the industry`s standard dummy <br>
text ever since the 1500s, when an unknown printer took <br>
a gallery of type and scrambled it to make a type <br>
specimen book
</p>
<input type="button" value="EXPLORE" name="">
</div>
<div class="img3">
<img src="images/b2.jpg" alt="">
</div>
<div class="img4">
<p class="p1">Computer Lab</p>
<p class="p2">Lorem Ipsum is simply dummy text of the <br>
printing and typesetting industry</p>
<p class="p3">Lorem Ipsum has been the industry`s standard dummy <br>
text ever since the 1500s, when an unknown printer took <br>
a gallery of type and scrambled it to make a type <br>
specimen book
</p>
<input type="button" value="EXPLORE" name="">
</div>
</div>
<div class="bot">
<div class="img5">
<p class="p1">Conference Hall</p>
<p class="p2">Lorem Ipsum is simply dummy text of the <br>
printing and typesetting industry</p>
<p class="p3">Lorem Ipsum has been the industry`s standard dummy <br>
text ever since the 1500s, when an unknown printer took <br>
a gallery of type and scrambled it to make a type <br>
specimen book
</p>
<input type="button" value="EXPLORE" name="">
</div>
<div class="img6">
<img src="images/b3.jpg" alt="">
</div>
<div class="img7">
<p class="p1">Play Groudn</p>
<p class="p2">Lorem Ipsum is simply dummy text of the <br>
printing and typesetting industry</p>
<p class="p3">Lorem Ipsum has been the industry`s standard dummy <br>
text ever since the 1500s, when an unknown printer took <br>
a gallery of type and scrambled it to make a type <br>
specimen book
</p>
<input type="button" value="EXPLORE" name="">
</div>
<div class="img8">
<img src="images/b4.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- GALLERY区 -->
<div class="gallery">
</div>
<!-- 页脚 -->
<div class="footer">
</div>
</body>
</html>
CSS的
*{
padding: 0;
margin: 0;
}
body{
font-family: Microsoft YaHei UI;
}
/*顶部导航*/
.header{
width: 100%;
height: 100px;
background-color: #07cbc9;
position: fixed;
top: 0;
z-index: 9999;
}
.header img{
width: 300px;
height: 55px;
padding-left: 150px;
padding-top: 23px;
}
.header .logo{
float: left;
}
.header .nav{
float: right;
padding-left: 750px;
}
.header .nav a{
float: left;
list-style: none;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 18px;
font-weight: bolder;
color: #fff;
text-decoration: none;
text-align: center
}
.header .nav a:hover {
background-color: #000;
}
/*BANNER图区*/
.banner{
width: 100%;
height:600px;
}
.banner img{
width: 100%;
height:600px;
}
/*banner遮罩层*/
.banner .toplayer{
position: absolute;
top: 100px;
left: 0px;
background-color: #000;
width: 100%;
height: 500px;
opacity: 0.5;
}
.toplayer-top{
width: 500px;
height: 300px;
position: absolute;
top: 400px;
left: 50%;
margin-left: -250px;
margin-top: -260px;
z-index: 2;
text-align: center;
color: #fff;
}
/*BANNER区输入框*/
.toplayer-top input {
width: 400px;
font-size: 18px;
margin-top: 10px;
border: 1px solid #fff;
background-color: transparent;
color: #fff;
padding: 10px;
}
.toplayer-top input:hover {
border: 1px solid #07cbc9;
}
.toplayer-top textarea{
width: 400px;
font-size: 25px;
margin-top: 10px;
border: 1px solid #fff;
background-color: transparent;
color: #fff;
padding: 10px;
}
.toplayer-top textarea:hover {
border: 1px solid #07cbc9;
}
.toplayer-top button{
width: 200px;
height: 40px;
margin-top: 10px;
font-weight: bolder;
border: 1px solid #fff;
font-size: 22px;
background-color: transparent;
color: #fff;
}
.toplayer-top button:hover {
border: 1px solid #07cbc9;
}
/*BAOUT区*/
.about{
width: 100%;
}
/*ABOUT区顶部*/
.about-top{
text-align: center;
}
.about .about-top .about-top-t{
width: 200px;
font-size: 48px;
margin: 20px auto;
font-weight: bolder;
}
.line{
background-color: #07cbc9;
display: block;
width: 40px;
height: 2px;
margin: 15px auto;
}
/*ABOUT区中部*/
.about-middle{
overflow: hidden;
zoom:1;
}
.about .textleft{
width: 320px;
height: 300px;
float: left;
position: relative;
top: 100px;
left: 430px;
}
.about .textleft .text-left2{
border: 1px solid #000;
padding: 10px;
background-color: #fff;
opacity: 0.7;
}
.about .textleft p{
font-size: 38px;
}
.about .textleft input{
border: 1px solid #000;
width: 150px;
font-size: 22px;
margin-top: 20px;
padding: 10px;
background-color:#000;
color: #ffffff;
}
.about .textleft input:hover {
background-color:#ffffff;
color: #000;
}
.about .about-middle-img{
width: 650;
height: 435;
float: left;
margin-top: 30px;
margin-left: 320px;
}
.about .textleftright{
width: 300px;
height: 400px;
float: right;
position: relative;
top: 30px;
right: 260px;
text-align: center;
}
.textleftright-top{
border: 1px solid #07cbc9;
padding: 30px 1px;
}
.textleftright-bot{
margin-top: 30px;
border: 1px solid #07cbc9;
padding: 30px 1px;
}
/*ABOUT底部*/
.about-bottom{
margin-top: 100px;
}
.about-bottom .p1{
margin-left: 30px;
font-size: 34px;
color: #fff;
margin-top: 30px;
}
.about-bottom .p2{
margin-left: 30px;
font-size: 16px;
color: #fff;
margin-top: 30px;
}
.about-bottom .p3{
margin-left: 30px;
font-size: 8px;
color: #fff;
margin-top: 30px;
}
.about-bottom input{
border: 1px solid #000;
width: 150px;
font-size: 22px;
margin-top: 40px;
padding: 10px;
background-color:#000;
color: #ffffff;
margin-left: 123px;
}
.about .about-bottom input:hover {
background-color:#07cbc9;
}
/*第一行*/
.about-bottom .top{
width: 1584px;
height: 396px;
overflow: hidden;
zoom:1;
position: static;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
}
.about-bottom .top .img{
width: 396px;
height: 396px;
float: left;
}
.about-bottom .top .img2{
width: 396px;
height: 396px;
float: left;
background-color:#07cbc9;
}
.about-bottom .top .img3{
width: 396px;
height: 396px;
float: left;
}
.about-bottom .top .img4{
width: 396px;
height: 396px;
float: left;
background-color:#07cbc9;
}
/*第二行*/
.about-bottom .bot{
width: 1584px;
height: 396px;
overflow: hidden;
zoom:1;
position: static;
margin-right: auto;
margin-left: auto;
}
.about-bottom .bot .img5{
width: 396px;
height: 396px;
float: left;
background-color:#07cbc9;
}
.about-bottom .bot .img6{
width: 396px;
height: 396px;
float: left;
}
.about-bottom .bot .img7{
width: 396px;
height: 396px;
float: left;
background-color:#07cbc9;
}
.about-bottom .bot .img8{
width: 396px;
height: 396px;
float: left;
}3
收起
正在回答
4回答
您好，您上述代码并没有错位。可以反馈更改之后的代码，以便查看样式帮助调试。也可以自己先尝试：注意定位时的距离，注意页面的自适应，注意距离左右的距离。
祝学习愉快！
好帮手慕查理
2018-11-18 10:25:49
您好，导航栏错位是指下图形式吗？.header .nav:padding-left距离左侧的距离导致文字内容放不下，将距离设置的小一些即可。且不设置a标签的line-height可以居中。
三角角标可以参考：http://class.imooc.com/course/qadetail/46691
请注意页面自适应以及相同样式的内容可以设置相同的class名称设置样式，减少重复代码。祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
PHP小白零基础入门
- 参与学习 人
- 提交作业 626 份
- 解答问题 4928 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星