老师，请帮忙检查下，谢谢了！

来源：3-17 编程练习

weixin_慕设计6449438

2019-06-12 16:52:19

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}

/*头部布局*/
.header ul li{list-style:none; float:left; }

.header{
width:100%;
height:100px;
background:black;
margin:0 auto;
display:flex;
justify-content: space-around;
align-items: center;
}
.logo{display:block;}
.nav{
width:33.33%;
display:flex;
justify-content: space-around;
align-items: center;
}
.nav li{color:white; font-size:20px;}

.login{
width:15%;
display:flex;
justify-content: space-around;
align-items: center;
}
input{
width:50px;
height:30px;
background:orange;
border:none;
border-radius: 4px;
color: white;
font-size:18px;
}

/*卡片布局*/
.section-wrap{
width:100%;
height:400px;
display:flex; /*为了四张卡片的布局*/
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}
.section-wrap .section{
width:600px;
height:180px;
border:1px solid white;
border-radius:5px;
background-color:#add8e6;
display: flex; /*为了里面的左右分开布局*/
justify-content: space-around;
align-items:center;
font-size:20px;
line-height: 50px;
margin-top:5px;
}
.section .shopping .btn{
width:120px;
height:50px;
line-height: 50px;
text-align: center;
font-weight: bold;
color:white;
border:1px solid white;
border-radius: 5px;
background:orange;
border:none;
}

</style>
</head>
<body>

<header class="header">
<div class="logo">
<img src="http://climg.mukewang.com/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 class="section-wrap">
<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>《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>《HTML5月CSS3实现动态网页》</p>
<div>适用人群：有html和css基础的童鞋</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
</section>
</body>
</html>