2-6作业,底部的代码如何完善

2-6作业,底部的代码如何完善

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

     *{

        padding:0;

        margin:0;

        color:white;

    }

    .nav{

        width:100%;

        height:100px;

        background:black;

        position:fixed;

    }

    .nav_logo{

        height:100%;

        float:left;

        line-height:100px;

    }

    .nav_list{

        height:100px;

        line-height:100px;

        float:right;

        

    }

    ul li{

        text-decoration:none;

        list-style-type:none;

        display:inline-block;

        float:left;

        margin-right:20px;

        line-height:100px;

     

    }

    a{

        text-decoration:none;

    }

    a:hover{

        cursor:pointer;

        color:red;

    }

    

    .center,.img1,.img2,.img3{

        width:100%;

    }

    .footer{

        width:100%;

        height:100px;

        background:black;

        position: fixed;

        left:0;

        bottom:0; 

        line-height:100px;

    }

    .footer_nav{

        width:500px;

        height:100px;

        margin:0 auto;

    }

  </style>

</head>

<body>

  <!-- 此处写代码 -->

  

   <div class="nav">

      <div class="nav_logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>

      <div class="nav_list">

          <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="center">

      <div class="img1"><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"/></div>

      <div class="img2"><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"/></div>

      <div class="img3"><img src="

http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/></div>

  </div>

  

  <div class="footer">

    <div class="footer_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>

</body>

</html>


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

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

1回答
卡布琦诺 2017-09-18 10:25:13

就你本段代码而言,顶部和页脚实现的都不错,但是建议将img区域完善一下

http://img1.sycdn.imooc.com/climg//59bf2e7f0001cef909290427.jpg

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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