老师帮忙看下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 星