请问老师我的代码写的怎样,需不需要再优化?导航项应该用浮动还是定位比较好?

请问老师我的代码写的怎样,需不需要再优化?导航项应该用浮动还是定位比较好?

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    *{margin:0;

  padding:0;

  }

.daohangtiao{width:1100px;

             height:100px;

background-color:black;

border:1px solid black;

position:absolute;

top:50%;

left:50%;

margin-left:-550px;

margin-top:-50px;

}

.logo{position:absolute;

      }

.daohangxiang{float:right;

              height:100px;

  }

li{list-style:none;

   float:left;

   font-family:"微软雅黑";

   font-size:25px;

   color:white;

       line-height:100px;

   margin:0 40px;

}

a{text-decoration:none;

  color:white;

  }

  </style>

</head>

<body>

    <div class="daohangtiao">

    <div class="logo">

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

</div>

<div class="daohangxiang">

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


正在回答

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

2回答

1、logo区域设置了position:absolute;之后,会使logo区域脱离原本的文档,跟float:left起的作用是一样的,但是建议logo区域使用float:left来进行布局。

2、导航项如果使用了绝对定位,再设置右浮动,右浮动是不起作用的。

一般看到这样布局的时候,使用浮动来做布局是比较好的。


山河远阔ZZ 2019-01-10 15:36:13

同学你好,经过测试,效果已经实现,代码也写的很规范,但是老师有一个建议,效果在展示的时候,导航与导航之间的间隙太大,可以把间隙改小一点,参考下图:

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

自己测试一下,祝学习愉快,望采纳!

  • 提问者 阿扬在自律路上 #1
    请问老师,1.我先把logo设置为绝对定位,这时他的位置被导航项顶上去;再把导航项右浮动,这个思路是不是一般的解决思路?2.导航项除了向右浮动,把他设置为绝对定位再向右浮动的话是不是也可以?
    2019-01-10 15:58:54
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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