老师帮忙看下about区中间排版怎么写和图文混排哪里错了,批作业的老师的代码实现不了
<!DOCTYPE html>
<html>
<head>
<title>网页布局作业</title>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding:0;
font-family: Microsoft Yahei UI;
}
/*头部*/
.header{
width: 100%;
height: 80px;
background: #07CBC9;
position: fixed;
top: 0;
z-index: 999;
}
.logo{
float: left;
width: 260px;
height: 80px;
}
.logo img{
margin-left: 50px;
margin-top: 15px;
}
.header ul{
float: right;
margin-right: 50px;}
.header ul li{
list-style: none;
margin-right: 20px;
float: left;
margin-right: 20px;
}
a{line-height: 80px;
text-decoration: none;
color: white;
}
a:hover{
color: gray;
}
/*banner图*/
.banner img{
width: 100%;
height: 604px;
}
.topLayer{
background:#000000;
opacity: 0.5;
z-index: 1;
width: 100%;
height: 604px;
position: absolute;
top: 0;
}
.banner-form{
width: 500px;
height: 300px;
position: absolute;
top: 150px;
left:50%;
margin-left: -250px;
z-index: 2;
text-align: center;
background:transparent;
color: #ffffff;
}
.banner-form input{
border: 2px solid gray;
width: 509px;
height: 43px;
margin: 10px;
color: #ffffff;
background:transparent;
}
.banner-form input:hover{
border:2px solid #07cbc9;
}
.banner-form textarea{
margin-left: 11px;
height: 115px;
background: transparent;
border:2px solid gray;
}
.banner-form textarea:hover{
border:2px solid #07cbc9;
}
.banner-form input[type="button"]{
width: 124px;
height: 40px;
}
.banner-form input[type="button"]:hover{
border: none;
background: #07cbc9;
}
/*about区*/
.about{
width: 100%;
height:700px;
position: relative;
}
.about-top{
width: 509px;
height: 150px;
margin: 0 auto;
text-align: center;
}
.about .about-top h2{
margin:50px 0 20px 0;
font-size: 30px;
}
.about-top p{
color: gray;
line-height: 1.5em;
}
.about .about-con{
width: 572px;
height: 384px;
margin:20px auto;
}
.about .about-con img{
width: 572px;
height: 384px;
}
/*.about-middle{
width: 1200px;
margin: 50px auto;
height:
}*/
.left-tit{
width: 370px;
height: 384px;
position: absolute;
top: 170px;
left: 200px;
}
.left-tit h3{
font-size: 30px;
margin-bottom: 20px;
}
.left-tit .left-word{
width: 370px;
height: 250px;
line-height: 1.5em;
background:transparent;
/*opacity: 0.5;*/
color: #000;
padding:20px;
border: 1px solid #000;
font-weight: bold;
text-align: justify;
}
.left-tit .left-word p{
margin: 20px;
}
.left-tit .left-word input[type=button]{
width: 102px;
height: 45px;
background: #000;
color: #ffffff;
font-size: 20px;
text-align: center;
/*margin-top: 20px;*/
margin-left: 20px;
border: 1px solid #000;
}
.left-tit .left-word input[type=button]:hover{
background: transparent;
color: #000;
}
.right-tit .students,.facululty{
width: 238px;
height: 144px;
border: 1px solid #07cbc9;
margin-bottom: 20px;
position: absolute;
left: 780px;
text-align: center;
padding-top: 20px;
}
.right-tit .students{
top:0;
}
.right-tit .facululty{
top:180px;
}
.about-image img{
width: 337px;
height: 337px;
}
.about-image,.about-text{
width: 25%;
height:337px;
float: left;
text-align: justify;
color: #ffffff;
background:#07cbc9;
}
.about-text input[type=button]{
width: 102px;
height: 45px;
background: #000;
color: #ffffff;
font-size: 20px;
text-align: center;
margin-left: 125px;
margin-top: 50px;
border: 1px solid #000;
}
.about-text input[type=button]:hover{
background: transparent;
color: #000;
}
/*gallery区*/
.gallery{
width: 100%;
height: 770px;
margin-top: 40px;
margin-bottom: 40px;
}
hr{
width: 30px;
height: 4px;
border: none;
background-color:#07cbc9;
margin: 10px auto;
}
.gallery-con{
width: 1110px;
text-align: center;
margin:0 auto;
}
.gallery-con-img img{
width:360px;
height: 240px;
}
.gallery-con-img{
width: 360px;
height: 304px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
background: #000;
}
.gallery-con-img p{
text-align: left;
color: #ffffff;
line-height: 55px;
padding-left: 20px;
}
/*footer*/
.footer{
height: 80px;
width: 100%;
background:#07cbc9;
color: #ffffff;
z-index: 9999999;
line-height: 80px;
text-align: center;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="网页布局.css"> -->
</head>
<body>
<!-- 顶部 -->
<div class="header">
<div class="logo">
<a href="#"><img src="../作业素材/images/logo.png"></a>
</div>
<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 class="banner">
<img src="../作业素材/images/banner3.jpg">
</div>
<div class="topLayer">
</div>
<div class="banner-form">
<form method="post" >
<input type="text" name="username" placeholder="your Name"><br>
<input type="text" name="number" maxlength="11" placeholder="your Phone"><br>
<input type="text" name="email" placeholder="your Email"><br>
<textarea rows="4" cols="70" placeholder="Write Your Comment Here"></textarea><br>
<input type="button" name="bt" value="SEND MESSAGE">
</form>
</div>
<!-- about -->
<div class="about">
<div class="about-top">
<h2>ABOUT</h2>
<hr>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</div>
<div class="about-con">
<img src="../作业素材/images/bb3.jpg">
</div>
<div class="about-middle">
<div class="left-tit">
<h3>A WORD <br>ABOUT US</h3>
<div class="left-word">
<p>Praesent dignissim viverra est, sed bibendum ligula congue non.Sed ac nisl et felis gravida commodo?Suspendisse eget ullamcorper ipsum.Suspendisse diam amet</p>
<input type="button" value="EXPLORE">
</div>
<div class="right-tit">
<div class="students">
<h3>70000</h3>
<p>Students</p>
</div>
<div class="facululty">
<h3>600</h3>
<p>Faculty</p>
</div>
</div>
</div>
</div>
<div class="about-bottom">
<div class="about-image"><img src="../作业素材/images/b1.jpg"></div>
<div class="about-text">
<h3>Library</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span>
<br>
<input type="button" value="EXPLORE">
</div>
<div class="about-image"><img src="../作业素材/images/b2.jpg"></div>
<div class="about-text">
<h3>Library</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span>
<br>
<input type="button" value="EXPLORE">
</div>
<div class="about-text">
<h3>Library</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span>
<br>
<input type="button" value="EXPLORE">
</div>
<div class="about-image"><img src="../作业素材/images/b3.jpg"></div>
<div class="about-text">
<h3>Library</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span>
<br>
<input type="button" value="EXPLORE">
</div>
<div class="about-image"><img src="../作业素材/images/b4.jpg"></div>
</div>
</div>
<div style="clear:both;"></div>
<!-- gallery区 -->
<div class="gallery">
<div class="about-top">
<h2>GALLERY</h2>
<hr>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</div>
<div class="gallery-con">
<div class="gallery-con-img">
<img src="../作业素材/images/03-01.jpg">
<p>SCIENCE LAB</p>
</div>
<div class="gallery-con-img">
<img src="../作业素材/images/03-02.jpg">
<p>INDOR STADIUM</p>
</div>
<div class="gallery-con-img">
<img src="../作业素材/images/03-03.jpg">
<p>TRANSPORTATION</p>
</div>
<div class="gallery-con-img">
<img src="../作业素材/images/03-04.jpg">
<p>KIDS ROOM</p>
</div>
<div class="gallery-con-img">
<img src="../作业素材/images/03-05.jpg">
<p>MEDITATION CLASSES</p>
</div>
<div class="gallery-con-img">
<img src="../作业素材/images/03-06.jpg">
<p>KIDS PLAY GROUND</p>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="footer">
© 2016 imooc.com 京ICP备13046642号
</div>
</body>
</html>
正在回答 回答被采纳积分+1
<body> <!-- 顶部 --> <div class="header"> <div class="logo"> <a href="#"><img src="../作业素材/images/logo.png"></a> </div> <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> <!-- 主体 --> <!-- banner的三个内容:图片、表单、半透明这遮罩需要放在一个统一的盒子里面,例如banner-box --> <div class="banner-box"> <div class="banner"> <img src="../作业素材/images/banner3.jpg"> </div> <div class="topLayer"></div> <div class="banner-form"> <form method="post"> <input type="text" name="username" placeholder="your Name"><br> <input type="text" name="number" maxlength="11" placeholder="your Phone"><br> <input type="text" name="email" placeholder="your Email"><br> <textarea rows="4" cols="70" placeholder="Write Your Comment Here"></textarea><br> <input type="button" name="bt" value="SEND MESSAGE"> </form> </div> </div> <!-- about --> <div class="about"> <div class="about-top"> <h2>ABOUT</h2> <hr> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </div> <div class="about-middle"> <!-- 左侧开始 --> <div class="left-tit"> <h3>A WORD <br>ABOUT US</h3> <div class="left-word"> <p>Praesent dignissim viverra est, sed bibendum ligula congue non.Sed ac nisl et felis gravida commodo?Suspendisse eget ullamcorper ipsum.Suspendisse diam amet</p> <input type="button" value="EXPLORE"> </div> </div> <!-- 左侧结束 --> <!-- 中间开始 --> <div class="about-con"> <img src="../作业素材/images/bb3.jpg"> </div> <!-- 中间结束 --> <!-- 右侧开始 --> <div class="right-tit"> <div class="students"> <h3>70000</h3> <hr> <p>Students</p> </div> <div class="facululty"> <h3>600</h3> <hr> <p>Faculty</p> </div> </div> <!-- 右侧结束 --> <!-- </div> --> </div> <div style="clear:both"></div> <div class="about-bottom"> <div class="about-image"><img src="../作业素材/images/b1.jpg"></div> <div class="about-text"> <h3>Library</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span> <br> <input type="button" value="EXPLORE"> </div> <div class="about-image"><img src="../作业素材/images/b2.jpg"></div> <div class="about-text"> <h3>Library</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span> <br> <input type="button" value="EXPLORE"> </div> <div class="about-text"> <h3>Library</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span> <br> <input type="button" value="EXPLORE"> </div> <div class="about-image"><img src="../作业素材/images/b3.jpg"></div> <div class="about-text"> <h3>Library</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span> <br> <input type="button" value="EXPLORE"> </div> <div class="about-image"><img src="../作业素材/images/b4.jpg"></div> </div> </div> <div style="clear:both;"></div> <!-- gallery区 --> <div class="gallery"> <div class="about-top"> <h2>GALLERY</h2> <hr> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </div> <div class="gallery-con"> <div class="gallery-con-img"> <img src="../作业素材/images/03-01.jpg"> <p>SCIENCE LAB</p> </div> <div class="gallery-con-img"> <img src="../作业素材/images/03-02.jpg"> <p>INDOR STADIUM</p> </div> <div class="gallery-con-img"> <img src="../作业素材/images/03-03.jpg"> <p>TRANSPORTATION</p> </div> <div class="gallery-con-img"> <img src="../作业素材/images/03-04.jpg"> <p>KIDS ROOM</p> </div> <div class="gallery-con-img"> <img src="../作业素材/images/03-05.jpg"> <p>MEDITATION CLASSES</p> </div> <div class="gallery-con-img"> <img src="../作业素材/images/03-06.jpg"> <p>KIDS PLAY GROUND</p> </div> </div> </div> <div style="clear:both;"></div> <div class="footer"> © 2016 imooc.com 京ICP备13046642号 </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>网页布局作业</title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: Microsoft Yahei UI;
}
/*头部*/
.header {
width: 100%;
height: 80px;
background: #07CBC9;
position: fixed;
top: 0;
z-index: 999;
}
.logo {
float: left;
width: 260px;
height: 80px;
}
.logo img {
margin-left: 50px;
margin-top: 15px;
}
.header ul {
float: right;
margin-right: 50px;
}
.header ul li {
list-style: none;
margin-right: 20px;
float: left;
margin-right: 20px;
}
a {
line-height: 80px;
text-decoration: none;
color: white;
}
a:hover {
color: gray;
}
/*banner图*/
.banner-box{
width:100%;
position:relative;
margin-top:80px;
}
.banner img {
width: 100%;
height: 604px;
}
.topLayer {
background: #000000;
opacity: 0.5;
z-index: 1;
width: 100%;
height: 604px;
position: absolute;
top: 0;
}
.banner-form {
/* width: 500px;
height: 300px;*/
width: 560px;
height: 380px;
position: absolute;
/*top: 150px;*/
top:50%;
left: 50%;
margin-top:-190px;
margin-left: -250px;
z-index: 2;
text-align: center;
background: transparent;
color: #ffffff;
}
.banner-form input {
border: 2px solid gray;
width: 509px;
height: 43px;
margin: 10px;
color: #ffffff;
background: transparent;
}
.banner-form input:hover {
border: 2px solid #07cbc9;
}
.banner-form textarea {
margin-left: 11px;
height: 115px;
background: transparent;
border: 2px solid gray;
}
.banner-form textarea:hover {
border: 2px solid #07cbc9;
}
.banner-form input[type="button"] {
width: 124px;
height: 40px;
}
.banner-form input[type="button"]:hover {
border: none;
background: #07cbc9;
}
/*about区*/
.about {
width: 100%; height:700px;
position: relative;
}
.about-top {
width: 509px;
height: 150px;
margin: 0 auto;
text-align: center;
}
.about .about-top h2 {
margin: 50px 0 20px 0;
font-size: 30px;
}
.about-top p {
color: gray;
line-height: 1.5em;
}
.about .about-con {
/*width: 572px;*/
width:530px;
float:left;
height: 384px;
/*margin: 20px auto;*/
}
.about .about-con img {
/*width: 572px;*/
width:530px;
height: 384px;
}
.about-middle{
width: 1160px;
margin: 50px auto;
}
.left-tit {
width: 370px;
height: 384px;
float:left;
/*position: absolute;
top: 170px;
left: 200px;*/
position:relative;
left:50px;
}
.left-tit h3 {
font-size: 30px;
margin-bottom: 20px;
}
.left-tit .left-word {
width: 370px;
/*height: 250px;*/
height:210px;
line-height: 1.5em;
/*background: transparent;*/
/*opacity: 0.5;*/
/*color: #000 ;*//*结束符号是英文状态下的,你写成中文分号了*/
color: #000;
background:rgba(255,255,255,0.5);
padding:20px;
border: 1px solid #000;
font-weight: bold;
text-align: justify;
}
.left-tit .left-word p {
margin: 10px;
}
.left-tit .left-word input[type=button] {
width: 102px;
height: 45px;
background: #000;
color: #ffffff;
font-size: 20px;
text-align: center;
/*margin-top: 20px;*/
margin-left: 20px;
border: 1px solid #000;
}
.left-tit .left-word input[type=button]:hover {
background: transparent;
color: #000;
}
.right-tit{
width:240px;
float:right;
}
.right-tit .students,
.right-tit .facululty {
width: 238px;
height: 144px;
border: 1px solid #07cbc9;
/*margin-bottom: 20px;
position: absolute;
left: 780px;*/
text-align: center;
/*padding-top: 20px;*/
line-height:72px;
}
.right-tit .students hr,
.right-tit .facululty hr{
border:none;
width:80px;
height:2px;
margin:0 auto;
}
.right-tit .students {
/*top: 0;*/
margin-bottom: 20px;
}
.right-tit .facululty {
/*top: 180px;*/
}
/*添加*/
.about-bottom{
margin-top:100px;
}
.about-image img {
/*width: 337px;*/
height: 337px;
width:100%;
}
.about-image,
.about-text {
width: 25%;
height: 337px;
float: left;
text-align: justify;
color: #ffffff;
background: #07cbc9;
}
.about-text p,.about-text span,.about-text h3{
display:inline-block;
width:90%;
margin:5% 0 0 5%;
}
.about-text input[type=button] {
width: 102px;
height: 45px;
background: #000;
color: #ffffff;
font-size: 20px;
text-align: center;
margin-left: 125px;
margin-top: 50px;
border: 1px solid #000;
}
.about-text input[type=button]:hover {
background: transparent;
color: #000;
}
/*gallery区*/
.gallery {
width: 100%;
height: 770px;
margin-top: 40px;
margin-bottom: 40px;
}
hr {
width: 30px;
height: 4px;
border: none;
background-color: #07cbc9;
margin: 10px auto;
}
.gallery-con {
width: 1110px;
text-align: center;
margin: 0 auto;
}
.gallery-con-img img {
width: 360px;
height: 240px;
}
.gallery-con-img {
width: 360px;
height: 304px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
background: #000;
}
.gallery-con-img p {
text-align: left;
color: #ffffff;
line-height: 55px;
padding-left: 20px;
}
/*footer*/
.footer {
height: 80px;
width: 100%;
background: #07cbc9;
color: #ffffff;
z-index: 9999999;
line-height: 80px;
text-align: center;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="网页布局.css"> -->
</head>
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星