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

<!DOCTYPE html>

<html>

<head>

<title>网页布局作业</title>

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>

</head>

<body>

</div>

<ul>

<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>

</div>

</form>

</div>

<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>

<h3>A WORD <br>ABOUT US</h3>

<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>

</div>

<p>Students</p>

</div>

<p>Faculty</p>

</div>

<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>

</div>

<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>

</div>

<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>

</div>

<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>

</div>

</div>

<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>

<p>SCIENCE LAB</p>

</div>

<p>INDOR STADIUM</p>

</div>

<p>TRANSPORTATION</p>

</div>

</div>

<p>MEDITATION CLASSES</p>

</div>

<p>KIDS PLAY GROUND</p>

</div>

</div>

</body>

</html>

慕尼黑3530425 2019-05-26

源自：项目：网页布局案例 2-10 作业题

收起

3回答

樱桃小胖子 2019-05-27 10:41:16

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

<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>

收起回答

提问者慕尼黑3530425 #1

我去再修改下

2019-05-27 10:54:04

樱桃小胖子 2019-05-27 10:41:01

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

<!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