老师我ABOUT区的图文混排不知道怎么写，写错的一塌糊涂。可以教下我吗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zuoye</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-family: Microsoft YaHei UI;}
.header{width: 100%;height: 80px;
background-color: #07cdc9
}
.logo{float: left;margin-left: 150px;width: 200px;}
.logo img{margin-top: 16px;}
.nav{float: right;margin-right: 100px;}
.nav li{display: inline-block;color: white;line-height: 80px;padding-left: 20px;font-style: weight;}
.banner img{width: 100%;height: 400px;margin-top: 0;position: relative;}
.kuang{position: absolute;left: 50%;top: 200px;}
.kuang input{width: 505px;height: 39px;margin: 10px 0;background: transparent;border: 1px solid gray;}
.about .h1{text-align: center;font-size: 50px;margin-top: 50px;margin-bottom: 25px;font-weight:bold;}
.about .line{width: 30px;margin-bottom: 25px;margin:0 auto;}
.about .h2{text-align: center;font-size: 15px;margin-top: 20px;}
.mid{width: 568px;height: 380px;margin:20px auto;position: relative;}
.mid img{width: 568px;height:380px;}
.stu{width: 238px;height: 144px;text-align: center;border: 1px solid #07cbc9;position: absolute;top: 0;right: -258px;}
.stu .stu1{font-size: 40px,font-weight:bolder;margin:20px;}
.stu hr{margin:0 auto;width: 30px;}
.stu .stu2{font-size: 25px;margin:20px;}
.stubox{width: 238px;height: 144px;text-align: center;border: 1px solid #07cbc9;position: absolute;top:174px;right: -258px;}
.stubox .stu1{font-size: 40px,font-weight:bolder;margin:20px;}
.stubox hr{margin:0 auto;width: 30px;}
.stubox .stu2{font-size: 25px;margin:20px;}
.mid .leftbox{position: absolute;top: 0;left: -270px;}
.mid .leftbox .leftbox2{border: 1px solid gray;width: 370px;height: 246px;position: relative;}
.mid .leftbox .leftbox2 .toplayer{width: 370px;height: 246px;background-color: gray;opacity: 0.05;position: absolute;top: 0;left: 0;}
.mid .leftbox .leftbox1{font-size: 20px;font-weight: bolder;}
.mid .leftbox .leftbox2 .text{margin: 20px 15px;}
.mid .leftbox .leftbox2 .button{width: 102px;height: 45px;background-color: ;color:white;margin: 10px 15px;text-align: center;font-size: 10px;}
.tuwen .tu img{width: 25%;height:350px; }
.tuwen .wen{width: 25%;height: 350px;background-color: #07cbc9}
.tuwen .shang{width: 100%;margin: 0 auto;}
.tuwen .xia{width:100%;margin: 0 auto; }
.tuwen .shang .tuwen1{float: left;width: 25%;}
.tuwen .xia .tuwen2{float:left;width: 25%}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="logo.png">
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>ECENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="banner">
<img src="banner3.jpg">
<div class="kuang">
<input type="text" name="baba" class="input1" placeholder="you name"><br>
<input type="text" name="baba" class="input1" placeholder="your phone"><br>
<input type="text" name="baba" class="input1" placeholder="you dsdasd"><br>
<input type="text" name="baba" class="input2" placeholder="asasfsagasgasg">
</div>
</div>
<div class="about">
<div class="h1">ABOUT</div>
<div class="line">
<hr color="#07cbc9" />
</div>
<div class="h2">lorem ipsum is simply dummy tex of the printing and typesetting <br>industry lorem insum has been the industrys standard dummy
<br> text ever since the 1550
</div>
</div>
<div class="mid">
<img src="bb3.jpg">
<div class="stu">
<div class="stu1">70000</div>
<hr color="#07cbc9">
<div class="stu2">students</div>
</div>
<div class="stubox">
<div class="stu1">600</div>
<hr color="#07cbc9">
<div class="stu2">Facuity</div>
</div>
<div class="leftbox">
<div class="leftbox1">A WORD<br>ABOUT US</div>
<div class="leftbox2">
<div class="text">
praesent dingsddim viverra est,sed<br>
bibendum ligula congue non.sad ca nisl<br>et felis gravida commodo ?suspendisse<br>eget ullamcorper ipsum.suspending<br>
diam amet.
</div>
<div class="button">
<button>EXPLORE</button>
</div>
<div class="toplayer"></div>
</div>
</div>
</div>
<div class="tuwen">
<div class="shang">
<div class="tuwen1"><img src="b1.jpg"></div>
<div class="tuwen1 wen">zxvzxvzxvzxv</div>
<div class="tuwen1 tu"><img src="b2.jpg"></div>
<div class="tuwen1 wen">zxvzxvzxvzxv</div>
</div>
<div class="xia">
<div class="tuwen2 tuwen2 wen ">zxvzxvzxvzxv</div>
<div class="tuwen2 tu"><img src="b3.jpg"></div>
<div class="tuwen2 wen">zxvzxvzxvzxv</div>
<div class="tuwen2 tu"><img src="b4.jpg"></div>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
你好同学，是说的about区域下部分内容吗？如下
思路如下：
(1) about区域下部分整体放在一个大div中 , 大div设置宽度100% ,高度自适应 ,并为它清除浮动。
(2) 大div下面有8个小div ,分别代表8个内容块 . 每个小div宽度设置25% , 高度可以适当设置固定的 ,例如400px左右 , 并设置左浮动
(3) 文字的小div设置蓝色背景 .
(4) 放图片的小div结合伪类设置三角图标 , 里面的图片宽高都设置100%
小三角的思路 ：当一个盒子宽高为0，只设置边框的时候，会发现边框是由四个小三角组成
所以你可以给其他角度的三角设置透明度，然后只留一个即可
参考如下:
可以在代码中给img嵌套一个div,命名为sj.然后可以在div的伪类上面去绘制，这样小三角就不用多写一个div了。然后使用定位，让它显示在要求的位置。
另外，about区域中间部分还是建议同学按照老师提供的思路去修改一下结构更好哦。
祝学习愉快，望采纳。
你好同学，about区域中间部分建议按照如下思路调整一下：
设置一个大的div，给它设置固定宽度 , 例如1200px. 然后使用margin:0 auto设置这个div居中，注意这里的宽度要和GALLERY区的宽度一致，里面3个小的div，三个小div分别放左中右三部分内容，并给它们都设置宽度与浮动。
然后如下的文本框建议使用background: rgba(255,255,255,0.5);实现遮罩效果 .并且文本框可以设置绝对定位 ,使部分在图片中显示 . 注意要设置文本框的父元素div相对定位 .使文本框参照其父元素定位
按照思路尝试改一改，如果做到哪一步不会了，在问答区域提问，老师会帮助解决的。
祝学习愉快，望采纳。
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星