其他
【每日一练】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;
}
}
写在最后
以上就是今天【每日一练】的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
如果你还没有关注我的视频号的话,请记得关注我的视频号,我在视频号上也分享了很多案例效果。
学习更多技能
请点击下方公众号