2-3练习,麻烦老师检查一下谢谢~

2-3练习,麻烦老师检查一下谢谢~

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
      margin: 0;
      padding: 0;
    }
    .nav{
        height:100px;
        max-width:1100px;
        width:auto;
        font-family:"微软雅黑";
        color: white;
        position: absolute;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
        margin:auto;
        background-color: black; }
    img{
      float: left;
    }
    table{
      float: right;
      line-height: 100px;
      font-size: 25px;
    }
    td{
      width: 130px;
      text-align: center;
    }

  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="nav">
    <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
    <table>
      <tr>
        <td>课程</td>
        <td>职业路径</td>
        <td>实战</td>
        <td>猿问</td>
        <td>手记</td>
      </tr>
    </table>
      
      
  </div>
</body>
</html>

我这样来实现是否有需要注意的地方吗   谢谢老师!

正在回答

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

2回答

经测试实现的效果没有问题~

祝学习愉快!

  • 请问老师这样是不是只是把文字在单元格内居中了?因为每个单元格内的字数不一样,实际显示效果每个导航项之间的距离是不一样的。
    2018-01-08 11:10:01
一路电光带火花 2018-01-08 13:38:16

如果要每个导航项之间距离一致的话,那就要给每个导航项去设置宽度和margin了,我觉得差不多就行,毕竟这个题主要考察的是导航的水平和垂直居中,以及导航条内元素的布局。

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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