麻烦大家看下我的代码有哪些可以改进的地方,谢谢!

麻烦大家看下我的代码有哪些可以改进的地方,谢谢!

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{margin:0;padding:0;font-family:"宋体";color:white;}

    .nav{

        background:black;

        max-width:1100px;

        height:100px;

        width:800px;

        position:absolute;

        top:50%;

        left:50%;

        margin-top:-50px;

        margin-left:-400px;

        

    }

    .navItems{

        float:right;

        height:100px;

        display:inline-block;

        

    }

    .navLi{

        display:inline-block;

        font-size:20px;

        line-height:100px;

        text-align:center;

        margin-right:30px;

    }

    .logo{float:left;}

    a{text-decoration:none;}

  </style>

</head>

<body>

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

  <div class="nav">

      <div class="logo">

          <a href=""><img width=250px src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a>

      </div>

      <div class="navItems">

          <div class="navLi"><a href="">课程</a></div>

          <div class="navLi"><a href="">职业路径</a></div>

          <div class="navLi"><a href="">实战</a></div>

          <div class="navLi"><a href="">猿问</a></div>

          <div class="navLi"><a href="">手记</a></div>

      </div>

  </div>

</body>

</html>


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

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

1回答
小于飞飞 2017-05-05 16:46:26

你好,根据作业要求,完成的不错,注意:logo 区域没有垂直居中,可以添加相应的padding-top 值。同时如果要实现鼠标经过时,导航项出现背景色,那还要设置 a 的样式了呦。祝学习愉快。

  • 提问者 只若初见_0001 #1
    谢谢老师,给logo添加了padding-top:10px可以让logo区域居中,但是给logo区域设置height和line-height为什么实现不了垂直居中呢?.logo(float:left;display:inline-block;height:100px;line-height:100px;)
    2017-05-05 20:48:17
  • 小于飞飞 回复 提问者 只若初见_0001 #2
    注意,height和line-height 对单行文字起作用。所以其他垂直居中用其他方法呦。
    2017-05-05 22:07:09
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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