寫在前面
時間的車輪就這樣不知不覺中把我們帶到了2022年的中秋節，在這裡，我先祝大家中秋節快樂！
有時候真的很感慨，時間的魔力，哪些我們曾想的遙遠時間，就這樣姗姗而來。
我是從2013年注冊營運【web前端開發】公号，一直到今天，已是第10個年頭了，其實，堅持做一件事情，真的很不容易，但是，時間也慢慢的把我帶了過來。
現在，我們每天寫一點點的小練習，每天堅持學習一點點，每天堅持進步一點點，這也不是一件容易的事情，但是隻要堅持去做，時間就會把我們帶到那個曾經覺得遙遠的地方。
我在開設【每日一練】欄目的時候，我就曾說過，我們先寫滿100個小練習，就這樣持續的學習，我們居然在不知不覺中寫到了第59個小項目練習了。
希望你能繼續持續學習，堅持練習，也希望這些小項目能夠幫助到你。
因為今天是中秋節，我們就一起來寫一個與中秋有關的響應式産品卡，現在我們一起來看一下它的最終效果：
HTML代碼：
<!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> CSS代碼：
*{
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;
}
} 寫在最後
今天的【每日一練】内容就先分享到這裡，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。