老师,中间部分图片与图片之间有空白,怎样解决.谢谢!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
body,ul{margin:0;padding:0;list-style:none;}
.header{width:100%;height:100px;
background-color:black;
margin:0 auto;
line-height:100px;
position:fixed;
top:0;
}
img{float:left;
}
.nav{float:left;
margin-left:420px;
}
.nav li{margin-left:60px;
display:inline-block;
}
.nav li a{text-decoration:none;
color:white;
}
.main1{width:100%;height:550px;
background-image: url(http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg);
background-repeat:no-repeat;
background-size:100%;
}
.main2{width:100%;height:550px;
background-image: url(http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg);
background-repeat:no-repeat;
background-size:100%;
}
.main3{width:100%;height:550px;
background-image: url(http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg);
background-repeat:no-repeat;
background-size:100%;
}
.footer
{width:100%;height:100px;
background-color:black;
line-height:100px;
position:fixed;
bottom:0;
text-align:center;
}
.footer ul{overflow:hidden;}
.footer li{float:left;
margin-left:120px;
}
.footer li a{text-decoration: none;
color:white;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
</a>
<div class="nav">
<ul>
<li><a href="#"><span>课程</span></a></li>
<li><a href="#"><span>职业路径</span></a></li>
<li><a href="#"><span>实战</span></a></li>
<li><a href="#"><span>猿问</span></a></li>
<li><a href="#"><span>手记</span></a></li>
</ul>
</div>
</div>
<div class="main1"></div>
<div class="main2"></div>
<div class="main3"></div>
<div class="footer">
<ul>
<li><a href="#"><span>网站导航</span></a></li>
<li><a href="#"><span>企业合作</span></a></li>
<li><a href="#"><span>人才招聘</span></a></li>
<li><a href="#"><span>联系我们</span></a></li>
<li><a href="#"><span>常见问题</span></a></li>
<li><a href="#"><span>友情链接</span></a></li>
</ul>
</div>
</body>
</html>
正在回答
同学,你好。background-size有两个值,第一个值代表背景图片的宽度,第二个值代表背景图片的高度,同学,这里只写了一个值100%,只是让宽度100%并没有让高度100%,因此需要设置background-size:100% 100%, 这个样式和background-size:cover样式是等效的。
两种方式都是可以的。
祝学习愉快!
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星