about区域定位混乱>_<#求解
每个区域的position是用relative还是absolute或者自然流定位呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="page">
<div class="top">
<div class="logo"><img src="images/logo.png" alt="logo"></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="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="banner">
<form>
<ul>
<li><input type="text" class="text" value="your Name"></li>
<li><input type="text" class="text" value="your Phone"></li>
<li><input type="text" class="text" value="your Email"></li>
<li><input type="textarea" class="textarea" value="Write Your Comment Here"></li>
<li><input type="button" class="button" value="SEND MESSAGE"></li>
</ul>
</form>
</div>
<div class="opacity"></div>
<div class="about">
<!-- about上部分图文混排区域 -->
<div class="top">
<div class="about-top-left">
<span>A WORD ABOUT US</span>
<div class="leftborder">
Parsent dignissim orem Ipsum is simply dummy text of the printting and typesetting industry.Lorem Ipsum has been the industry's stat
<input type="button" class="explore" value="EXPLORE">
</div>
</div>
<div class="about-top-middle">
<dl>
<dt><h1>ABOUT</h1></dt>
<dd>Lorem Ipsum is simply dummy text of the printting and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</dd>
<dd><img src="./images/bb3.jpg" alt="bb3"></dd>
</dl>
</div>
</div>
<!-- about-bottom八宫格区域 -->
<div class="about-bottom">
<div class="pic">
<img src="images/b1.jpg">
</div>
<div class="about_text">
<h1>Library</h1>
<p> LOrem Ipsum is simply dummy text of the printting and typesetting industry LOrem Ipsum is simply dummy text of the printting and typesetting industry</p>
<input type="button" class="explore" value="EXPLORE">
</div>
<div class="pic">
<img src="images/b2.jpg">
</div>
<div class="about_text">
<h1>Library</h1>
<p> LOrem Ipsum is simply dummy text of the printting and typesetting industry LOrem Ipsum is simply dummy text of the printting and typesetting industry</p>
<input type="button" class="explore" value="EXPLORE">
</div>
<div class="about_text">
<h1>Library</h1>
<p> LOrem Ipsum is simply dummy text of the printting and typesetting industry LOrem Ipsum is simply dummy text of the printting and typesetting industry</p>
<input type="button" class="explore" value="EXPLORE">
</div>
<div class="pic">
<img src="images/b3.jpg">
</div>
<div class="about_text">
<h1>Library</h1>
<p> LOrem Ipsum is simply dummy text of the printting and typesetting industry LOrem Ipsum is simply dummy text of the printting and typesetting industry</p>
<input type="button" class="explore" value="EXPLORE">
</div>
<div class="pic">
<img src="images/b4.jpg">
</div>
</div>
</div>
<div class="gallery">
</div>
<div class="footer">
© 2016 imooc.com 京ICP备13046642号
</div>
</div>
</body>
</html>
*{margin:0; padding: 0;
font-family:"Microsoft YaHei UI"}
.page{width:100%;color:#FFF; }
.page .top{
width:100%;
height:50px;
background: #07cbc9;
line-height: 50px;
position:fixed;
z-index:99;
}
.page .top .logo{
width:260px;
height:48px;
margin-left:130px;
float:left;
}
.page .top .nav{
margin-right:40px;
}
.page .top .nav ul{
list-style: none;
float:right;
line-height: 50px;
}
.page .top .nav ul li{
float:left;
padding-left:25px;
}
.page .top .nav ul li a{
text-decoration: none;
color:#FFF;
}
.page .banner{
width:100%;
height:800px;
background:url("images/banner3.jpg") no-repeat 100% 100%;
position: absolute;
top:50px;
z-index:50;
}
.page .opacity{
width:100%;
height:800px;
background:#000;
position: absolute;;
top:50px;
opacity:0.2;
z-index:1;
}
.page .banner ul{
text-align: center;
position: absolute;
z-index: 99;
margin:0 auto;
margin-top:300px;
display:block;
margin-left:35%;
line-height: 20px;
}
.page .banner ul li{
list-style: none;
padding-top:10px;
}
.text{
width:450px;
height:20px;
background: transparent;
color:#FFF;;
border:solid;
border-color:#FFF;
border-width: 2px;
padding:10px 0;
}
.textarea{
width:450px;
height: 120px;
border-color:#FFF;
border-width:2px;
border-style:solid;
background: transparent;
margin-top:20px;
color:#FFF;
}
.button{
width:120px;
height:40px;
border-color:#FFF;
border-width:2px;
border-style:solid;
background: transparent;
color:#FFF;
}
.about{
position: relative;
top:1000px;
}
.about .top {
position: relative;
left:200px;
}
.about .about-top-left{
position: relative;
width:30%;
top:850px;
left:400px;
float:left;
}
.about .about-top-left span{
color:#000;
font-size:1.5em;
}
.about .about-top-left .leftborder{
width:380px;
height:250px;
border:2px #999 solid;
color:#000;
position: relative;
padding-top:40px;
padding-left:20px;
font-size:1.3em;
}
.about .about-top-left .leftborder .explore{
position: absolute;
left:20px;
bottom:40px;
width:120px;
height:60px;
background: #000;
color:#FFF;
}
.about .about-top-middle{
position: relative;;
top:1200px;
left:400px;
margin:0 auto;
color:#000;
}
.about-top img{
margin-top:100px;
margin-left:450px;
float:left;
width:396px;
height:396px;
display:inline;
position: relative;
top:800px;
}
.about-bottom{
position: relative;
}
.about-bottom img{
width: 25%;
height:auto;
float:left;
}
.about-bottom .pic .about_text{
width:25%;
height:416px;
float:left;
}
.about-bottom .about_text{
width:25%;
height:416px;
background: #07cbc9;
float:left;
position: relative;
}
.about-bottom .about_text h1{
margin-top:15px;
margin-left:30px;
}
.about-bottom .about_text p{
margin-left:30px;
margin-top:40px;
}
.about_text .explore{
position: absolute;
top:300px; left:150px;
width:120px;
height:60px;
background: #000;
color:#FFF;
}
.page .footer{
width:100%;
height:50px;
background: #07cbc9;
line-height: 50px;
text-align: center;
position: relative;
top:3200px;
color:#FFF;
}
正在回答
你好同学 ,代码中banner区域和about区域用来太大定位 , 建议统一调整一下
top区域位置要固定在顶部 ,这是为了防止下面的内容设置间距后他会跟着一起下去
遮罩也是banner区域一部分 ,所以要放在banner盒子里面:
banner盒子不要设置绝对定位脱离文档流 ,给他设置一个相对定位 ,并设置上间距 ,让它不被顶部盖住
遮罩位置改为如下
about区域因为也在page里面 ,所以会受到下面样式影响
同学在设置类名的时候要注意 , 不同区域如果样式不一样 ,就不要设置相同的类名 , 这里建议修改一些类名
把about区域把所有的定位都去掉 ,主体内容都是在正常文档流中的 , 不需要脱离文档流 . 重新布局
思路:
about区域中间部分
设置一个大的div，设置固定宽度 , 例如1200px. 然后使用margin:0 auto设置这个div居中，注意这里的宽度要和GALLERY区的宽度一致，里面3个小的div，设置浮动使显示在一行。
然后如下的文本框建议使用background: rgba(0,0,0,0.5)实现遮罩效果 .并且文本框可以设置绝对定位 ,使部分在图片中显示 . 注意要设置文本框的父元素div相对定位 .使文本框参照其父元素定位
根据以上调整布局结构 , 慢慢来 ,不要着急 . 加油 !
祝学习愉快 ,望采纳 .
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星