老师有问题
第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>
正在回答
同学你好,问题解答如下:
如果c是d的父元素,则c设置了display:flex;之后,d会受到flex样式的影响,如下:
页面效果如下:
同学可以敲下上面的例子看一看。
另外,如果同学改好了代码,可以将代码全部粘贴出来,或者新开一个问题,粘贴出全部的代码,方便老师为你检查。
祝学习愉快!
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星