老師 哪裡可以改善
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*在此处补充代码*/
*{
padding: 0;
margin: 0;
}
/* 頭部 */
header {
width:100%;
height: 105px;
background: #000000;
display: flex;
justify-content: space-around;
align-items:center;
/* 請問老師為什麼沒寫這行前，二顆按鈕高度是填滿父容器呢? */
}
.nav{
width:30%;
display: flex;
justify-content: space-around;
color:white;
}
li {display:block;}
.login{
display: flex;
justify-content: space-around;
}
input {
background:orange;
border:none;
padding:0 10px;
margin: 0 10px;
}
/* 內容 */
section {
width: 100%;
height:300px;
display:flex;
flex-wrap: wrap;
justify-content:space-around;
align-items:center;
}
.section{
width:40%;
background:rgba(0, 204, 255, 0.808);
display: flex;
border-radius: 5px;
line-height: 40px;
}
.box{
padding-left: 50px;
flex-grow: 3;
}
.shopping{
display: flex;
justify-content: center;
align-items:center;
flex-grow: 1;
}
.btn{
width: 100px;
height: 50px;
display: flex;
justify-content: center;
align-items:center;
background:orange;
color:white;
border-radius:5px;
}
</style>
</head>
<body>
<!-- 头部 -->
<header>
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//59197ab000014f1503000100.jpg" alt="">
</div>
<ul class="nav">
<li>课程</li>
<li>路径</li>
<li>猿问</li>
<li>手记</li>
</ul>
<div class="login">
<input type="button" value="登录">
<input type="button" value="注册">
</div>
</header>
<!-- 主体内容 -->
<section>
<div class="section">
<div class="box">
<p>《前端小白入门手册》</p>
<div>适用人群：没有任何前端基础的小白</div>
<div>费用：￥499</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<div class="section">
<div class="box">
<p>《HTML5月CSS3实现动态网页》</p>
<div>适用人群：有html和css基础的童鞋</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<div class="section">
<div class="box">
<p>《前端小白入门手册》</p>
<div>适用人群：没有任何前端基础的小白</div>
<div>费用：￥499</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<div class="section">
<div class="box">
<p>《HTML5月CSS3实现动态网页》</p>
<div>适用人群：有html和css基础的童鞋</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
</section>
</body>
</html>12
收起
正在回答
1回答
同学你好，整体实现的是不错的，把按钮的样式完善一下即可。参考如下：
另外，这是因为父容器设置了flex布局，所以子项目的高度默认就会与父元素一致。可以参考如下代码测试一下：
父元素设置flex布局，子元素高度填满父容器：
而align-items:center;是设置子项目（即子元素）在纵轴居中的，此时为了达到居中的效果，所以高度默认是由内容撑开的。这里当做一个特征记一下即可。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
老師 哪裡可以改善
14
0
1
老師 我在chrome瀏覽器上沒反應，代碼哪裡有問題呢?
11
0
2
老師 哪裡可以改善?
10
0
1
麻煩老師看看哪裡需要改進
14
1
3
老師 請看哪裡需要改善
13
1
3
登录后可查看更多问答，登录/注册
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星