其他
【每日一练】59—写一个中秋月饼的响应式卡片
写在前面
时间的车轮就这样不知不觉中把我们带到了2022年的中秋节，在这里，我先祝大家中秋节快乐！
有时候真的很感慨，时间的魔力，哪些我们曾想的遥远时间，就这样姗姗而来。
我是从2013年注册营运【web前端开发】公号，一直到今天，已是第10个年头了，其实，坚持做一件事情，真的很不容易，但是，时间也慢慢的把我带了过来。
现在，我们每天写一点点的小练习，每天坚持学习一点点，每天坚持进步一点点，这也不是一件容易的事情，但是只要坚持去做，时间就会把我们带到那个曾经觉得遥远的地方。
我在开设【每日一练】栏目的时候，我就曾说过，我们先写满100个小练习，就这样持续的学习，我们居然在不知不觉中写到了第59个小项目练习了。
希望你能继续持续学习，坚持练习，也希望这些小项目能够帮助到你。
因为今天是中秋节，我们就一起来写一个与中秋有关的响应式产品卡，现在我们一起来看一下它的最终效果：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>【每日一练】59—写一个中秋月饼的响应式卡片</title> <!--icon 文件--> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"></head><body>
<section class="mooncake"> <div class="center"> <h1>祝大家中秋节快乐！</h1> </div>
<div class="mooncake-content"> <div class="box"> <a href="http://www.webqdkf.com " target="_blank"> <img src="images/01.png" alt="中秋节月饼"></a> <h3>冰鲜月饼</h3> <h5>冰淇淋+巧克力</h5> <h6>￥99/盒</h6> <div class="icons"> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-qq' ></i></a> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-wechat'></i></a> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-weibo' ></i></a> </div> </div>
<div class="box"> <a href="http://www.webqdkf.com " target="_blank"> <img src="images/02.png" alt="中秋节月饼"></a> <h3>冰鲜月饼</h3> <h5>冰淇淋+巧克力</h5> <h6>￥99/盒</h6> <div class="icons"> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-qq' ></i></a> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-wechat'></i></a> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-weibo' ></i></a> </div> </div>
<div class="box"> <a href="http://www.webqdkf.com " target="_blank"> <img src="images/03.png" alt="中秋节月饼"></a> <h3>冰鲜月饼</h3> <h5>冰淇淋+巧克力</h5> <h6>￥99/盒</h6> <div class="icons"> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-qq' ></i></a> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-wechat'></i></a> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-weibo' ></i></a> </div> </div>
<div class="box"> <a href="http://www.webqdkf.com " target="_blank"> <img src="images/04.png" alt="中秋节月饼"></a> <h3>冰鲜月饼</h3> <h5>冰淇淋+巧克力</h5> <h6>￥99/盒</h6> <div class="icons"> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-qq' ></i></a> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-wechat'></i></a> <a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-weibo' ></i></a> </div> </div>
</div> </section>
</body></html>*{ padding: 0; margin: 0; box-sizing: border-box; font-family: 'Space Grotesk', sans-serif; text-decoration: none;}.mooncake{ position: relative; width: 100%; height: 100vh; background: radial-gradient(#F675A8,#554994); display: flex; align-items: center; justify-content: center; flex-direction: column;}.mooncake-content{ width: 100%; max-width: 1350px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, auto)); align-items: center; gap: 2rem; text-align: center; margin-top: 4rem;}.mooncake-content img{ width: 100%; height: auto; border-radius: 15px; margin-bottom: 15px;}.center h1{ color: #fff; font-size: 4rem; text-align: center;}.box{ padding: 16px; background:#554994; border-radius: 15px; transition: all .38s ease;}.box h3{ font-size: 23px; font-weight: 600; color: #fff; margin-bottom: 8px;}.box h5{ font-size: 15px; font-weight: 600; color: #8e8c92; margin-bottom: 15px; letter-spacing: 2px;}.box h6 { color: #F675A8; font-size: 20px; font-weight: 600; margin-bottom:15px;}.icons i{ display: inline-block; color: #eee; font-size: 20px; margin: 0 8px; transition: all .38s ease;}.icons i:hover{ transform: scale(1.2);}.box:hover{ transform: translateY(-10px); cursor: pointer;}
@media(max-width: 1240px){ .team{ width: 100%; height: auto; padding: 90px 2%; } .center h1{ font-size: 3.2rem; }}写在最后
今天的【每日一练】内容就先分享到这里，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号