请老师看一下

请老师看一下

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{    margin: 0 ;
        text-decoration: none;
        padding: 0;}
    .header{
        position: fixed;
           background-color: black;
        width: 100%;
        height: 100px;
    }
    .header .logo{
        float: left;
    }
   
    .header .nav{
        float: right;
    }
     img{
        display: block;    
    }
     li{
        display: inline-block;
    }
     a{
         font-weight: bold;
        color:white;
        line-height: 100px;
        font-family: "宋体";
        font-size: 20px;
        margin-right: 30px;
    }
    .container img{margin:0;width: 100%;}
    .footer{background-color: black;
        position:fixed;
        width: 100%;
        height: 100px;
        text-align: center;
        bottom: 0;    }

  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="content">
    <div class="header">
         <div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a></div>
            <div class="nav">
              <ul>
                   <li><a href="#">课程</a></li>
                   <li><a href="#">职业路径</a></li>
                    <li><a href="#">实战</a></li>
                   <li><a href="#">猿问</a></li>
                 <li><a href="#">手记</a></li>
             </ul>
        </div>
    </div>
    <div class="container">
        <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">
        <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
        <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">
    </div>
    <div class="footer">
        <ul>
                  <li><a href="#">网站首页</a></li>
                   <li><a href="#">企业合作</a></li>
                    <li><a href="#">人才招聘</a></li>
                   <li><a href="#">联系我们</a></li>
                 <li><a href="#">常见问题</a></li>
                  <li><a href="#">友情链接</a></li>
        </ul>
    </div>
  </div>
</body>
</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕码 2020-01-21 18:40:12

同学你好, .nav li 设置为块级或者是内联块都是可以的。显示为块级比较美观,底部设置为内联块是方便居中效果。

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

好帮手慕码 2020-01-21 16:33:08

同学你好,代码中问题:

(1)logo超出了父级元素,这是因为a标签样式的影响:

http://img1.sycdn.imooc.com//climg/5e26b602099c8e4d03110267.jpg

建议修改如下:

http://img1.sycdn.imooc.com//climg/5e26b65c09f2cbb302970204.jpg

(导航项中的li标签也无需使用a标签的样式)

(2)顶部右侧的导航项建议修改:

http://img1.sycdn.imooc.com//climg/5e26b6fe092f78fe04100550.jpg

(3)底部导航可以优化:

http://img1.sycdn.imooc.com//climg/5e26b72e0949d39203500113.jpg

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

  • 提问者 qq_慕运维6015852 #1
    老师,回答中的顶部右侧的导航项 .header .nav li 里面是不是应该用display: inline-block; 而不是 display: block;
    2020-01-21 16:40:07
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师