老师，footer区域文字怎么没有靠左显示？

首页课程实战体系课手记专栏慕课教程

来源：3-9 作业题

小章鱼丸

2019-02-25 13:53:18

为什么会多出红色框圈住那部分？

<!DOCTYPE html>

<html>

<head>

<title>Homework</title>

</head>

<body>

</nav>

</div>

</div>

</header>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">HTML5与CSS3实现动态网页系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变,带你通过系统学习</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">HTML5与CSS3实现动态网页系列课程HTML5与CSS3实现动态网页</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

</div>

</div>

</div>

</footer>

</body>

</html>

margin:0;

padding:0;

}

text-decoration:none;

}

//布局样式

#layout(@name){

& when(@name=header){

height:60px;

#bg-color(black);

}

& when(@name=banner){

height:560px;

background-color:#ccc;

}

& when(@name=courses){

height:750px;

#bg-color(white);

}

& when(@name=footer){

height:98px;

#bg-color(black);

}

position:relative;

}

#bg-color(@name){

& when(@name=black){

background-color:black;

}

& when(@name=white){

background-color:#fff;

}

& when(@name=light){

background-color:#363c41;

}

#ft-size(@name){

& when(@name=small){

font-size:12px;

}

& when(@name=medium){

font-size:14px;

}

& when(@name=large){

font-size:16px;

}

& when(@name=big){

font-size:22px;

}

& when(@name=title){

font-size:32px;

}

#color(@name){

& when(@name=dark){

color:#5c646b;

}

& when(@name=black){

color:#141914;

}

& when(@name=white){

color:#fbfbfb;

}

& when(@name=yellow){

color:#ffcc33;

}

& when(@name=red){

color:red;

}

& when(@name=weak){

color:#959aa0;

}

//课程模块

#course-box(){

width:240px;

height:250px;

.fl();

margin:0 20px 34px 0;

box-shadow:0 4px 8px rgba(7,17,27,.1);

#bg-color(white);

position:relative;

top:-110px;

left:0;

#bg-img("titlebg.png");

#decorate-bottom();

#radius(6px);

}

#decorate-bottom(){

&:before{

content:'';

display:block;

box-shadow:0 8px 16px rgba(7,17,27,.2);

#bg-color(white);

#radius(4px);

width:98%;

height:3px;

position:absolute;

left:1%;

bottom:-5px;

}

&:after{

content:'';

display:block;

box-shadow:0 8px 16px rgba(7,17,27,.2);

#bg-color(white);

#radius(4px);

width:96%;

height:3px;

position:absolute;

left:2%;

bottom:-11px;

}

//通用样式

#cover-background(){

background-size:cover;

background+_:no-repeat center;

}

.fl(){

float:left;

}

.fr(){

float:right;

}

.clearfix(){

&:after{

content:'';

display:block;

clear:both;

font-size:0;

line-height:0;

zoom:1;

}

//功能样式

#line-height(@h){

height:@h;

line-height:@h;

}

#square(@w){

width:@w;

height:@w;

}

#bg-img(@src){

background-image:url("../imgs/@{src}");

}

#radius(@radius:50%){

border-radius:@radius;

}

#center-h(@width){

left:50%;

margin-left:@width*-.5;

}

//模块样式

.header{

#layout(header);

.logo{

width:128px;

height:36px;

background+_:url(../imgs/logo.png);

#cover-background();

.fl();

margin:12px 25px;

}

.nav{

.fl();

height:100%;

&-item{

#ft-size(medium);

#color(white);

#line-height(60px);

.fl();

display:block;

padding:0 25px;

&:hover{

#bg-color(light);

}

&_icon_new{

#bg-color(light);

position:relative;

&:after{

content:'';

display:block;

position:absolute;

#bg-img("icon-new.png");

#square(16px);

top:10px;

right:10px;

}

.search{

.fr();

height:36px;

position:relative;

margin:12px 25px;

padding-right:25px;

&-input{

border:none;

outline:none;

width:242px;

border-bottom:1px solid #666;

#bg-color(black);

#line-height(36px);

}

&-submit{

display:block;

#square(22px);

#bg-img("icon-1-sprite_w22.png");

background-position:0 0;

position:absolute;

top:4px;

right:25px;

}

&::before{

content:'前端入门';

display:block;

#color(dark);

#bg-color(dark);

#line-height(30px);

text-align:center;

#ft-size(small);

position:absolute;

left:0;

top:0;

}

.profile{

.fr();

&-item{

display:block;

#square(60px);

.fl();

margin-right:1px;

position:relative;

}

&-cart:before,

&-message:before{

content:'';

display:block;

#square(22px);

#bg-img("icon-1-sprite_w22.png");

position:absolute;

top:19px;

left:19px;

}

&-message:before{

background-position:0 -44px;

}

&-ava{

#square(36px);

#bg-color(light);

#radius();

margin:12px;

background+_:url(../imgs/ava.jpg);

#cover-background();

}

.banner{

#layout(banner);

#bg-img("bg.jpg");

width:100%;

background-position:center;

background-size:cover;

}

.courses{

#layout(courses);

&-list{

width:1020px;

margin:0 auto;

position:relative;

.clearfix();

.course{

#course-box();

&:nth-child(4n){

margin-right:0;

}

&-cover{

height:90px;

img{

width:100%;

#radius(4px);

}

#radius(10px);

}

&-plan{

width:260px-40px;

padding:16px 0 0 20px;

position:absolute;

top:105px;

#bg-img("titlebg.png");

transition:all 1s;

&-times{

#ft-size(small);

#color(weak);

#line-height(34px);

padding-top:10px;

}

&-person{

padding-left:8px;

}

&-desc{

padding-top:8px;

border-top:1px solid #d9dde1;

#ft-size(small);

#color(weak);

}

&-price{

position:absolute;

bottom:0;

padding-left:20px;

height:62px;

width:100%;

#bg-color(white);

#ft-size(small);

#color(red);

font-style:normal;

vertical-align:super;

}

span{

position:absolute;

bottom:20px;

}

.caption{

#ft-size(small);

#color(black);

#line-height(18px);

}

&:hover .course-plan{

top:40px;

}

&:last-child{

#center-h(240px);

}

#radius(10px);

}

.footer{

#layout(footer);

#ft-size(small);

&-link{

width:1200px;

margin:0 auto;

padding:30px 0 16px 40px;

#line-height(12px);

&-item{

display:inline-block;

margin-right:30px;

.fl();

#color(weak);

&:hover{

#color(white);

}

&-copy{

width:1200px;

margin:0 auto;

#line-height(12px);

#color(dark);

padding-left:40px;

}

&-share{

width:135px;

height:32px;

position:absolute;

right:40px;

top:34px;

&-item{

.fl();

display:block;

margin-right:13px;

#square(32px);

#bg-img("footer-sprite.png");

opacity:.6;

&:hover{

opacity:1;

}

&_i_1{

background-position:0 -279px;

position:relative;

&:before{

content:'';

display:block;

#bg-img("footer-sprite.png");

background-position:0 0;

width:170px;

height:220px;

opacity:1;

position:absolute;

top:-217px;

left:-69px;

display:none;

}

&:hover:before{

display:block;

}

&_i_2{

background-position:0 -321px;

}

&_i_3{

background-position:0 -363px;

}

写回答

1回答

好帮手慕星星

2019-02-25

你好，经测试是course设置的固定高度的原因：

这个高度是不够的，所以footer会按照course宽度居中显示，将这个高度去掉就可以了。

自己试一下，祝学习愉快！

0 学习 · 5012 问题

查看课程

相似问题

老师，之前视频里面讲的混合里面，.fl()不是没有括号么？

回答 1

1:简介文字移入时不显示2：刷新时移入课程模块有偏移3：移入微信图标，二维码怎么显示

回答 1

老师，vscode怎么用bem呢？

回答 1

老师，为什么每次刷新的时候course还多了个动画？

回答 2

老师，请帮忙解答一下困惑？

回答 1

打开慕课网App查看更多内容