老师帮忙看下

来源:2-4 编程练习

MoonLl

2017-08-20 18:05:23

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin: 0;padding: 0;}
    .one{
        width:100%;
        height:100px;
        max-width: 1100px;
        border:1px solid black;
        background:black;
        font color:white;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top:-50px ;
        margin-left:-550px;
        
        
        
    }
    img{
        width:300px;
        height:100px;
        float: left;
    }
    .a2{
        
        float:right;
        text-align: center;
        font-size: 20px;
        

    }
     ul li{
      
      list-style: none;
      font-size: 25px;
      float: left;
     
      
     
     }
     a{
      color: white;
      text-decoration: none;
      width: 130px;
      height: 100px;
      line-height: 100px;
      
      text-align: center;
      display: block;

     }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
   <div class="one">
       <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
       
       <div class="a2">
           <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回答

樱桃小胖子

2017-08-21

将.one中的 max-width: 1100px;改成min-width,让页面缩小到1100px的时候,不再改变,祝学习愉快!

0

Miss路

2017-08-20

可以的,实现的挺好的。继续加油!

0
hoonLl
h 但是我感觉导航项里边的字体间距不一样。这样会不会影响美观?而且我缩小页面的时候导航栏也不会跟着缩小这个怎么解决。
h017-08-20
共1条回复

0 学习 · 36712 问题

查看课程