老师帮忙看下有什么问题么,谢谢

来源:2-4 编程练习

V_旺_

2019-10-28 22:00:58

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    body,ul,li{

        margin: 0;

        padding: 0;

    }

    ul,li{

        list-style: none;

        display: inline-block;

        color: #fff;

        cursor: pointer;

        line-height: 100px;

    }

    ul{

        float: right;

    }

    li{

        margin-right: 30px;

    }

    img{

        float: left;

        cursor: pointer;

    }

    header{

        width: 1100px;

        height: 100px;

        background: black;

        text-align: center;

        vertical-align: middle;

        margin: 0 auto;

        position: relative;

    }

  </style>

</head>

<body>

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

  <header>

       <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">

       <ul>

           <li>课程</li>

           <li>职业路径</li>

           <li>实战</li>

           <li>猿记</li>

           <li>手记</li>

       </ul>

   </header>

</body>

</html>


写回答

2回答

好帮手慕粉

2019-10-30

同学你好,修改后的是正确的哦,继续加油!

0

好帮手慕粉

2019-10-29

同学你好,

1、首先同学没有实现导航条的垂直居中哦,建议参考:

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

2、鼠标点击导航项的时候没有点击效果,练习要求是有的哦,同学可以用li:active自己实现一下呢。

希望我的回答能够帮助到你,望采纳,祝学习愉快!


0
h_旺_
h 更改后的效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,ul,li{ margin: 0; padding: 0; } ul,li{ list-style: none; display: inline-block; color: #fff; cursor: pointer; line-height: 100px; } ul{ float: right; } li{ margin-right: 30px; } li:active{ color: red; } img:active{ background:red; } img{ float: left; cursor: pointer; } header{ width: 1100px; height: 100px; background: black; text-align: center; vertical-align: middle; position: absolute; top: 50%; left: 50%; margin-left: -550px; margin-top: -50px; } </style> </head> <body> <header> <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"> <ul> <li>课程</li> <li>职业路径</li> <li>实战</li> <li>猿记</li> <li>手记</li> </ul> </header> </body> </html>
h019-10-29
共1条回复

0 学习 · 40143 问题

查看课程