「青训营 X 码上掘金」主题 1——个人名片

当青训营遇上码上掘金

主题介绍

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

基本结构

用一个大盒子div，然后在div里面放文字和图片，有姓名和邮箱，电话，图片是把本地的图片传入到了网上的一个网站，然后就通过http访问这张图片

代码实现

HTML部分

实现思路：将几个标签放在一个div盒子里面

		<div class="card">
			<section>
				<h2>Branden<span>前端</span> </h2>
				<img src="https://pic.imgdb.cn/item/63c65c79be43e0d30ed59997.jpg" alt="">
				<ul>
					<li>电话 ： 1556699885</li>
					<li>邮箱 ： XXXxxx@qq.com</li>
					<li>地址 ： 广东省</li>
					<li>简介 ： 劈里啪啦</li>
				</ul>
			</section>
		</div>

CSS部分

* {
				margin: 0;
				padding: 0
			}

			.card {
				width: 800px;
				height: 460px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -230px;
				margin-left: -400px;
				overflow: hidden;
				border-radius: 10px;
				background: url(https://pic.imgdb.cn/item/63c65f23be43e0d30edac311.jpg);
			}

			.card section {
				width: 600px;
				position: absolute;
				left: 100px;
				top: 80px;
				z-index: 9;
			}

			.card section h2 {
				font-size: 50px;
				letter-spacing: .1em;
				margin-bottom: 66px;
			}

			.card section span {
				font-size: 28px;
				font-weight: normal;
				margin-left: 50px;
				letter-spacing: normal;
			}

			.card img {
				float: right;
				width: 140px;
				border-radius: 50%;
			}

			.card section ul {
				border-left: #222 3px solid;
				padding-left: 28px;
			}

			.card section ul li {
				list-style: none;
				line-height: 38px;
				font-size: 18px;
			}

完整代码

到这里我的个人名片设计就完成了，虽然有点简陋