寫在前面
前面幾期的練習，我們練習了一些單頁網站的實現效果，今天我們來點容易的，這樣可以調節一下。
其實，我們寫各種項目，真的好像小孩子搭積木遊戲一樣，我們只要把每個模塊搭建好了，一個完整的項目就慢慢出來了，至於最終體驗如何，這個都是需要慢慢優化，任何一個項目都不可能一步到位的，都會存在各種問題，因此，我們在平時的練習中，不要有完美主義情結，先完成，再完美完善。
今天，我們就來先搭建一個小模塊，用HTML和CSS實現一個個人信息展示卡的效果。
現在，我們一起來看一下今天的練習效果：
這個圖片素材，我就不再提供了，因為，這是一個個人信息介紹卡，這個照片，你也可以把它換成自己的照片。這種卡片式，我們在一些團隊介紹，產品介紹中會使用比較多，具體更多的應用場景，大家可以自己去開拓。<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"><title>【每日一練】62—用HTML&CSS寫一個信息展示的卡片效果</title> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"></head><body> <section class="profile"> <div class="container"> <img src="images/photo.jpg"> <div class="profile-text"> <h1>web前端開發</h1> <h4>一個前端技術學習平台，博客網站，www.webqdkf.com</h4> </div> <div class="icons"> <a href="#"><i class='fa fa-weixin'></i></a> <a href="#"><i class='fa fa-weibo' ></i></a> <a href="#"><i class='fa fa-github-square' ></i></a> <a href="#"><i class='fa fa-renren' ></i></a> <a href="#"><i class='fa fa-qq' ></i></a> </div> <div class="newslatter"> <form> <input type="email" placeholder="輸入你的郵箱地址" required> <input type="submit" value="立即訂閱" required> </form> </div> </div> </section></body></html>*{ padding: 0; margin: 0; box-sizing: border-box; font-family: 'Work Sans', sans-serif; text-decoration: none;}section{ padding: 70px 5%;}.profile{ height: 100vh; width: 100%; background-color: #fafafa; display: flex; align-items: center; justify-content: center; text-align: center;}.container{ height: auto; width: 100%; max-width: 460px; background-color: #222429; padding: 0px 0px 40px 0px; border-radius: 20px; transition: all .40s ease; cursor: pointer;}.container:hover{ transform: scale(1.1);}.container img{ width: 100%; height: 360px; object-fit: cover; border-radius: 20px 20px 0px 0px;}.profile-text h1{ margin: 30px 0 10px; font-size: 35px; color: #fff; line-height: 32px; font-weight: 600;}.profile-text h4{ color: #00a6bc; font-size: 16px; font-weight: 400; margin-bottom: 1.2rem;}.icons i{ display: inline-block; color: #888; font-size: 18px; margin: 0px 7px; margin-bottom: 2.2rem; transition: all .40s ease;}.icons i:hover{ transform: scale(1.1); color: #00a6bc;}.newslatter{ display: flex; align-items: center; justify-content: center; margin: 0 30px;}.newslatter form{ width: 100%; max-width: 370px; position: relative;}.newslatter form input:first-child{ display: inline-block; width: 100%; outline: none; border: 2px solid #00a6bc; padding: 11px 90px 11px 9px; border-radius: 20px;}.newslatter form input:last-child{ position: absolute; display: inline-block; outline: none; border: none; background-color: #00a6bc; color: #fff; padding: 9px 29px; border-radius: 20px; cursor: pointer; top: 4px; right: 4px;}@media (max-width: 800px){ section{ padding: 20px 4%; } .container{ width: 100%; height: auto; max-width: 600px; } .container img{ width: 100%; height: 460px; object-fit: cover; }}寫在最後
以上就是今天【每日一練】的全部內容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點讚我，關注我，並將它分享給你身邊做開發的朋友，也許能夠幫助到他。
如果你還沒有關注我的視頻號的話，請記得關注我的視頻號，我在視頻號上也分享了很多案例效果。
【每日一練】61—用HTML&CSS寫一個個人單頁博客站
【每日一練】60—用HTML&CSS寫一個美食網站
【每日一練】59—寫一個中秋月餅的響應式卡片
【每日一練】58— 寫一個登錄和註冊頁
學習更多技能
請點擊下方公眾號
留言列表