请老师修改一下2-6编程练习我的代码,怎么感觉怪怪的

请老师修改一下2-6编程练习我的代码,怎么感觉怪怪的

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>2-6 编程练习代码</title>

  <style type="text/css">

    /*此处写代码*/

    *{margin:0;padding:0;}

    .nav{

        width: 100%;

        height: 100px;

        background: black;

        overflow: hidden;

        position: fixed;

        top: 0;

    }

    .image{

      float: left;

      cursor: pointer;

    }

    .navlist{

      height: 100px;

      width: auto;

      font: 25px "黑体";

      color: white;

      background: black;

      margin: 0 30px;

      line-height: 100px;

      float: right;

      cursor: pointer;

    }

    .banner:nth-child(2){

    padding-top: 100px;

    }

    .banner:nth-child(4){

    padding-bottom: 100px;

    }

    .footer{

        width: 100%;

        height: 100px;

        background: black;

        margin: 0 auto;

        position: fixed;

        bottom: 0;

    }

    .footerpre{

    width: 800px;

    margin: 0 auto;

    }

    .footerlist{

   height: 100px;

   width: auto;

   font: 16px "黑体";

   color: white;

   background: black;

   margin: 0 30px;

   line-height: 100px;

   float: left;

   cursor: pointer;

    }

  </style>

</head>

<body>

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

  <div class="nav">

      <div class="image">

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

      </div>

      <div class="navlist">手记</div>

      <div class="navlist">猿问</div>

      <div class="navlist">实战</div>

      <div class="navlist">职业路径</div>

      <div class="navlist">课程</div>

  </div>

  <div class="banner">

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

  </div>

  <div class="banner">

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

  </div>

  <div class="banner">

  <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" alt=""/>

  </div>

  <div class="footer">

      <div class="footerpre">

   <div class="footerlist">友情链接</div>

     <div class="footerlist">常见问题</div>

     <div class="footerlist">联系我们</div>

     <div class="footerlist">人才招聘</div>

     <div class="footerlist">企业合作</div>

     <div class="footerlist">网站首页</div>

 </div>

  </div>

</body>

</html>


正在回答

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

3回答

你好,可以让li以行内元素显示,然后使用taxt-align:center;元素来设置,可参考下图代码;祝学习愉快~

http://img1.sycdn.imooc.com/climg//5941ec600001ef7605380896.jpg

  • 鲨鼻叔叔 提问者 #1
    非常感谢!
    2017-06-15 12:24:02
好帮手慕糖 2017-06-14 17:17:20

你好,使用ul列表,给ul设置固定的宽度,宽度=各个li的宽度+各个li左右的内外边距。然后设置margin:0 auto;即可实现居中。祝学习愉快~

  • 提问者 鲨鼻叔叔 #1
    老师你好 那如果li宽度位置呢
    2017-06-14 17:19:50
  • 提问者 鲨鼻叔叔 #2
    是宽度未知
    2017-06-14 17:20:05
好帮手慕糖 2017-06-14 14:27:02

你好,建议:1、页脚部分与顶部导航部分可使用ul列表来完成,使用li来存放每项导航项,margin属性来设置导航项之间的距离。

2、可把三张图片放置一同一个div中,图片要实现宽度100%,可给图片添加width:100%;属性。

祝学习愉快~

  • 提问者 鲨鼻叔叔 #1
    怎么实现页脚部分标签的居中呢
    2017-06-14 17:03:14
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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