页脚区不显示，About区的图片上方文字所在的div没用透明效果

页脚区不显示，About区的图片上方文字所在的div没用透明效果

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="js/zuoye.js"></script>

<link rel="stylesheet" type="text/css" href="css/zuoye.css">

<title></title>

</head>

<body>

<div class="header">

<div class="logo">

<img src="images/logo.png">

</div>

<div class="menu" onmouseup="show_changebgcolor()">

<a href="#">HOME</a>

<a href="#">ABOUT</a>

<a href="#">GALLERY</a>

<a href="#">FACULTY</a>

<a href="#">EVENT</a>

<a href="#">COUNTACT</a>

</div>

</div>

<div class="content">

<div class="banner"><img src="images/banner3.jpg"></div>

<div class="box">

<form>

<input type="text" name="Name" value="your Name">

<input type="text" name="Phone" value="your Phone">

<input type="text" name="Email" value="your Email">

<textarea rows="7" cols="10" placeholder="Write Your Comment Here" name="Comment"></textarea>

<input type="submit" name="submit" value="SEND MESSAGE" onclick="sub_changebgcolor()">

</form>

<div class="about">

<div class="about-font">

<h1>ABOUT</h1>

<label class="about-line"></label>

<p>Lorem ipsum is simply dummy text of the printing and typesetting</p>

<p>industry. Lorem lpsum has been the industry's standard dummy</p>

<p>text ever since the 1500s.</p>

</div>

<div class="about-middle">

<div class="img-bb3">

<img src="images/bb3.jpg">

</div>

<div class="banner-left">

<h2>A WORD</h2>

<h2>ABOUT US</h2>

<div class="banner-fontleft">

<p>Praesent dinissim viverra est,sed bibendum ligula congua non.Sed ac  nislet felis gravida commodo? Suspendisse eget ullamcorper ipsum.Suspendisse diam amet</p>

</div>

<input type="button" name="" value="EXPLDRE">

</div>

<div class="banner-right">

<div class="box-7000">

<h1>70000</h1>

<label class="about-line"></label>

<h3>Students</h3>

</div>

<div class="box-600">

<h1>600</h1>

<label class="about-line"></label>

<h3>Faculty</h3>

</div>

</div>

</div>

<div class="about-last">

<div class="img-b1"><img src="images/b1.jpg"></div>

<div class="about-last-font">

<p class="about-last-font1">Library</p>

<p class="about-last-font2">Lorem Ipsum is simply du,,y text of the peinting and typesetting industry</p>

<p class="about-last-font3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took agalley of typr and scrambled it to make a type specimen book.</p>

<input type="button" name="" value="EXPLDRE">

</div>

<div class="img-b1"><img src="images/b2.jpg"></div>

<div class="about-last-font">

<p class="about-last-font1">Library</p>

<p class="about-last-font2">Lorem Ipsum is simply du,,y text of the peinting and typesetting industry</p>

<p class="about-last-font3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took agalley of typr and scrambled it to make a type specimen book.</p>

<input type="button" name="" value="EXPLDRE">

</div>

<div class="about-last-font">

<p class="about-last-font1">Library</p>

<p class="about-last-font2">Lorem Ipsum is simply du,,y text of the peinting and typesetting industry</p>

<p class="about-last-font3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took agalley of typr and scrambled it to make a type specimen book.</p>

<input type="button" name="" value="EXPLDRE">

</div>

<div class="img-b1"><img src="images/b3.jpg"></div>

<div class="about-last-font">

<p class="about-last-font1">Library</p>

<p class="about-last-font2">Lorem Ipsum is simply du,,y text of the peinting and typesetting industry</p>

<p class="about-last-font3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took agalley of typr and scrambled it to make a type specimen book.</p>

<input type="button" name="" value="EXPLDRE">

</div>

<div class="img-b1"><img src="images/b4.jpg"></div>

</div>

</div>

<div class="GALLERY">

<div class="about-font">

<h1>ABOUT</h1>

<label class="about-line"></label>

<p>Lorem ipsum is simply dummy text of the printing and typesetting</p>

<p>industry. Lorem lpsum has been the industry's standard dummy</p>

<p>text ever since the 1500s.</p>

</div>

<div class="GALLERY-img">

<div class="img-01">

<div class="img-03">

<img src="images/03-01.jpg">

<p><span class="span1">SCIENCE LAB</span></p>

</div>

<div class="img-03">

<img src="images/03-02.jpg">

<p><span class="span1">INDOOR STADIUM</span></p>

</div>

<div class="img-03">

<img src="images/03-03.jpg">

<p><span class="span1">TRANSPORTATION</span></p>

</div>

</div>

<div class="img-01">

<div class="img-03">

<img src="images/03-04.jpg">

<p><span class="span2">KIDS ROOM</span></p>

</div>

<div class="img-03">

<img src="images/03-05.jpg">

<p><span class="span2">MEDITATION CLASSES</span></p>

</div>

<div class="img-03">

<img src="images/03-06.jpg">

<p><span class="span2">KIDS PLAY GROUND</span></p>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="footer">

<p><span>@ 2016 imooc.com 京ICP备13046642号</span></p>

</div>

</body>

</html>



*{

margin:0px;

padding:0px;

}

.header{

position:fixed;

width:100%;

height:55px;

background-color:#07cbc9;

z-index:100;

}

.header .logo{

margin-top: 2px;

margin-left: 100px;

float:left;

}

.header .menu {

float:right;

}


a{

float:left;

line-height:55px;

width:80px;

text-align: center;

margin-right: 20px;

color:white;

text-decoration:none;

display:block;

}

.header .menu a:hover{

background-color:black;

}

.content .banner img{

width:100%;

}

form{

width:50%;

height:800px;

position:absolute;

margin-top: -700px;

margin-left: 720px;

opacity:0.5;

}

input[type="text"]{

width:50%;

height:30px;

margin-top: 10px;

}

input[type="text"]:hover{

border:1px solid #07cbc9;

}

textarea:hover{

border:1px solid #07cbc9;

}

textarea{

width:50%;

margin-top: 10px;


}

input[type="submit"]{


height:30px;

width:20%;

position:relative;

top:30px;

left: -350px; 

margin-top: 10px;

}

input[type="submit"]:hover{

background-color:#07cbc9;

border:1px solid #07cbc9;

}

.about-font h1{

margin-top: 50px;

text-align: center;

font-family:Arial;

}

.about-line{

background-color: #07cbc9;

display:block;

width:30px;

height:2px;

margin:15px auto;

}

.about-font p{

text-align: center;

color:#ccc;

line-height:25px;

}

.about-middle{

width:1050px;

height:500px;

right:50%;

position:absolute;

margin-right:-500px;

}

.img-bb3{

width:300px;

right:50%;

position:absolute;

}

h2{

font-family:Arial;

font-size:30px;

font-weight:normal;

margin-left:-5px;


}

.banner-fontleft p{

width:270px;

height:30%;

margin-left: 15px;

line-height:20px;

}

.banner-left input[type="button"]{

width:70px;

height:30px;

background-color:black;

color:white;

border:none;

text-align: center;

top:180px;

position:absolute;

}

.banner-left input[type="button"]:hover{

border:1px solid black;

color:black;

background-color:transparent;

}

.banner-fontleft{

width:300px;

height:150px;

border:1px solid #ccc;

rgba(255, 255, 255, 0.4);

opacity:0.5;

margin-left:-23px;

}

.banner-left{

height:800px;

position:absolute;

}

.banner-right{

float:right;

margin-top: -15px;

}

.box-7000,.box-600{

width:150px;

height:130px;

border:1px solid #07cbc9;

text-align:center;

margin:15px auto;

}

h1{

text-align: center;

font-family:Arial;

margin-top: 20px;

}

h3{

text-align: center;

font-family:Arial;

font-weight:normal;

}

.about-last{

width:100%

;

margin-top:500px;

} 

.img-b1 img{

float:left;

width:25%;

}

.about-last-font{

float:left;

width:25%;

height:475px;

background-color:#07cbc9;


}

.about-last-font1{

line-height:50px;

font-size:30px;

color:white;

margin-left: 35px;

margin-top:15px;

}

.about-last-font2{

line-height:50px;

font-size:10px;

color:white;

opacity:0.9;

margin-left: 35px;

}

.about-last-font3{

line-height:50px;

font-size:10px;

color:white;

opacity:0.5;

margin-left: 35px;

}

.GALLERY{

float:left;

width:100%;

}

.GALLERY-img{

width:1200px;

height:550px;

left: 20%;

position:absolute;

}

.img-03{

float:left;

margin-right: 20px;

margin-bottom: 20px;

}


.img-03 p{

width:360px;

height:50px;

background-color:black;

color:white;

margin-top: -5px;

}


.img-03 p .span1{

top:255px;

position:absolute;

}

.img-03 p .span2{

top:562px;

position:absolute;

}

.footer{


width:100%;

height:55px;

margin:25px auto;

background-color:blue;

}

.about-last .about-last-font input[type="button"]{

width:70px;

height:30px;

background-color:black;

color:white;

border:none;

text-align: center;

margin-top:30px;

margin-left:220px;

}

.about-last .about-last-font input[type="button"]:hover{

border:1px solid black;

color:white;

background-color:transparent;

}

根据作业提示添加了rgba(255, 255, 255, 0.4);没用透明效果；页脚没有效果显示，margin-top和padding-top和top好像都能改变与上边距的距离，他们有什么区别吗？是不是都要和position一起用？http://img1.sycdn.imooc.com//climg/5df2ed56099167d010330501.jpg
慕的地2082093 2019-12-13
源自：前端油画商城案例   4-3 项目作业
15
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕酷酷 2019-12-13 14:56:18

同学你好，不是这样的，你的理解有些偏差，这里相对位置是指相对于页面本身不加相对位置时，所处的位置，不添加相对定位置时，原来的位置是在如下位置：

http://img1.sycdn.imooc.com//climg/5df335270996a50414500305.jpg

top：630px是指具体定位到距离上述原位置顶部，下面 630 像素的地方。

不会因为刷新而改变定位位置的！

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

0
收起回答
好帮手慕酷酷 2019-12-13 14:01:20

同学你好，可以按照如下方式修改：

1、添加了rgba(255, 255, 255, 0.4);没用透明效果

应该是设置背景颜色为透明效果，具体如下：

http://img1.sycdn.imooc.com//climg/5df32371096fa40405990266.jpg

2、页脚没有效果显示

这里同学应该为页脚清除上面的浮动，设置相对定位，上下外边距设置为0px，具体如下：

http://img1.sycdn.imooc.com//climg/5df32692092175cd04050160.jpg

然后在进行设置页脚部分，文本内容垂直水平居中显示的效果。

3、margin-top和padding-top和top好像都能改变与上边距的距离，他们有什么区别吗？是不是都要和position一起用？

区别：

padding-top 是指容器内的内容距离容器的顶部的距离，是包含在容器内的。
margin-top 是指容器本身的顶部距离其他容器的距离，不包含在容器内；
top 是指定位容器的距离顶部边缘的位置

简单来说，margin设置的是两个div之间的距离，padding设置一个div自身内容和边框的距离，top是通过定位改变容器的具体位置。

top需要和position一起使用，padding-top 和margin-top需要根据页面样式进行选择使用。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

0
收起回答
  • 提问者 慕的地2082093 #1
    设置定位中，position：relative为相对定位，然后设置top：630px刷新后在底部，老师相对定位相对自己上次的位置，设置后刷新在底部，然后再次刷新不是应该比原来底部的位置还要下去吗？为什么会包持不变？
    2019-12-13 14:29:07
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

about区域的定位在不同显示器下差距很大
43 0 3
老师，怎样使背景变为半透明但文字可以正常显示
21 0 4
about区图文混排
7 0 5
2-9作业问题
26 0 4
背景图片的显示方式
0 1 3

登录后可查看更多问答，登录/注册

2. 从网页搭建入门JavaWeb
  • 参与学习           人
  • 提交作业       676    份
  • 解答问题       9666    个

本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！

了解课程

本课精华内容

问答 作业

4-3个人程序源码，提供给各位参考！

63 1

2-4 编程练习

22 1

text-align和direction有什么区别

13 1

交作业交作业交作业

225 2

是不是只有在JS语言中局部变量的定义才可以放在else语句中

24 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师