老师为什么放大缩小浏览器以后A WORD ABOUT US这个字会被右面的图片挡上？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页布局作业</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-family: "Microsoft YaHei UI";
min-width: 800px;
}
.header{
width: 100%;
height: 60px;
background: #07cbc9;
}
.header .logo{
float:left;
height: 60px;
margin-left: 100px;
}
.header .logo img{
width: 200px;
height: 40px;
margin-top: 10px;
}
.header .nav ul{
float:right;
margin-right: 40px;
}
.header .nav ul li{
float: left;
height: 60px;
line-height: 60px;
font-size: 12px;
font-weight:bolder;
list-style: none;
padding:0 10px;
}
.header .nav ul li a{
color: #ffffff;
text-decoration: none;
}
.header .nav ul li:hover{
background: black;
}
.banner{
width: 100%;
overflow: hidden;
position: relative;
}
.banner img{
width: 100%;
height: 500px;
display: block;
}
.layer{
width: 100%;
height:500px;
background: #000;
opacity: 0.5;
float: left;
position: absolute;
top: 0px;
left: 0;
z-index: 3;
}
.banner form{
font-size:12px;
font-family: "微软雅黑"；
width: 440px;
height:340px;
font-color:#eee;
position: absolute;
top: 50%;
left: 50%;
margin-top:-170px;
margin-left:-210px;
z-index: 5;
}
form .text,form textarea{
width: 400px;
height: 30px;
border: 1px #808080 solid;
display: block;
padding: 2px 0 2px 10px;
margin:20px auto;
background: none;
color:#808080;
}
form textarea{
height: 70px;
}
form .submit{
width: 130px;
height: 40px;
border: 1px #808080 solid;
display: block;
padding: 2px 4px 2px 4px;
margin:20px 0;
background: none;
margin:0 auto;
font-size: 14px;
}
form .text:hover,form textarea:hover{
border: 1px #07cbc9 solid;
}
form .submit:hover{
background: #07cbc9;
border: 1px #07cbc9 solid;
}
.banner .clear{
width: 100%;
height:400px;
clear: both;
}
.about{
width: 100%;
}
.about .a-top{
width: 70%;
margin: 0 auto;
}
.about .a-top .toptitle{
font-size: 45px;
font-weight: bold;
text-align: center;
padding-top: 40px;
}
.about .a-top .topline{
width:40px;
height: 3px;
background: #07cbc9;
margin: 0 auto;
margin-top: 15px;
}
.about .a-top .topcontent{
font-size: 12px;
color:#797979;
text-align: center;
margin-top:20px;
}
.about .a-top .topcontent p{
padding:5px 0 5px 0;
}
.about .a-top .toppic{
margin-top: 30px;
width: 70%
height:300px;
position: relative;
}
.about .a-top .toppic .a-pic-left{
width:20%;
height:350px;
float: left;
}
.about .a-top .toppic .a-pic-left .word{
width: 200px;
height: 100px;
font-size: 35px;
text-align: center;
}
.about .a-top .toppic .a-pic-left .word-text{
width:360px;
height: 230px;
/* float: left;*/
/* background-color: #ffffff;
opacity:0.4;*/
border: 2px #c5c5c5 solid;
position: relative;
top: 0px;
z-index: 6;
}
.about .a-top .toppic .a-pic-left .word-text .textlayer{
width:360px;
height: 230px;
/* float: left;*/
background-color: #fff;
opacity:0.4;
position: absolute;
top: 0px;
z-index: 0;
}
.about .a-top .toppic .a-pic-left .word-text p{
font-size:16px;
color: #000;
margin: 30px 0 0 20px;
line-height: 25px;
position: relative;
top:0;
z-index: 6;
}
.about .a-top .toppic .a-pic-left .word-text button{
width: 100px;
height: 40px;
position: relative;
z-index: 6;
color: #fff;
background: #000;
border: none;
margin: 10px 0 0 20px;
}
.about .a-top .toppic .a-pic-left .word-text button:hover{
border: 2px #000 solid;
background: none;
color: #000;
cursor:pointer;
}
.about .a-top .toppic .a-pic-middle img{
width: 55%;
height: 350px;
float: left;
padding-left: 20px;
}
.about .a-top .toppic .a-pic-right{
width:20%;
height:350px;
background: pink;
float: right;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="logo">
<img src="images/logo.png">
</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="#">EVENTSE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<!-- banner区域 -->
<div class="banner">
<img src="images/banner3.jpg">
<!--遮罩层-->
<div class="layer"></div>
<!-- 表单信息 -->
<form method="post" action="save.php">
<input class="text" type="text" name="name" placeholder="your Name">
<input class="text" type="text" name="phone" placeholder="your Phone">
<input class="text" type="text" name="email" placeholder="your Email">
<textarea rows="height" cols="width" placeholder="Write Yout Comment Here"></textarea>
<input class="submit" type="submit" name="submit" value="SEND MESSAGE" style="color:#808080;">
</form>
</div>
<!-- about区域 （分两大部分）-->
<div class="about">
<div class="a-top">
<div class="toptitle">ABOUT</div>
<div class="topline"></div>
<div class="topcontent">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry.Lorem Ipsum has been the insustry's standard dummy</p>
<p>text evet since the 1500s</p>
</div>
<div class="toppic">
<div class="a-pic-left">
<div class="word">
<p>A WORD</br>
ABOUT US
</p>
</div>
<div class="word-text">
<div class="textlayer"></div>
<p>
Praesent dignissm viverra est,sed<br/>
bibendum ligula congue non.Sed ac nisl<br/>
et felis gravida commodo? Suspendisse<br/>
eget ullamcorper ipsum.Suspendisse<br/>
diam amet.
</p>
<button>EXPLORE</button>
</div>
</div>
<div class="a-pic-middle">
<img src="images/bb3.jpg">
</div>
<div class="a-pic-right"></div>
</div>
</div>
<div class="a-bottom"></div>
</div>
<!-- gallery区域 -->
<div class="GALLERY"></div>
<!-- 底部 -->
<div class="footer"></div>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星