老师帮忙看下2-3有没有问题或者代码能否更加优化?

来源:2-5 经典的行布局(2)

慕娘9805493

2018-01-17 21:59:40

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{margin:0px;padding:0px;}

    .big{height:100px;

        width:1100px;

        background:black;

        position:absolute;

        top:50%;

        left:50%;

        margin-top:-50px;

        margin-left:-550px;

        

    }

    .logo{float:left;}

    .list ul li{list-style:none;

        float:right;

        line-height:100px;

        margin:0 20px;

    }

    a{color:white;

      text-decoration:none;

        }

    

  </style>

</head>

<body>

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

            <div class="big">

                <div class="logo">

                    <a href="">

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

                    </a>

                </div> 

                <div class="list">

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


写回答

1回答

bbbboom

2018-01-18

童鞋,我测试了你的代码,实现效果没有问题,可以优化的地方:

1、可以给右侧导航list设置固定宽度,浮动在右边

2、现在你的代码显示右侧导航list是没有高度的,是因为内容浮动的原因,可以给list设置高度,或者是添加overflow:hidden;就好啦

一起加油啊,(づ ̄3 ̄)づ╭❤~

0

0 学习 · 36712 问题

查看课程