布局2-4编程练习

布局2-4编程练习


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

     body{margin:0;padding:0;color:white;} 

     .container{width:1100px;

                height:100px;

                background-color:black;

                margin:0 auto;

                position:absolute;

                top:50%;

                left:50%;

                margin-left:-550px;

                margin-top:-50px;

                }

      

      .logo{position:absolute;

            left:;

            top:;

           }

           

       .daohang{

                display:inline;

                font-family:"微软雅黑";

                color:white;

                position:absolute;

                left:550px;

                top:50px;

       }

  </style>

</head>

<body>

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

  <div class="container">

      <div class="logo">

        <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>

      </div>

      <div class="daohang">

        <ul>

            <li>课程</li>

            <li>职业路径</li>

            <li>实战</li>

            <li>袁问</li>

            <li>手记</li>

        </ul>

    </div>

  </div>

    

</body>

</html>

  1. 为什么logo没有设置left和top的值都可以符合题目的位置?

  2. 导航为什么用display:inline都不能打横显示?

  3. 导航应该如何垂直和水平方向都居中,而且做到每个导航之间的距离一样?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
妮可妮可妮_ 2018-07-29 09:25:36

http://img1.sycdn.imooc.com//climg/5b5d1339000157df02610205.jpg

http://img1.sycdn.imooc.com//climg/5b5e6be20001237602280108.jpghttp://img1.sycdn.imooc.com//climg/5b5e6c77000133fc03160206.jpghttp://img1.sycdn.imooc.com//climg/5b5e6d5e0001c22204110336.jpghttp://img1.sycdn.imooc.com//climg/5b5e6dcb000138d903560115.jpg

  1. 因为默认位置就在左上角,所以logo没有设置定位就在题目位置

  2. display:inline 的作用是设置对象做为行内元素显示,想要实现效果需要在li处设置display:inline-block;

  3. 导航垂直水平居中需要设置相对于父元素定位,top:50%,margin-top:负高度的一半像素,就可以垂直居中了,水平居中的实现方法一样.

  4. 每个导航项设置相同的填充值就可以做到每个导航之间的距离一样了

  • 提问者 soso_crazy #1
    老师,为什么.daohang{height}的值要设置为104px? li{margin:0 20px}是令每个导航项之间的距离一样? 把li加上float:right更美观吧?
    2018-07-29 17:54:59
  • 提问者 soso_crazy #2
    为什么要在.daohang{text-align:center},不能在li里设置吗?
    2018-07-29 18:07:58
  • 妮可妮可妮_ 回复 提问者 soso_crazy #3
    为什么要在.daohang{text-align:center},不能在li里设置吗? 是可以的,根据目前代码的布局,在.daohang处和li处设置都是可以的 为什么.daohang{height}的值要设置为104px? 因为logo图片部分的高度为104px,为了左右两边高度设置为相同的值,但是看到习题要求导航高度为100Px,建议左边的logo部分和右边的导航项部分都设置固定的高度为100px哦~ li{margin:0 20px}是令每个导航项之间的距离一样? 是的,0代表li的top和bottom方向的margin值,20px表示的是li的left和right的margin值,所以每个li左右两边的距离是一样的像素. 把li加上float:right更美观吧? 建议同学设置float:left;因为设置有浮动,导航项就会从右边开始显示了哦 如果可以解决你的疑问,一定要采纳哦~
    2018-07-30 09:56:37
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师