我的名片 |「青训营 X 码上掘金」主题创作

当青训营遇上码上掘金

前言

我一直很喜欢小动物，之前有一只小狗，很可爱，我也很喜欢它，只是最后出了意外，现在已经不在了。最近刚好有「青训营 X 码上掘金」主题创作活动，主题创作活动的其中一个主题就是“我的名片”。那就借这次活动，为我的小白做一张名片，用来纪念。这是一款很简单的名片，只用到了HTML和CSS，主要运用了盒子和绝对定位。下面是我制作名片的一些过程。

主题：我的名片

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

演示

思路

• 运用HTML和CSS实现。在HTML中运用多个盒子嵌套的办法，也就是将多个信息封装在不同的盒子里，然后给盒子定位，就可以放在合适的位置。另外，将想要呈现出来的图片，信息的链接及具体信息写入。
• 在CSS中使用弹性布局，定义主轴和交叉轴都为中间，并使用绝对定位的方式，将信息放在合适的位置上。
• 代码其实很简单，只运用了HTML和CSS，只是在盒子的定位方面花费了一点心思来调整名片的大小，图片的大小，以及各个信息之间的位置，盒子之间的间隔等等。

代码实现

HTML部分：

<div class="card">
	<div class="aa">
		<div class="head">我的名片</div>
		<div class="bb">
			<div class="cc">
				<img src="https://ts1.cn.mm.bing.net/th/id/R-C.fa5a18c9b70412b4f390084a5edccardad04?rik=oa8A3DH%2bp8JUmA&riu=http%3a%2f%2fwww.baobeita.com%2fupload%2fimage%2fproduct%2f201406%2f10104200%2f4d0a0021-d1f1-43ce-b94b-c1b556fd7e00-large.jpg&ehk=7r0rZlzXAQqLIJiE9bz9Wz1zbBsjrALYeyqfAbasGFw%3d&risl=&pid=ImgRaw&r=0"/>
			</div>
			<div class="dd">
				<div>姓&nbsp&nbsp名：小白</div>
				<div>性&nbsp&nbsp别：女</div>
        <div>年&nbsp&nbsp龄：五岁</div>
        <div>生&nbsp&nbsp日：2016-3-20</div>
			</div>
		</div>
	</div>
</div>

CSS部分：

.card{
	display: flex;
	justify-content: center; /*主轴*/
	align-items: center; /*交叉轴*/
	height: 100vh;
}

 .aa{
		box-sizing: border-box;
		position: absolute;
		padding: 30px;
		border-radius: 10px;
  	width: 400px;
  	height: 250px;
		background-color: #c0d1e2;
		box-shadow: 1px 1px 5px 1px #999;
		backface-visibility: hidden;
		transition: all 1s;
 }

		.head{
			margin-bottom: 20px;
			font-weight: bolder;
		}

		.bb{
			display: flex;
    }

			.cc{
				display: flex;
				justify-content: center;
				width: 100px;
				height: 130px;
				background-color: rgb(86, 86, 86);
				overflow: hidden;
				cursor: pointer;
			}

			.dd{
				flex: 1;
				margin-left: 25px;
				line-height: 200%;
			}

总结

这就是这次名片制作的全部了，才开始学前端，本人只是一个前端小白，做的名片和大佬的没法比，我会更加努力地学习前端，争取下次呈现出更多样化的名片，或者拥有其他的效果吧。