2-6编程求指点
来源：2-8 经典的两列布局
慕雪1434180
2017-10-19 10:48:56
老师，第一个图片和最后一个图片，由于顶部和页脚固定的缘故，设置padding相关属性之后，好像不能显示完整。求老师指点，还有我这个有什么可以改进的地方吗？谢谢老师。代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
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://climg.mukewang.com/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://climg.mukewang.com/58c0eda50001e12416000480.jpg")center top no-repeat;
padding-top: 180px;
margin: 5px auto;
}
.img2{
width: 100%;
height: 480px;
background: url("http://climg.mukewang.com/58c0edb80001c9f216000480.jpg")center top no-repeat;
margin: 5px auto;
}
.img3{
width: 100%;
height: 300px;
background: url("http://climg.mukewang.com/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 class="header">
<div class="nav-img"></div>
<div class="nav-li">课程</div>
<div class="nav-li">职业途径</div>
<div class="nav-li">实战</div>
<div class="nav-li">猿问</div>
<div class="nav-li">手记</div>
</div>
<div class="container">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
<div class="footer">
<div class="text1">网站首页</div>
<div class="text">企业合作</div>
<div class="text">人才招聘</div>
<div class="text">联系我们</div>
<div class="text">常见问题</div>
<div class="text">友情链接</div>
</div>
</body>
</html>
2回答
-
ACMer_DragonLee
2017-10-22
<!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://climg.mukewang.com/58c0eda50001e12416000480.jpg") center top no-repeat; background-size: 100% auto; } .img2 { width: 100%; height: 480px; position: absolute; left: 0; top: 580px; background: url("http://climg.mukewang.com/58c0edb80001c9f216000480.jpg") center top no-repeat; background-size: 100% auto; } .img3 { width: 100%; height: 480px; position: absolute; left: 0; top: 1060px; background: url("http://climg.mukewang.com/58c0edc9000100d516000480.jpg") center top no-repeat; background-size: 100% auto; } </style> </head> <body> <div class="page"> <div class="left"> <img src="http://climg.mukewang.com/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>0 -
樱桃小胖子
2017-10-19
0
相似问题