老师有问题

老师有问题

第30行我用display:flex不起作用是什么原因

注释里布局 组件 内容都对应什么

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Document</title>

        <link rel="stylesheet" href="css/grid.css">

<style>

/*   base*/

* {

    padding: 0;

    margin: 0;


}

li {

    list-style: none;

}



/*布局*/

.header-container{

border-bottom: 1px solid  #dadada;

}

.header-container-nav,

 .row{

  display: flex;

 }

 .

/*   组件*/

.header-nav-item{

display: flex;


flex-direction:row-reverse;

}

/*内容*/

.header-nav-link,

.header-toggle,

.header-logo{

height: 70px;



}

   }

</style>

</head>

<body>

     <header class="header-container">

      <div class="container">

      <div class="row">

      <!-- 项目 -->

      <nav class="header-container-nav  col-4 d-md-block d-none">

      <ul class="header-nav-item">

      <li class="header-nav-link">首页</li>

      <li class="header-nav-link">关于</li>

      <li class="header-nav-link">商务合作</li>

      </ul>

      </nav>

      <button class="header-toggle col-4  col-4 d-md-none">

                            <div class="btn"></div>

      </button>

      <a href="#" class="header-logo">

      <img src="img/logo.png">

      </a>

      </div>

      </div>

     </header>

     <div class="bar-contatiner">

      <div class="container">

      <div class="bar-link">首页</div>

      <div class="bar-link">关于</div>

      <div class="bar-link">商务合作</div>

      </div>

     </div>

</body>

</html>


正在回答

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

2回答

同学你好,问题解答如下:

如果c是d的父元素,则c设置了display:flex;之后,d会受到flex样式的影响,如下:

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

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

页面效果如下:

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

同学可以敲下上面的例子看一看。

另外,如果同学改好了代码,可以将代码全部粘贴出来,或者新开一个问题,粘贴出全部的代码,方便老师为你检查。

祝学习愉快!

好帮手慕久久 2020-08-05 18:54:41

同学你好,问题解答如下:

由于同学的代码行号和老师的不一样,所以不确定“display:flex”是具体指哪里,不过样式中存在书写错误,这些错误可能导致了样式不生效,如下:

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

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

同学修改一下,看是否解决了问题。

另外,注释中的“布局”、“组件”、“内容”就是对应页面上的一些结构,写注释的人,看到这些注释,就知道它大概是什么内容,这个固定的,同学可以改成自己能看懂的注释。

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

  • 老师代码从新写了把li转成行内元素了 发的问题思路是这样的 a是b的父元素 a-b-c-d a{display:flex; } c{display:flex; flex-direction :row } d会不会生效c设置的css
    2020-08-05 19:20:01
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

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

在线咨询

领取优惠

免费试听

领取大纲

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