老师请检查,有什么可以优化的地方

来源:2-4 编程练习

keepangry2297447

2020-03-18 10:46:55

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>2-4编程练习</title>
 <style>
  *{
   padding: 0;
   margin: 0;
  }
  .nav{
   background: #000;
   width: 1100px;
   height: 100px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -550px;
   margin-top: -50px;
  }
  ul li,ul{
   list-style: none;
   text-align: center;
   float: right;
   color: #fff;
   line-height: 100px;
   padding: 0 20px
  }
 </style>
</head>
<body>
 <div class="nav">
  <div>
   <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="慕课网">
   <ul>
    <li>课程</li>
    <li>职业路径</li>
    <li>实战</li>
    <li>提问</li>
    <li>猿记</li>
   </ul>
  </div>
 </div>
</body>
</html>

写回答

1回答

好帮手慕星星

2020-03-18

同学你好,代码布局是可以的。

优化:

1、div高度超出了父容器

http://img.mukewang.com/climg/5e7193330939fc1d07620326.jpg

这是因为图片为行内元素,有文字特性,默认存在间隙。可以将图片设置为块元素,然后左浮动显示:

http://img.mukewang.com/climg/5e7193cf09cd0f4f05300236.jpg

2、导航项显示顺序与效果图中相反。这是因为li设置了右浮动,排列在前面的元素会先显示到右侧。可以修改为左浮动,整个盒子右侧浮动

http://img.mukewang.com/climg/5e7194ee0965df2f05520565.jpg

自己修改测试下,祝学习愉快!

0

0 学习 · 40143 问题

查看课程