请老师检查,是否需要改进?

来源:2-7 编程练习

SpecialMe

2020-08-31 23:51:58

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
       /*此处写代码*/
       *{
           padding:0;
           margin:0;
       }

       .nav,.footer{
           width:100%;
           height:100px;
           font-size:18px;
           color:white;
           background:black;
           overflow: hidden;
           position:fixed;

       }

       .logo{
           width:45%;
           height:100px;
           float:left;
       }
       img{display: block;}

       .logo img{
           cursor:pointer;
       }
       .nav-item{
           width:55%;
           height:100px;
           line-height:100px;
           float:right;
       }
       li {
           display: inline-block;
           padding:0 30px;
           cursor:pointer;
           list-style:none;
       }
       .container{
           width:100%;
           overflow: hidden;
           padding-top:100px;
       }
       .container img{
           width:100%;
           height:100%;
       }
       .footer{
           bottom:0;
           text-align: center;
       }
       .footer-list {
           width: 100%;
           height: 100px;
           line-height: 100px;
       }
   </style>
</head>
<body>
<!-- 此处写代码 -->
<div class="nav">
   <div class="logo"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
   </div>
   <ul class="nav-item">
       <li>课程</li>
       <li>职业路径</li>
       <li>实战</li>
       <li>猿问</li>
       <li>手记</li>
   </ul>
</div>
<div class="container">
   <img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"/>
   <img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"/>
   <img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"/>
</div>
<div class="footer">
   <ul class="footer-list">
       <li>网站首页</li>
       <li>企业合作</li>
       <li>人才招聘</li>
       <li>联系我们</li>
       <li>常见问题</li>
       <li>友情链接</li>
   </ul>
</div>
</body>
</html>

写回答

1回答

好帮手慕粉

2020-09-01

同学你好,第三张图片被遮住了一部分:

http://img.mukewang.com/climg/5f4db34d09defb4117840627.jpg

这是因为底部设置了固定定位,不占据位置,导致图片被覆盖了一部分,可以像头部那样处理,给容器再加个底边距:

http://img.mukewang.com/climg/5f4db3900944de2304190157.jpg

如果我的回答帮助了你,欢迎采纳。祝学习愉快~

0
hpecialMe
h 好的 谢谢, 我还不太清楚怎么检查这些
h020-09-01
共1条回复

0 学习 · 40143 问题

查看课程