老师帮忙看下about区中间排版怎么写和图文混排哪里错了,批作业的老师的代码实现不了

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

登陆购买课程后可参与讨论,去登陆

3回答
卡布琦诺 2019-05-27 10:41:16
<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>


卡布琦诺 2019-05-27 10:41:01
<!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>


卡布琦诺 2019-05-27 10:40:22

看了同学上面上传的代码和老师给出的批复文档,同学没有按照要求修改哦。老师在批复文档中,有进行标注about中间部分的html代码是需要进行调整的,但是同学上面上传的代码中确是没有调整的呢,希望可以帮到你!

  • 提问者 慕尼黑3530425 #1
    我是改了发现实现不了,就没改了,我就是想问有其他方式不
    2019-05-27 10:52:34
  • 卡布琦诺 回复 提问者 慕尼黑3530425 #2
    about中间的部分,按照正常的布局来实现,即从左到右布局,左侧是文字部分,中间是图片部分,右侧是数据部分,然后给三个盒子设置float使其在同一行显示,然后再调整细节即可,按照同学之前的html布局结构,先写中间的图片,再写左侧和右侧,使用绝对定位来实现,就特别容易出现错误,因为绝对定位会脱离文档流哦,加油,参考刚刚老师给出的方法在尝试一下,另外,banner部分老师也帮你修改了一下哦,有问题,可以再次提问,加油哦~
    2019-05-27 10:58:16
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师