老师,我这么写的符合要求吗?

老师,我这么写的符合要求吗?

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    body{margin:0;padding:0;color:white;}

    .container{width:100%;height:100px;background:black;margin:0 auto;font-size:0px;position:fixed;}

    .image{float:left;}

    .nav{float:right;}

    .nav li{margin-right:20px;display:inline-block;font-size:20px;

        text-align:center; padding-top:20px;font-family:"微软雅黑";

        padding-left:15px;

    }

    

    .nav ul {

        list-style:none;

    }

    .image1{font-size:0px;}

    .footer{background:black;width:100%;height:100px;font-size:0px;position:fixed;bottom:0px;}

    .footer ul li{display:inline-block;text-align:center;font-size:30px;margin-left:70px;margin-top:30px;}

    a{text-decoration:none;color:white;}

  </style>

</head>

<body>

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

  <div class="container">

      <div class="image">

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

      </div>

      

      <div class="nav">

          <ul class="nav1">

              <li>课程</li>

              <li>职业路径</li>

              <li>实战</li>

              <li>猿问</li>

              <li>手记</li>

          </ul>

      </div>

  </div>

  <div class="image1">

      <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>

</body>

</html>


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

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

2回答
好帮手慕夭夭 2019-04-21 17:23:30

你好同学,根据ul里面的内容计算的,ul设置的宽度恰好能放下子元素即可,例如在浏览器中按F12,可以查看一个li的宽度:

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

所以li占据的宽度为120*6 =720px,加上每一个li设置了70px的左间距,所以间距占据了70*6=420px,  720px+420px=1140px 哦

祝学习愉快 ,望采纳。

好帮手慕码 2019-04-18 14:34:07

同学你好!

这样写不太符合要求的:

(1)顶部导航栏右侧链接没有垂直居中显示:

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

这里建议使用line-height来设置垂直居中:

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

(2)中部图片应该是自适应的:

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

(3)底部的a链接应该在li中是左右距离是相等的、并且实现垂直居中、水平居中:

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

可以使用 margin;0 35px;的方式来撑开li左右,使用line-height来设置垂直居中

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

给ul设置定宽 这里每个li的宽度为120px+margin作用共70px 所以一共就是1140px 

给ul设置margin:0 auto;来实现水平居中;

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

如果帮助到了你 望采纳 祝学习愉快~

  • 提问者 philLi #1
    老师,您这个1140px怎么算的?可以说清楚一点吗?
    2019-04-21 15:56:31
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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