慕课网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>