用背景图片设置的方法实现不了要求的效果

<!DOCTYPE html>

<html>

<head>

body{margin:0;padding:0;center;font-size:16px;border:0;overflow:scroll;}

.header{height:100px;width:100%;background:black url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) no-repeat;position:fixed;overflow:hidden;:100px;}

.header .nav li{float:left;margin-right:30px;list-style:none;line-height:100px;}

.header .nav{position:absolute;left:800px;height:100px;}

.header .nav a{text-decoration:none;color:white;}

.banner{width:100%;height:250px;background:url(http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg) no-repeat center;padding-top:100px;}

.container1{width:100%;height:250px;background:url(http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg) no-repeat center;margin-top:0;}

.container2{width:100%;height:250px;background:url(http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg) no-repeat center;}

.footer{height:100px;width:100%;background:black;position:fixed;}

.footer .list{height:100px;list-style:none;margin:0 auto;}

.footer .list li{float:left;line-height:100px;}

.footer .list a{color:white;text-decoration:none;display:inline-block;margin-right:30px;}

</style>

</head>

<body>

</ul>

</div>

</ul>

</div>

</body>

</html>

洋仔queen 2018-08-01

源自：CSS网页布局基础 2-7 编程练习

收起

2回答

妮可妮可妮_ 2018-08-01 16:00:00

无法实现滚动条:是因为高度不够,所以没有出现滚动条,可以适当的将图片的固定高度调高一些,如下图所示:
导航处设置高度等于行高不能居中显示:是因为ul li含有默认的填充值,建议在style处设置 * { margin: 0; padding: 0;}
在li处设置左浮动是可以实现导航项在一行显示的,并且建议同学可以在.footer处设置bottom:0;,如下图所示:
如果可以解决你的疑惑,记得采纳哦~

收起回答

妮可妮可妮_ 2018-08-01 15:31:03

同学是指无法实现宽度贯穿全屏吗?

是可以通过 background-size: 100%;实现效果的,如下图所示:

祝学习愉快!

收起回答

提问者洋仔queen #1

我设置的是100%，但是有下面这几个问题，第一:页面无法实现滚动条，第二:第一个header 文字用行高等于盒子高度没有办法实现垂直居中的效果，第三个，最后一个盒子footer 文字左浮动以后没有办法实现一行显示的效果，但是盒子宽度明明是100%

2018-08-01 15:39:13
提问者洋仔queen #2

还得请您看一下我的代码，

2018-08-01 15:42:03