其他
【每日一练】62—用HTML&CSS写一个信息展示的卡片效果
写在前面
前面几期的练习，我们练习了一些单页网站的实现效果，今天我们来点容易的，这样可以调节一下。
其实，我们写各种项目，真的好像小孩子搭积木游戏一样，我们只要把每个模块搭建好了，一个完整的项目就慢慢出来了，至于最终体验如何，这个都是需要慢慢优化，任何一个项目都不可能一步到位的，都会存在各种问题，因此，我们在平时的练习中，不要有完美主义情结，先完成，再完美完善。
今天，我们就来先搭建一个小模块，用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; }}写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
如果你还没有关注我的视频号的话，请记得关注我的视频号，我在视频号上也分享了很多案例效果。
学习更多技能
请点击下方公众号