老师,请检查

来源:3-13 编程练习

蒜泥辣椒麻油加醋酱

2019-07-12 16:19:23

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

      /*在此处补充代码*/

      *{

          margin:0 ;

          padding:0;

      }

      ul{

          list-style:none;

          color:#fff;

      }

      header{

          background-color:#000;

          width:100%;

          height:60px;

          display:flex;

      }

      .logo,.nav,.login{

          display:flex;

      }

      .logo img{

          margin-left:30px;

          line-height:60px;

      }

      .nav{

          margin-left:100px;

          line-height:60px;

          width:400px;

          flex-direction:row;

          flex-wrap:wrap;

          justify-content:space-around;

      }

      .login{

          margin-left:200px;

          width:120px;

          flex-direction:row;

          flex-wrap:wrap;

          justify-content:space-around;

  align-content: center;

      }

      input[type="button"]{

          width:30px;

          height:20px;

          background-color:orange;

          border:none;

          border-radius:3px;

          color:#fff;

          

      }

    </style>

</head>

<body>

   <header>

     <div class="logo">

       <img src="http://climg.mukewang.com/59feb59700019dab01910057.png" alt="">

     </div>

       <ul class="nav">

         <li>课程</li>

         <li>路径</li>

         <li>猿问</li>

         <li>手记</li>

       </ul>     

     <div class="login">

       <input type="button" value="登录">

       <input type="button" value="注册">

     </div>

   </header>

</body>

</html>


写回答

1回答

樱桃小胖子

2019-07-12

同学实现的效果与效果图有一定的偏差,并且建议简化一下代码,相同的样式合并书写,建议参考:

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

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

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

希望可以帮到你!

0

0 学习 · 5012 问题

查看课程

相似问题