2-7 编程练习 麻烦老师检查一下，谢谢
来源：2-7 编程练习
milmilbaby
2020-09-15 17:01:56
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.logo img{overflow:hidden;}
.header{width:100%;height:100px;background:black;font-size:22px;position:fixed;z-index: 999;}
.title{position:absolute;right:0;top:0;line-height:100px;margin-right:25px;}
a{text-decoration:none;color:white;}
.footer{width:100%;height:100px;background:black;font-size:20px;position:fixed;bottom:0;z-index: 888;}
.title2{position:absolute;left:25%;line-height:100px;}
.container img{display:block;width:100%;position:relative;z-index: 1;}
.container .img1{padding-top:100px;}
.container .img3{padding-bottom:100px;}
</style>
</head>
<body>
<div class="header">
<div class="logo"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a></div>
<div class="title">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<div class="container">
<div class="img1"><img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"/></div>
<div class="img2"><img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"/></div>
<div class="img3"><img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"/></div>
</div>
<div class="footer">
<div class=title2>
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</div>
</div>
</body>
</html>
还有老师，为什么我页头部分的导航项文字会随窗口大小移动？
1回答
-
同学你好，对于你的问题解答如下：
如下所示，由于img自带间距，导致header实际占据的高度超出了100px。
建议：给img元素添加display:block;属性，消除间隙。
如下所示，页脚内容水平居中存在误差。
原因：参考窗口进行的绝对定位，导致在同学电脑下查看布局效果是对的，其他电脑下打开页面，就不是居中了。
建议：去掉绝对定位，设置text-align：center；实现居中
导航文字跟随窗口大小移动这是正常现象，同学不用纠结，目前阶段只需要实现全屏效果就可以了。
使用 实现文字间距是可以的，建议优化：去掉 ；使用margin或者padding属性调整间距，这样后期需要增加或减小间距，修改起来都是非常方便的。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题