关于about部分的问题
来源：2-9 作业题
爱动脑筋的小伙伴
2019-02-12 15:55:54
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS网页布局</title> <link rel="stylesheet" type="text/css" href="index.CSS"> </head> <body> <!-- 头部 --> <div class="top"> <div class="header"> <div class="logo"> <img src="images/logo.png" alt="logo"> </div> <div class="nav"> <ul> <li>Home</li> <li>About</li> <li>Gallery</li> <li>Faculty</li> <li>Events</li> <li>Contact</li> </ul> </div> </div> </div> <!-- 主体 --> <div class="main"> <div class="banner"> <div><img src="images/banner3.jpg"></div> <div class="screen"></div> <form> <input class="input1" type="text" placeholder="your Name"><br> <input class="input1" type="text" placeholder="your Phone" ><br> <input class="input1" type="Email" placeholder="your Email"><br> <textarea placeholder="Write Your Comment Here " maxlength=120></textarea><br> <input class="input2" type="submit" value="SEND MESSAGE"> </form> <div class="clear"></div> </div> <div class="about"> <div class="about-block1"> <div class="tit-about"> ABOUT </div> <label class="blueline"></label> <div class="textbl"> Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry.Lorem Ipsum has been the industry's standard dummy <br>text ever since the 1500s. </div> </div> <div class="about-block2"> <div id="awau">A WORD<br>ABOUT US</div> <div class="explore-box"> <div class="explore-text"> Praesent dignissim 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. </div> <div class="explore-button">EXPlORE</div> <div class="bottom-layer"></div><!-- 如何解决白色半透明底部遮挡的问题 --> </div> <div><img src="images/bb3.jpg"></div> <div class="rightdata"> <div class="num">70000</div> <label class="blueline2"></label> Students </div> <div class="rightdata"> <div class="num">600</div> <label class="blueline2"></label> Faculty </div> </div> </div> </div> <!-- 底部 --> <div class="footer"></div> </body> </html>
*{
padding:0;
margin:0;
font-family: "Microsoft YaHei UI"
}
.top{
width: 100%;
height: 100px;
}
.header{
width: 100%;
height: 100px;
background-color: rgb(7,203,201);
position: fixed;
z-index: 3;
}
.clear{
clear: both;
}
.header img{
width:260px;
height:48px;
margin-left: 40px;
margin-top: 26px;
}
.logo{
float:left;
}
.nav{
float:right;
margin-right: 200px;
}
.nav ul li{
float:right;
list-style: none;
width: 80px;
height:100px;
line-height: 100px;
color: rgb(255,255,255);
font-weight: bold;
text-align: center;
}
.nav ul li:hover{
background-color: rgb(0,0,0);
cursor: pointer;
}
.banner{
overflow: hidden;
margin-bottom: 20px;
}
.banner img{
width:100%;
height: 800px;
}
.banner .screen{
position: absolute;
top:100px;
width:100%;
height: 800px;
background-color: rgb(0,0,0);
opacity: 0.5;
}
.banner form{
position: absolute;
left: 50%;
top: 310px;
margin-left: -250px;
width: 502px;
height: auto;
z-index: 1;
}
.banner form .input1{
border-style: solid;
border-width: 1px;
height: 40px;
width: 500px;
border-color: rgb(255,255,255);
color: rgb(255,255,255);
line-height: 40;
margin-top: 20px;
background-color: transparent;
}
.banner form textarea:hover{
border-color: rgb(7,203,201);
}
.banner .input1:hover{
border-color: rgb(7,203,201);
}
.banner form textarea{
border-style: solid;
border-width: 1px;
height: 120px;
width: 500px;
border-color: rgb(255,255,255);
color: rgb(255,255,255);
margin-top: 20px;
text-align: left;
resize: none;
background-color: transparent;
}
.banner form .input2{
border-style: solid;
border-width: 1px;
height: 50px;
width: 120px;
margin-left: 190px;
border-color: rgb(255,255,255);
color: rgb(255,255,255);
line-height: 50px;
margin-top: 20px;
background-color: transparent;
}
.banner form .input2:hover{
border-color: rgb(7,203,201);
background-color: rgb(7,203,201);
}
.about-block1{
width: 800px;
margin: 0 auto;
padding:20px 0;
}
.tit-about{
font-size: xx-large;
font-weight: bolder;
text-align: center;
margin-bottom: 10px;
}
.blueline {
background-color:#07cbc9;
display: block;
width: 40px;
height: 2px;
margin:15px auto;
}
.textbl{
text-align: center;
color: grey;
font-size: small;'
margin-bottom: 20px;
}
.about-block2{
width: 1000px;
margin: 0 auto;
padding-top: 20px;
position: relative;
}
#awau{
font-size: x-large;
float: left;
padding-right: 20px;
font-weight: normal;
text-align: center;
line-height: 40px;
position: relative;
left: 100px;
}
.explore-box{
border-style: solid;
border-color: grey;
border-width: 1px;
height: 250px;
width:300px;
position: absolute;
top:100px;
left: 50px;
float: left;
z-index: 1;
}
.explore-text{
opacity: 10;
margin-top: 30px;
margin-left:20px;
font-size: 14px;
line-height: 20px;
z-index: 100;
}
.explore-button{
margin-top: 20px;
margin-left: 20px;
padding:10px;
background-color: black;
color: white;
text-align: center;
width: 100px;
z-index: 100;
}
.explore-button:hover{
color:black;
background-color: white;
}
.bottom-layer{
width:100%;
height: 100%;
background-color:rgb(255,255,255);
position: absolute;
z-index: 0;
opacity: 0.5;
top: 0;
left: 0;
}
.about-block2 img{
width: 500px;
height: 380px;
position: absolute;
left: 250px;
z-index: -1;
}
.rightdata{
float: right;
margin-right: 70px;
margin-bottom: 30px;
border-color: rgb(7,203,201);
border-style: solid;
border-width: 1px;
height: 100px;
width: 150px;
text-align: center;
clear: right;
}
.blueline2{
background-color:#07cbc9;
display: block;
width: 40px;
height: 2px;
margin:10px auto;
}
.num{
margin-top: 16px;
font-weight: bold;
height: 20px;
}目前做到about区域，主要问题是explore这个框框，想增加白色半透明底层不成功，并且explore按钮的hover也实现不了~
写回答
1回答
-
你好同学，z-index元素需要配合绝对定位来使用的，否则是不会生效的，我针对同学的代码进行了修改，修订之后的代码如下，
修订之后的效果如下，祝学习愉快~
0
相似问题
about区域中间部分布局问题
回答 2
about区遮罩层优先级问题
回答 1