about区图文混排
老师为什么在做图文混排区时，该区域没有直接往下面排而是重复的排在上面的about文字那里？
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<!--这是页面的顶部-->
<div class="header">
<div class="logo"><img src="images/logo.png" alt="logo"></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>
<!--这是页面的banner图-->
<div class="banner">
<div class="pho"><img src="images/banner3.jpg" alt="banner"></div>
<div class="layar">
<div class="table">
<input type="text" name="1" value="" placeholder=" your Name"><br/>
<input type="text" name="2" value="" placeholder=" your Phone"><br/>
<input type="text" name="3" value="" placeholder=" your Email"><br/>
<textarea name="5" placeholder=" Write Your Comment Here" class="five"></textarea><br/>
<input type="button" name="SEND MASSEGE" value="SEND MASSEGE" class="four">
</div>
</div>
<!--这是页面的about区-->
<div class="about">
<div class="one">
<dl>
<dt>ABOUT</dt>
<hr/>
<dd> Lorem Ipsum has been the industry's standard <br>
dummy text ever since the 1500s, when an unknown<br>
printer took galley of type and scrambled it <br>
to make a yupe specimen book.
</dd>
</dl>
</div><!--about区第一部分-->
<div class="middle">
<div class="pic"><img src="images/bb3.jpg"></div>
<div class="word"><p> A WORD<br/> ABOUT US</p></div>
<div class="con">
<p> Lorem Ipsum has been the industry's<br/>
standard dummy text ever since the<br/>
1500s, when an unknown printer took<br/>
galley of type and scrambled it to<br/>
make a yupe specimen book.<br/>
<button>EXPLORE</button></p>
</div>
<div class="student"><p class="1">70000</p><br><br><p class="2">Student</p></div>
<div class="faculty"><p class="3">600</p><br><br><p class="4">Faculty</p></div>
</div><!--about区第二部分-->
<div class="bottom">
<div class="11"><img src="images/b1.jpg"></div>
<div class="22"></div>
<div class="33"></div>
<div class="44"></div>
</div><!--about区图文混排-->
</div>
<!--这是页面的gallary区-->
<div class="gallary"></div>
<!--这是页面的页脚区-->
<div class="footer"></div>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: "Microsoft YaHei UI";
}
.header{
width: 100%;
height: 80px;
background-color: #07cbc9;
position: fixed;
top: 0;
z-index: 9999;
}
.header .logo img{
width: 200px;
height: 40px;
padding-top: 20px;
padding-left: 80px;
float: left;
display: block;
}
.header .nav{
height: 30px;
font-weight: bold;
right: 80px;
}
.header .nav ul{
float: right;
}
.header .nav ul li{
float: left;
margin:0 15px;
list-style-type: none;
line-height: 80px;
}
a{
text-decoration: none;
color:white;
}
.banner .pho img{
width: 100%;
height:800px;
display: block;
margin-top: 80px;
}
.banner .pho{
position: relative;
}
.banner .layar{
width: 100%;
height: 800px;
background-color: black;
opacity: 0.5;
position: absolute;
top:80px;
z-index: 1;
}
.table{
width: 600px;
height: 400px;
position: absolute;
top:200px;
left: 50%;
margin-left: -300px;
}
.table input{
height: 39px;
width: 505px;
border: 2px gray solid;
margin: 10px 45px;
background-color: #000;
}
.table .five{
height: 115px;
width: 505px;
border:2px gray solid;
margin: 10px 45px;
background-color: #000;
}
.table .four{
height: 43px;
width: 127px;
border: 2px gray solid;
margin: 10px 237px;
background-color: #000;
}
.about{
width: 100%;
position: relative;
}
.about .one{
height:250px;
width: 600px;
border: red 2px solid;
position: absolute;
left: 50%;
margin-left:-300px;
}
.about .one dt{
font-size: 50px;
font-weight:bolder;
margin: 60px 220px;
}
.about .one dd{
color: gray;
text-align: center;
margin-top: 40px;
}
.about .one dd{
font-style:gray;
margin: 0 80px;
}
.about .one hr{
margin-top:-20px;
width: 30px;
margin-left:285px;
}
.middle .pic{
width: 1000px;
height: 440px;
border: 2px solid blue;
position: absolute;
top:252px;
left: 50%;
margin-left: -500px;
}
.middle .pic img{
width: 568px;
height: 380px;
margin-top: 30px;
margin-left: 216px;
}
.middle .word{
height: 100px;
width: 180px;
position: absolute;
left: 180px;
top:280px;
font-size: 35px;
}
.middle .con{
width: 370px;
height: 246px;
border: 1px #ececec solid;
background: rgba(255,255,255,.5);
position: absolute;
top:390px;
left: 160px;
}
.middle .con p{
margin-top: 40px;
margin-left: 30px;
}
.middle .con p button{
width: 102px;
height: 43px;
background-color: black;
color: #fff;
font-size: 18px;
border: 1px #ececec;
margin-top: 30px;
}
.middle .student{
width: 238px;
height: 144px;
border: 1px #07cbc9 solid;
position: absolute;
left: 1000px;
top:280px;
font-size: 20px;
text-align: center;
}
.middle .faculty{
width: 238px;
height: 144px;
border: 1px #07cbc9 solid;
position: absolute;
top: 450px;
left: 1000px;
font-size: 20px;
text-align: center;
}
.middle .student .1{
font-weight: bolder;
}
.bottom{
height:40px;
width: 100%;
border: 1px black solid;
position: absolute;
}
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星