class="footer"的页脚div是通过posit定位硬移下去的，没看出问题，请老师指导一下

class="footer"的页脚div是通过posit定位硬移下去的，没看出问题，请老师指导一下

class="footer"的页脚div是通过posit定位硬移下去的，不知道为什么不在页脚，没看出问题，请老师指导一下


html代码

<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>career builder</title>

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

</head>


<body>

<div class="header clearfix">

<div class="logo">

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

</div>

<div class="nav">

<ul class="clearfix">

<li>HOME</li>

<li>ABOUT</li>

<li>GALLERY</li>

<li>FACULTY</li>

<li>EVENTS</li>

<li>CONTACT</li>

</ul>

</div>

</div>

<div class="container clearfix">

<div class="banner">

<div class="shade"></div>

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

<div class="form">

<form>

<input type="text" name="userName" placeholder="your Name" />

<br>

<input type="number" name="phoneNumber" placeholder="your Phone" />

<br>

<input type="email" name="userEmail" placeholder="your Email" />

<br>

<input type="text" name="comment" placeholder="Write Your Comment Here" class="comment" />

<br>

<input type="submit" name="submit" value="SEND" class="submit" />

</form>

</div>

</div>

<div class="about">

<div class="top">

<div class="topTitle">ABOUT</div>

<div class="squre"></div>

<div class="titleMore">Lorem ipsum ipssssdolor sit amet, consectetur adipisicing elismod tempor incididunt ut labore et dolore magna

aliqu Utliquip ex ea commodo consequat. </div>

</div>

<div class="main clearfix">

<div class="left">

<div class="leftTitle">

A WORD

<br> ABOUT US

</div>

<div class="leftBtn">

<div class="text">Lorem ipsum dolor sit amor incididunt ut laboror incididunt ut laboret, consectetur adipisicing elismod

tempor incididunt ut labore et do</div>

<button>EXPLORE</button>

<div>

<div class="textShade"></div>

</div>

</div>

</div>

<div class="middle">

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

</div>

<div class="right">

<div class="squreOne">

<div class="topTitleOne">70000</div>

<div class="squre"></div>

<div class="titleMoreOne">Students</div>

</div>

<div class="squreTwo">

<div class="topTitleOne">600</div>

<div class="squre"></div>

<div class="titleMoreOne">Faculty</div>

</div>

</div>

</div>

<div class="bottom clearfix">

<div class="img11">

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

</div>

<div class="explore1">

<div class="exploreContent">

<h2>Library</h2>

<dl>

<dt>Lorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit a</dt>

<dd>Lorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit aLorem

ipsum ipssssdolor sit a</dd>

</dl>

<div class="exploreBtn">

EXPLORE

</div>

</div>

</div>

<div class="img12">

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

</div>

<div class="explore2">

<div class="exploreContent">

<h2>Computer Lab</h2>

<dl>

<dt>Lorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit a</dt>

<dd>Lorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit aLorem

ipsum ipssssdolor sit a</dd>

</dl>

<div class="exploreBtn">

EXPLORE

</div>

</div>

</div>

<div class="explore3">

<div class="exploreContent">

<h2>Conference Hail</h2>

<dl>

<dt>Lorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit a</dt>

<dd>Lorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit aLorem

ipsum ipssssdolor sit a</dd>

</dl>

<div class="exploreBtn">

EXPLORE

</div>

</div>

</div>

<div class="img13">

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

</div>

<div class="explore4">

<div class="exploreContent">

<h2>Play Ground</h2>

<dl>

<dt>Lorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit a</dt>

<dd>Lorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit aLorem ipsum ipssssdolor sit aLorem

ipsum ipssssdolor sit a</dd>

</dl>

<div class="exploreBtn">

EXPLORE

</div>

</div>

</div>

<div class="img14">

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

</div>

</div>

</div>

<div class="gallery">

<div class="galleryTitle">

<div class="topTitle">GALLERY</div>

<div class="squre"></div>

<div class="titleMore">Lorem ipsum ipssssdolor sit amet, consectetur adipisicing elismod tempor incididunt ut labore et dolore magna

aliqu Utliquip ex ea commodo consequat. </div>

</div>

<div class="galleryPic clearfix">

<div class="pic">

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

<div class="img0301">SCIENCEC LAB</div>

</div>

<div class="pic">

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

<div class="img0301">INDOOR STADIUM</div>

</div>

<div class="pic">

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

<div class="img0301">TRANSPORTATION</div>

</div>

<div class="pic">

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

<div class="img0301">KIDS ROOM</div>

</div>

<div class="pic">

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

<div class="img0301">MIDITATION CLASSES</div>

</div>

<div class="pic">

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

<div class="img0301">KIDS PLAY GROUND</div>

</div>

</div>

</div>

</div>

<div class="footer">

&copy;2016 imooc.com 京ICP备13046642号

</div>

</body>


</html>


css代码

* {

margin: 0;

padding: 0;

}


.clearfix:afetr {

content: ".";

display: block;

height: 0;

visibility: hidden;

clear: both;

}


.clearfix {

zoom: 1;

}


body {

min-width: 100px;

}


ul li {

list-style: none;

}


.header {

width: 100%;

height: 63px;

background: #07cbc9;

text-align: center;

line-height: 48px;

}


.header .logo {

float: left;

}


.header .logo img {

width: 205px;

height: 36px;

line-height: 63px;

padding-top: 9px;

margin-left: 116px;

}


.header .nav {

float: right;

margin-right: 80px;

line-height: 63px;

}


.header .nav ul li {

float: left;

padding-right: 20px;

color: #fff;

font-size: 4px;

}


.container {

width: 100%;

height: 450px;

background: #07cbc9;

}


.banner {

width: 100%;

height: 450px;

}


.banner img {

width: 100%;

height: 450px;

}


.banner .shade {

position: absolute;

top: 63px;

left: 0;

background: #000;

opacity: 0.5;

width: 100%;

height: 450px;

}


.banner form {

width: 380px;

height: 292px;

position: absolute;

top: 148px;

right: 50%;

margin-right: -190px;

}


.banner form input {

width: 370px;

height: 30px;

margin-bottom: 15px;

padding-left: 10px;

border: 1px solid #808080;

background-color: transparent;

/* opacity: 0; */

}


.banner form .comment {

width: 370px;

height: 86px;

text-align: start;

margin-bottom: 19px;

border: 1px solid #808080;

}


.banner form .submit {

width: 92px;

height: 30px;

border: 1px solid #808080;

position: absolute;

left: 50%;

margin-left: -46px;

margin-bottom: none;

color: #808080;

font-size: 6px;

}


.about {

width: 100%;

height: 1147px;

margin: 0 auto;

}


.about .top {

margin-top: 48px;

margin-bottom: 28px;

position: relative;

}


.about .top .topTitle {

font-family: Microsoft YaHei UI;

font-size: 44px;

font-weight: 900;

text-align: center;

color: #000;

margin-bottom: 20px;

}


.about .top .squre {

width: 30px;

height: 2px;

background: #07cbc9;

margin-bottom: 15px;

position: absolute;

left: 50%;

margin-left: -15px;

}


.about .top .titleMore {

width: 24%;

text-align: center;

color: #797979;

line-height: 20px;

font-size: 12px;

margin: 0 auto;

padding-top: 15px;

}


.about .main {

/* position: relative; */

margin-bottom: 60px;

}


/* .about .main .left,

.about .main .middle,

.about .main .right {

   float: left;

} */


.about .main .middle {

width: 431px;

height: 285px;

margin: 0 auto;

position: relative;

top: 0;

left: 222px;

display: inline-block;

}


.about .main .middle img {

width: 431px;

height: 285px;

z-index: -1;

}


.about .main .left {

position: relative;

top: -24px;

left: 305px;

display: inline-block;

z-index: 1;

}


.about .main .left .leftTitle {

letter-spacing: 0.2em;

font-size: 24px;

text-align: center;

position: absolute;

left: 6px;

top: -74px;

}


.about .main .left .leftBtn {

width: 278px;

height: 186px;

position: relative;

}


.about .main .left .leftBtn .text {

font-size: 13px;

color: #000;

line-height: 20px;

padding: 22px;

padding-bottom: 0;

position: absolute;

z-index: 2;

}


.about .main .left .leftBtn button {

width: 80px;

height: 36px;

text-align: center;

line-height: 36px;

font-size: 12px;

font-weight: thiner;

background: #000;

color: #fff;

margin-left: 22px;

margin-top: 132px;

position: absolute;

z-index: 2;

}


.about .main .left .leftBtn .textShade {

width: 278px;

height: 186px;

border: 1px solid #C5C5C5;

background-color: rgba(255, 255, 255, 0.4);

position: absolute;

top: 0;

left: 0;

}


.about .main .right {

position: relative;

top: -65px;

right: -240px;

display: inline-block;

}


.about .main .right .squreOne,

.about .main .right .squreTwo {

width: 179px;

height: 107px;

border: 1px solid #07cbc9;

position: relative;

}


.about .main .right .squreOne {

margin-bottom: 23px;

}


.about .main .right .squreOne .topTitleOne,

.about .main .right .squreTwo .topTitleOne {

font-family: Microsoft YaHei UI;

font-size: 26px;

font-weight: 600;

text-align: center;

color: #000;

margin: 15px 0 10px 0;

}


.about .main .right .squreOne .squre,

.about .main .right .squreTwo .squre {

width: 30px;

height: 2px;

background: #07cbc9;

margin-bottom: 10px;

position: absolute;

left: 50%;

margin-left: -15px;

}


.about .main .right .squreOne .titleMoreOne,

.about .main .right .squreTwo .titleMoreOne {

text-align: center;

color: #222;

line-height: 20px;

font-size: 14px;

margin: 0 auto;

padding-top: 10px;

}


.about .bottom {

width: 100%;

height: 596px;

}


.about .bottom .img11,

.about .bottom .img12,

.about .bottom .img13,

.about .bottom .img14,

.about .bottom .explore1,

.about .bottom .explore2,

.about .bottom .explore3,

.about .bottom .explore4 {

width: 25%;

height: 298px;

float: left;

background: #07cbc9;

}


.about .bottom .img11 img,

.about .bottom .img12 img,

.about .bottom .img13 img,

.about .bottom .img14 img {

width: 100%;

height: 298px;

}


.about .bottom .explore1 .exploreContent,

.about .bottom .explore2 .exploreContent,

.about .bottom .explore3 .exploreContent,

.about .bottom .explore4 .exploreContent {

padding: 28px 56px;

color: #fff;

position: relative;

}


.about .bottom .explore1 .exploreContent h2,

.about .bottom .explore2 .exploreContent h2,

.about .bottom .explore3 .exploreContent h2,

.about .bottom .explore4 .exploreContent h2 {

font-weight: 100;

margin-bottom: 16px;

line-height: 28px;

}


.about .bottom .explore1 .exploreContent dl dt,

.about .bottom .explore2 .exploreContent dl dt,

.about .bottom .explore3 .exploreContent dl dt,

.about .bottom .explore4 .exploreContent dl dt {

font-size: 14px;

margin-bottom: 10px;

line-height: 24px;

;

}


.about .bottom .explore1 .exploreContent dl dd,

.about .bottom .explore2 .exploreContent dl dd,

.about .bottom .explore3 .exploreContent dl dd,

.about .bottom .explore4 .exploreContent dl dd {

font-size: 8px;

margin-bottom: 10px;

line-height: 17px;

color: #DDD9D4;

}


.about .bottom .explore1 .exploreContent .exploreBtn,

.about .bottom .explore2 .exploreContent .exploreBtn,

.about .bottom .explore3 .exploreContent .exploreBtn,

.about .bottom .explore4 .exploreContent .exploreBtn {

width: 80px;

height: 32px;

text-align: center;

line-height: 32px;

font-size: 8px;

font-weight: 100;

background: #000;

color: #fff;

position: absolute;

bottom: -16px;

left: 50%;

margin-left: -40px;

}


.gallery{

position: relative;

width: 100%;

height: 728px;

margin: 0 auto;

/* margin-bottom: 60px; */


}

.gallery .galleryTitle {

margin-top: 48px;

margin-bottom: 28px;

position: relative;

}


.gallery .galleryTitle .topTitle {

font-family: Microsoft YaHei UI;

font-size: 44px;

font-weight: 900;

text-align: center;

color: #000;

margin-bottom: 20px;

}


.gallery .galleryTitle .squre {

width: 30px;

height: 2px;

background: #07cbc9;

margin-bottom: 15px;

position: absolute;

left: 50%;

margin-left: -15px;

}


.gallery .galleryTitle .titleMore {

width: 24%;

text-align: center;

color: #797979;

line-height: 20px;

font-size: 12px;

margin: 0 auto;

padding-top: 15px;

}


.gallery .galleryPic{

width: 870px;

height: 496px;

position: absolute;

top:180px;

left:276px;

/* transform: translateX(-50%) translateY(-50%); */

}

.gallery .galleryPic .pic {

float: left;

padding: 10px;

}


.gallery .galleryPic .pic img {

width: 270px;

height: 180px;

}


.gallery .galleryPic .pic .img0301,

.gallery .galleryPic .pic .img0302,

.gallery .galleryPic .pic .img0303,

.gallery .galleryPic .pic .img0304,

.gallery .galleryPic .pic .img0305,

.gallery .galleryPic .pic .img0306 {

width: 260px;

height: 48px;

background: #000;

color: #fff;

padding-left: 10px;

text-align: left;

line-height: 48px;

font-size: 8px;

margin-top: -5px;

}


.footer{

width: 100%;

height: 80px;

line-height: 80px;

text-align: center;

color: #fff;

background: #07cbc9;

position: relative;

top: 1950px;

left: 0;

font-size: 12px;

}
zoha 2018-07-28
源自：项目：网页布局案例   2-10 作业题
0
收起

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

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

1回答
妮可妮可妮_ 2018-07-29 16:12:14 
.clearfix::after {

content: ".";

display: block;

height: 0;

visibility: hidden;

clear: both;

overflow: hidden;

}

单词拼写错误

因为内部都是使用定位完成的,clearfix只能清除浮动带来的影响,并不能清除使用定位脱离文档流的影响,所以你的作业思路有点小问题哦~建议将作业打包提交,专门批改作业的老师会给你专业的建议哦~

0
收起回答
  • 提问者 zoha #1
    所以是有绝对定位的父元素没有相对定位的原因吗
    2018-07-29 17:20:59
  • 妮可妮可妮_ 回复 提问者 zoha #2
    不是的,是因为绝对定位会脱离标准文档流,但是,clearfix并不能清除使用定位脱离文档流的影响,所以当上面部分脱离标准流了,原先在正常文档流中占据的空间就会关闭,不占据正常文档流中的位置了
    2018-07-30 10:05:01
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

footer部分不用绝对就把content-item区域下面盖了不是已经清出浮动了吗，绝对定位会让脱离文档下面的会把上面的盖掉对吧
5 0 3
2-6编程，为什么我footer这样设置样式后，最后一张图片和footer内的内容都没有了？
16 0 5
老师看下这是什么问题？
20 0 3
为啥我这个页脚区的横线在页面上方
12 0 2
老师，你看下我的代码。哪里还可以进行改进。
0 1 10

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

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36712    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

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

在线咨询

领取优惠

免费试听

领取大纲

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