当青训营遇上码上掘金-太好了（大概是创作灵感和过程）

创作灵感部分：

• 第一次看到创作主题的时候，就觉得，写个名片挺好的。但是写的不是自己的名片，而是“冻鳗角色”的角色名片，“如果用名片来揭角色老底的话，不是很有意思吗？”
• 大约是这么想的，所以就这么弄了一个名片，还选了“吉良吉影”这个角色。
• 用他的原因，也许只是想让第一次知道JOJO的人能有兴趣去了解JOJO吧（绝对不是就是因为想让他过上不平静的生活）。
• 除此之外，如果这个小东西能让人乐一乐的话，也许做出来目的也就达到了吧。

过程部分：

过程的话其实也没有什么能说的，就是一个简简单单的div嵌套用盒子包了几个小盒子在里面放了内容罢了。甚至可以说是简陋（）。 不过也请让我简单的放一下代码吧。

首先就是本体部分：

		<div id="display">
			<div class="box">
				<div id="left">
					<img class="head" src="pic/head.jpg" alt="大头照">
					<p>姓名：吉良吉影</p>
					<p>公司：龟友百货超市</p>
					<p>职务：普通上班族</p>
				</div>
				<div id="middle">
					<img class="tie" src="pic/tie.png" alt="tie">
					<audio controls id="audio">
					  <source src="audio/audio.mp3" type="audio/mpeg">
					  您的浏览器不支持 audio 元素。
					</audio>
				</div>
				<div id="right">
					<p>自我介绍：</p>
					<p class="rh">我的名字叫吉良吉影，年龄33岁。
					家在杜王町东北部的别墅区内，未婚。
					我在[龟友连锁百货公司]上班，每天最晚也会在8点前回家。
					不抽烟，偶尔沾点酒，晚上十一点上床，保证睡足8个小时。
					睡前喝一杯热乎乎的牛奶，再做20分钟的柔软操暖身，然后再睡觉。
					基本能熟睡到天亮，像婴儿一样不留下任何疲劳和压力，就这样迎来第二天的早晨。
					健康检查结果也显示我很正常。
					</p>
				</div>
			</div>
		</div>

本体就简单的制作了一个大的盒子来作为一张名片的“纸质部分”里面的内容则是分了三个小盒子。。内容就如上代码所示...

其次就是CSS的内容了...：

		#display{
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
		#right{
			width: 340px;
			height: 240px;
			float: right;
		}
		#middle{
			width: 100px;
			height: 240px;
			float: left;
		}
		#left{
			float: left;
			width: 150px;
			height: 240px;
		}
		#audio{
			width: 100px;
			height: 40px;
		}
		.rh{
			text-indent: 2rem;
		}
		.box{
			width: 600px;
			height: 240px;
			margin: 20px;
			padding: 15px;
			background-color: mediumpurple;
			border: 8px solid lightgreen;
			border-radius: 20px;
		}
		.head{
			width: 120px;
			height: 120px;
			margin: 4px;
			border: 2px solid pink;
			border-radius: 5px;
		}
		.tie{
			width: 100px;
			height: 200px;
		}

CSS由于整个HTML文件过于简单，所以就也不额外再弄一个CSS文件了，直接就是放在了style里面。。CSS的样式也是很基础的改改颜色，调调大小和圆角罢了，代码依然是如上所示（）...

实际效果...

• 就是这样一个简陋的html页面。。。
• 最后，虽然是练习时长还没有两年半个人练习生）：}（，但是今后，我也会（大概）多做一些自己原创的个人作品给各位（笑）。
• Fin.