2-7请检查，谢谢
来源：2-7 编程练习
慕粉3698438
2020-08-14 02:14:23
<!DOCTYPE html>
<html>
<head>
<title>s</title>
<style type="text/css">
*{margin:0;padding: 0;}
.container{
width: 1600px;
height: 100px;
background: #000;
position: fixed;
top: 0;
left: 50%;
margin-left: -800px;
}
img{
float: left;
display: inline-block;
cursor: pointer;
}
.nav ul{
float: left;
position: absolute;
left: 40%;
line-height: 100px;
}
.nav ul li{
display: inline-block;
list-style: none;
color:#fff;
font-size: 26px;
padding:0 25px;
cursor: pointer;
}
.pagea{
width: 1600px;
height: 480px;
margin: 0px auto;
background-image: url(http://climg.mukewang.com/58c0eda50001e12416000480.jpg);
margin-top: 100px;
}
.pageb{background-image: url(http://climg.mukewang.com/58c0edb80001c9f216000480.jpg);
width: 1600px;
height: 480px;
margin: 0px auto;
}
.pagec{background-image: url(http://climg.mukewang.com/58c0edc9000100d516000480.jpg);
width: 1600px;
height: 480px;
margin: 0px auto;
margin-bottom: 100px;
}
.footer{
width: 1600px;
height: 100px;
background: #000;
position: fixed;
bottom:0px;
left: 50%;
margin-left:-800px;
}
.footer ul{
line-height: 100px;
text-align: center;
}
.footer ul li{
color:white;
list-style: none;
display: inline;
padding: 0 50px;
cursor: pointer;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<div class="container">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>笔记</li>
</ul>
</div>
</div>
<div class="pagea"></div>
<div class="pageb"></div>
<div class="pagec"></div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕久久
2020-08-14
同学你好，代码中有如下问题：
1. 页面没有全屏展示：
建议将每一部分的宽度，都设置成100%，如下：
2. 全屏展示后，头部导航，没有居右展示：
原因是导航的位置，设置成了居左40%。
建议不使用定位，利用浮动让其居右显示，如下：
3. 如上调整后，ul的高度会超出一些：
原因是li设置了display: inline-block;，而行内块之间默认是基线对齐的，所以会导致父元素高度超出一点。
建议给li设置垂直方向居顶对齐，如下：
4. 中间内容的背景图重复了：
原因是页面的宽度大于背景图的宽度，所以背景图会默认平铺所在的div。
由于当前阶段我们还没有学习改变背景图的尺寸，所以建议使用img标签布局，如下：
此时图片还是不会全屏展示，因此需要调整图片的宽度为100%，如下：
5. 将背景图更换成img后，图片之间会有间隙：
原因是图片是行内元素，底部有默认的间隙，可以将其转成块级元素消除间隙：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题