慕课网5-2编程练习：flex布局制作卡片布局案例
小伙伴们，学习了卡片布局，接下来我们根据效果图，也写出一个卡片布局的页面吧!
效果图如下：
任务
1、主体内容的卡片一行只能显示两个。
2、卡片与卡片之间的距离相等，行与行之间的距离也相等。
3、卡片的主体内容居中显示。
4、当鼠标放在按钮上时，按钮的文字颜色发生变化。
参考代码：
<!DOCTYPE html>
<html> <head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<style>
/* 头部导航 */ * {
margin: 0;
padding: 0;
} ul {
list-style: none;
} #head-nav {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: nowrap;
width: 100%;
height: 75px;
background-color: black;
color: white;
} .logo {
max-height: 75px;
} .logo img {
max-height: 75px;
} .nav {
display: flex;
flex-wrap: nowrap;
} .nav li {
margin: 0 2em;
} .login input {
width: auto;
height: auto;
background: orange;
color: white;
border: 1px solid orange;
padding: 0.5em 1em;
border-radius: 0.5em;
outline: none;
}
/* card布局 */ #main {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
} .section {
display: flex;
/* direction: row; */
/* flex-wrap: nowrap; */
align-items: center;
justify-content: space-around;
margin-top: 10px;
padding: 10px 0;
border: 1px solid rgb(173, 216, 230);
background: rgb(173, 216, 230);
width: 46%;
} .section .box {
/* width: 40%; */
display: flex;
line-height: 1.8;
flex-direction: column;
align-content: space-around;
} .shopping {
width: auto;
height: auto;
background: orange;
color: white;
border: 1px solid orange;
padding: 0.5em 1em;
border-radius: 0.5em;
outline: none;
}
</style>
</head> <body>
<header id="head-nav">
<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 id="main">
<!-- 前端小白入门手册 -->
<div class="section">
<div class="box">
<p>《前端小白入门手册》</p>
<div>适用人群：没有任何前端基础的小白</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<!-- HTML5中CSS3实现动态网页 -->
<div class="section">
<div class="box">
<p>《前端小白入门手册》</p>
<div>适用人群：没有任何前端基础的小白</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<!-- html5网页开发 -->
<div class="section">
<div class="box">
<p>《前端小白入门手册》</p>
<div>适用人群：没有任何前端基础的小白</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<!-- html5网页开发 -->
<div class="section">
<div class="box">
<p>《前端小白入门手册》</p>
<div>适用人群：没有任何前端基础的小白</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
</section>
</body> </html>