footer块没有显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主体课程</title>
<style type="text/css">
*{padding: 0;
margin:0}
.header{
width:100%;
height:100px;
}
.header img{
width: 300px;
height:84px;
padding-left: 100px;
padding-top: 8px;
}
.header .logo{
float:left;
}
.header .nav{
float:right;
}
.header .nav ul{
padding-right: 100px;
}
.header .nav ul li{
float:left;
list-style: none;
width: 80px;
height:100px;
line-height: 100px;
font-size: 15px;
font-weight: bolder;
color:#7d7d7d;
}
.main .top{
width: 100%;
height: 900px;
}
.main .top img{
width: 100%;
height: 900px;
}
.main .toplayer{
position: absolute;
top:100px;
left:0;
background-color: #000;
width:100%;
height:900px;
opacity:0.5;
}
.main .middle{
width:1000px;
margin:0 auto;
}
.main .middle .m-top .social{
float:left;
width:33.3%;
padding-top:50px;
text-align: center;
}
.main .middle .m-top .social .comm{
font-size: 20px;
color:#7D7C7F;
font-weight: bold;
padding-top: 20px;
}
.main .middle .social img{
width:100px;
height:100px;
}
.main .toplayer-top{
width:500px;
height:300px;
/*background-color: blue;*/
position:absolute;
z-index:2;
top:550px;
margin-top:-150px;
right:50%;
margin-right:-250px;
}
.main .toplayer-top .word{
padding-top: 100px;
color:#fff;
font-size:45px;
font-weight: bolder;
text-align: center;
font-family: "微软雅黑";
}
.main .toplayer-top button{
width: 200px;
height: 60px;
margin-top: 50px;
color:#fff;
font-size:14px;
font-weight: bolder;
text-align: center;
font-family: "微软雅黑";
background-color: pink;
border-radius: 8px; /*圆角*/
margin-left:150px; /*150=500/2-200/2*/
}
.main .middle .m-middle{
font-size:22px;
font-style:italic ;
color:greenyellow;
padding-top: 50px;
text-align: center;
font-weight: bold;
padding-bottom: 50px;
}
.main .middle .clear,.main .bottom .clear{
clear:both;
}
.main .middle .m-bottom .m-com{
float:left;
padding: 10px;
text-align: center;
font-size: 20px;
font-weight: bold;/*相同的设置放在父级里*/
/*width: 33.3%;*/
}
.main .middle .m-bottom .m-com img{
width:310px;
height:260px ;
}
.main .middle .m-bottom .m-com .des1{
padding-top: 20px;
color:#7D7D7F;
}
.main .middle .m-bottom .m-com .des2{
padding-top: 10px;
color:#BDBDBC;
}
.main .bottom {
background-color: pink;
}
.main .bottom .content{
width: 1000px;
margin:0 auto;
}
.main .bottom .content .title{
text-align: center;
font-size: 20px;
font-weight: bold;
color:#7D7C7F;font-family: "微软雅黑";
padding-top: 50px;
padding-bottom: 50px;
}
.main .bottom .content .pic-content dl{
float:left;
width: 470px;
margin: 10px 12px;
}
.main .bottom .content .pic-content dl img{
width: 470px;
height:460px;
}
.main .bottom .content .pic-content dl .word{
padding-top: 20px;
font-size: 20px;
font-style: italic;
font-weight: bold;
color:#7D7F7F;
padding-bottom: 50px;
}
.footer{
width: 100%;
height:100px;
background-color: #292c35;
color:#ffffff;
font-size:15px;
font-weight:bold;
text-align:center;
font-family: "微软雅黑";
}
/*HTML CSS分界线*/
/*HTML CSS分界线*/
/*HTML CSS分界线*/
</style>
</head>
<body><!--头部-->
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//595dd5120001736902000080.png" alt="lgo" />
</div>
<div class="nav">
<ul>
<li>前端</li>
<li>后端</li>
<li>移动端</li>
<li>数据开发</li>
</ul>
</div>
</div>
<!--主体-->
<div class="main">
<div class="top"><!--主体顶部-->
<img src="image/2.jpg" alt="Sorry,I'm missing'" />
<div class="toplayer"></div><!--遮罩层-->
<div class="toplayer-top">
<div class="word">MY BEAUTIFUL LIFE</div>
<button>LOOK MORE></button>
</div>
<!--主体中间部分-->
<div class="middle">
<div class="m-top"> <!--中间部分上部-->
<div class="social weibo">
<img src="image/weibo.png">
<div class="comm">weibo</div>
</div>
<div class="social weixin">
<img src="image/weixin.png">
<div class="comm">weixin</div>
</div>
<div class="social qq">
<img src="image/QQ.png"/>
<div class="comm">qq</div>
</div>
<div class="clear"></div><!--清除-->
</div>
<!--中间部分中部-->
<div class="m-middle">
I want to give good things to record down,<br>after the recall will be very beautiful.
</div>
<!--中间部分底部-->
<div class="m-bottom">
<div class="m-com">
<img src="image/03-01.jpg" />
<div class="des1">Cool Image</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-02.jpg" />
<div class="des1">Cool Image</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-03.jpg" />
<div class="des1">Cool Image</div>
<div class="des2">Record The Picture</div>
</div>
</div>
<div class="clear"></div>
</div>
<!--主体的底部部分-->
<div class="bottom">
<div class="content">
<div class="title">FROM THE PHOTO ALBUM</div>
<div class="pic-content">
<dl>
<dd><img src="image/04-01.jpg"> </dd>
<dd class="word">I want to give good things to record down,
after the recall will be very beautiful. I want to give good things to record down,
after the recall will be very beautiful. I want to give good things to record down,
after the recall will be very beautiful. </dd>
</dl>
<dl>
<dd><img src="image/04-02.jpg"> </dd>
<dd class="word">I want to give good things to record down,
after the recall will be very beautiful. I want to give good things to record down,
after the recall will be very beautiful. I want to give good things to record down,
after the recall will be very beautiful. </dd>
</dl>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!--尾部-->
<div class="footer">
© 2016 imooc.com 京IP备13046642号
</div>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星