老师请帮我看一下about的排版问题
来源：2-10 作业题
siegelions
2019-12-08 01:19:59
.about .top h2{
margin-top:20px;
text-align: center;
margin-bottom: 15px;
}
hr{
border: none;
width: 40px;
height:2px;
background: #07cbc9;
margin:0 auto;
}
.about .top .text1{
text-align: center;
color: #7d7d7d;
margin: 15px auto;
}
.about .middle{
height: 500px;
width: 100%;
position: relative;
}
.about .middle .zhong{
height: 380px;
width: 568px;
position: absolute;
top:50%;
margin-top: -200px;
left:50%;
margin-left: -284px;
}
.about .middle .zuo{
position: absolute;
left:22%;
top:27%;
}
.about .middle .zuo .zuotitile{
font-size: 30px;
font-weight: bolder;
}
.about .middle .zuo .zuotext{
width: 370px;
height:246px;
/* background: white;
opacity: 0.5; */
background: rgba(255,255,255,.5);
border:1px solid #7d7d7d;
}
.about .middle .zuo .zuotext .wenzi{
margin-left:20px;
margin-top:20px;
margin-bottom: 30px;
}
.about .middle .zuo button{
width: 102px;
height:45px;
background: black;
color: white;
margin-left:20px;
}
.students hr{
border: none;
width: 40px;
height:2px;
background: #07cbc9;
margin:0 auto;
}
.students{
width: 238px;
height:144px;
border:1px solid #07cbc9;
text-align: center;
font-size: 20px;
position: absolute;
right:15%;
top:0;
}
.faculty{
width: 238px;
height:144px;
border:1px solid #07cbc9;
text-align: center;
font-size: 20px;
position: absolute;
right:15%;
top:48%;
}
.clear{
clear: both;
}
.about .bottom{
width: 100%;
/* height:800px; */
}
.about .bottom .bgc{
background: #07cbc9;
}
.about .bottom .line1 .kuai{
float: left;
width:25%;
height:400px;
}
.about .bottom .line2 .kuai{
float: left;
width:25%;
height:400px;
}
<body>
<div class="header">
<div class="logo"><a href="#"><img src="images/logo.png" ></a></div>
<div class="nav">
<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="#">CONTACT</a></li>
</ul>
</div>
</div>
<!-- <div class="clear"></div> -->
<div class="main">
<div class="banner">
<img src="images/banner3.jpg" alt="">
</div>
<!-- 遮罩层 -->
<div class="layer"></div>
<!-- 遮罩层 上面-->
<div class="layer-top">
<form >
<input type="text" placeholder="you Name" class="form-in" /><br>
<input type="text" placeholder="you Phone" class="form-in"/><br>
<input type="text" placeholder="you Email" class="form-in"/><br>
<textarea rows="4" cols="55" placeholder="When Your Comment Here" class="form-in1"></textarea><br>
<input type="submit" value="SEND MESSAGE" class="button" >
</form>
</div>
<div class="about">
<div class="top">
<h2>ABOUT</h2>
<hr/>
<div class="text1">Lorem ipsum is simply dummpy text of the printing and typesetting <br>industy. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s.</div>
</hr>
</div>
<div class="middle">
<div class="zhong">
<img src="images/bb3.jpg" alt="">
</div>
<div class="zuo">
<div class="zuotitile">A WORD<br>AOBUT US</div>
<div class="zuotext">
<div class="wenzi">Lorem Ipsum has been the industry's<br/>
standard dummy text ever since the<br/>
1500s, when an unknown printer took<br/>
galley of type and scrambled it to<br/>
make a yupe specimen book.<br/></div>
<button>EXPLORE</button>
</div>
</div>
<div class="you">
<div class="students"><b>7000</b><hr>students</div>
<div class="faculty"><b>600</b><br><hr>faculty</div>
</div>
</div>
<div class="bottom">
<div class="line1">
<div class="kuai"><img src="images/b1.jpg" alt=""></div>
<div class="bgc kuai"></div>
<div class="kuai"><img src="images/b2.jpg" alt=""></div>
<div class="bgc kuai"></div></div>
</div>
<div class="line2">
<div class="bgc kuai"></div>
<div class="kuai"><img src="images/b3.jpg" alt=""></div>
<div class="bgc kuai"></div></div>
<div class="kuai"><img src="images/b4.jpg" alt=""></div>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
1回答
-
好帮手慕夭夭
2019-12-08
同学你好，代码的问题与修改如下：
1.中间区域
定位元素参照离它最近的已定位祖先元素，这里离蓝色盒子最近的定位祖先元素是middle，即参照middle进行位置偏移，所以位置就不太好了。
这里使用浮动更简单，建议调整如下：
中间的盒子在结构中调整一下，如下放在div.zuo后面
整体的盒子设置固定宽度并居中，三个盒子同时设置浮动，显示在一行
3.下部分区域
图片不设置宽度，默认显示原图，所以它不能平铺父容器。
如下调整：
图片上面的小三角绘制思路：
思路：
当一个盒子宽高为0，只设置边框的时候，会发现边框是由四个小三角组成
所以可以给其他角度的三角设置透明度，然后只留一个即可
参考如下:
给img父元素div设置一个类名 ,命名为sj. 然后在div的伪类上面去绘制，这样小三角就不用多写一个div了。然后使用定位，让它显示在要求的位置。
代码参考
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题