2-6编程求指点

老师，第一个图片和最后一个图片，由于顶部和页脚固定的缘故，设置padding相关属性之后，好像不能显示完整。求老师指点，还有我这个有什么可以改进的地方吗？谢谢老师。代码如下：

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

}

.header{

width: 1100px;

height: 100px;

background: black;

/*margin: 0 auto;*/

position: fixed;

top: 0;

left: 50%;

margin-left: -550px;

}

.nav-img{

width: 300px;

height: 100px;

background: url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) center top no-repeat;

float: left;

margin-right: 200px;

}

.nav-li{

text-align: center;

line-height: 100px;

color: #fff;

margin: 0 30px;

font-size:20px;

float: left;

}

.container{

width: 1100px;

height: auto;

margin: 0 auto;

}

.img1{

width: 100%;

height: 300px;

background: url("http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg")center top no-repeat;

padding-top: 180px;

margin: 5px auto;

}

.img2{

width: 100%;

height: 480px;

background: url("http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg")center top no-repeat;

margin: 5px auto;

}

.img3{

width: 100%;

height: 300px;

background: url("http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg")center top no-repeat;

padding-bottom: 180px;

}

.footer{

width: 1100px;

height: 50px;

position: fixed;

bottom: 0;

left: 50%;

margin-left: -550px;

background: black;

}

.text1{

font-size: 20px;

color: #fff;

float: left;

text-align: center;

line-height: 50px;

margin-left: 200px;

}

.text{

font-size: 20px;

color: #fff;

float: left;

text-align: center;

line-height: 50px;

margin-left: 50px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

慕雪1434180 2017-10-19

源自：CSS网页布局基础 2-8 经典的两列布局

收起

2回答

ACMer_DragonLee 2017-10-22 21:06:14

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>2-6 编程练习</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      .page {
         width: 100%;
         height: 100px;
         background-color: black;
         position: fixed;
         top: 0;
         left: 0;
         z-index: 999999;
      }

      .left {
         color: white;
         float: left;
      }

      .right {
         font-size: 18px;
         width: 500px;
         height: 50px;
         color: white;
         position: absolute;
         right: 0;
         top: 50%;
         margin-top: -10px;
      }

      /*.content {
         width: 100%;
         height: 1440px;
         top: 0;
         left: 0;
      }*/

 span {
         padding-right: 50px;
         cursor: pointer;
      }

      .footer {
         width: 100%;
         height: 80px;
         background-color: black;
         position: fixed;
         bottom: 0;
         left: 0;
         text-align: center;
         font-size: 18px;
         line-height: 80px;
         color: white;
      }

      /*重要!!!：设置背景图片的宽度  background-size: 100% auto;*/
 .img1 {
         width: 100%;
         height: 480px;
         position: absolute;
         left: 0;
         top: 100px;
         background: url("http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg") center top no-repeat;
         background-size: 100% auto;
      }

      .img2 {
         width: 100%;
         height: 480px;
         position: absolute;
         left: 0;
         top: 580px;
         background: url("http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg") center top no-repeat;
         background-size: 100% auto;
      }

      .img3 {
         width: 100%;
         height: 480px;
         position: absolute;
         left: 0;
         top: 1060px;
         background: url("http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg") center top no-repeat;
         background-size: 100% auto;
      }
   </style>
</head>
<body>
<div class="page">
   <div class="left">
      <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="">
   </div>
   <div class="right">
      <span>课程</span>
      <span>职业路径</span>
      <span>实战</span>
      <span>猿问</span>
      <span>手记</span>
   </div>
</div>
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
<div class="footer">
   <span>课程</span>
   <span>职业路径</span>
   <span>实战</span>
   <span>猿问</span>
   <span>手记</span>
</div>
</body>
</html>

收起回答