当青训营遇上码上掘金
主题介绍
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
思路
最近想换手机，所以一直在搜索查询手机相关信息，偶然间看到了以前功能机按键机的图片（如图），就在思索着如何使用 HTML + CSS 来实现响应效果。然后又碰上了青训营官方账号发起了主题创作入营版的活动，就打算结合来完成我的名片这一主题。
技术栈
使用的是纯 HTML + CSS 来完成整个手机渲染效果，再通过少量简单的 JavaScript 代码，实现点击按键显示自我介绍内容效果。
主要的创作时间，都花在手机效果的实现上，尽管大致完成了渲染的效果，但还有很多细节上的东西没有深究。比如手机上的摄像机孔、按键上的图案字母等等，都有待进一步完善和实现。
效果展示
部分代码
html中，主要将手机分为上部分展示屏和下部分操作盘的布局，同时对于操作盘又分为上部分主要功能键、下部分数字键，对于按键的排列布局采用的是flex的方式。
<body>
<div class="phone-body">
<div class="phone-top">
<div class="phone-receive"></div>
<div class="brand">ByteDance</div>
<div class="phone-screen">
<div class="content-defalut">
<center>
<strong>
自我介绍专用机
<br>
点击对应按键查看...
</strong>
</center>
</div>
<div class="content-name">
<strong>大家好！我的名字叫海绵宝宝，很高兴认识你们~~~</strong>
</div>
<div class="content-email">
<strong>我的邮箱是12345679@abc.com 有事可以联系我哦</strong>
</div>
<div class="content-avatar">
<strong>
没错，这可爱到爆的正是我！
</strong>
<div>
<img src="./avatar.jpg" width="50%" title="头像">
</div>
</div>
<div class="content-job">
<strong>我最热爱的工作是在蟹堡王当厨师，做出美味的蟹黄堡</strong>
<div>
<img src="./hamburger.jpg" width="80%" title="工作">
</div>
</div>
<div class="content-hobby">
<strong>我的最大爱好，是和我最好的朋友派大星，一起去抓水母！</strong>
</div>
</div>
</div>
<div class="phone-bottom">
<ul class="keys-top">
<li>
<div id="name">姓名</div>
<div id="email">邮箱</div>
</li>
<li>
<div class="big" id="avatar">头像</div>
</li>
<li>
<div id="job">职位</div>
<div id="hobby">爱好</div>
</li>
</ul>
<ul class="keys-bottom">
<li>
<div>1</div>
</li>
<li>
<div>2</div>
</li>
<li>
<div>3</div>
</li>
<li>
<div>4</div>
</li>
<li>
<div>5</div>
</li>
<li>
<div>6</div>
</li>
<li>
<div>7</div>
</li>
<li>
<div>8</div>
</li>
<li>
<div>9</div>
</li>
<li>
<div>*</div>
</li>
<li>
<div>0</div>
</li>
<li>
<div>#</div>
</li>
</ul>
</div>
</div>
</body>
css中，预设了rem根字体来作为整个页面效果的基本单位，以达到响应式的效果。
*{
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0;
}
html{
background-color: #bfa;
font-size: 9px;
}
.phone-body{
width: 23rem;
height: 51rem;
margin: 20px auto;
border: 1rem solid #DADADA;
border-radius: 3rem;
position: relative;
background-color: #F1F1F1;
}
.phone-receive{
width: 4rem;
height: 0.5rem;
border-radius: .3rem;
background-color: #292728;
position: absolute;
top: 1rem;
left: 50%;
margin-left: -2rem;
}
.phone-top{
width: 21rem;
height: 26rem;
/* border: 1px solid black; */
border-radius: 1rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
position: relative;
background-color: #121212;
}
.brand{
font-weight: 700;
color: rgba(255, 255, 255, .7);
text-align: center;
position: absolute;
top: 2rem;
left: 50%;
transform: translate(-50%);
}
.phone-screen{
width: 90%;
height: 19rem;
background-color: aqua;
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 1rem;
overflow-y: scroll;
}
.phone-screen::-webkit-scrollbar { width: 0 !important }
.phone-bottom{
/* border: 1rem solid blue; */
border-radius: 1rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.keys-top{
margin-top: 3px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.keys-top li div,.keys-bottom li div{
height: 3rem;
width: 5rem;
border-radius: 1rem;
border: 1px solid rgba(0,0,0,.4);
margin: 3px;
background: #E6E6E6;
text-align: center;
line-height: 3rem;
}
.keys-top li div.big{
height: 5rem;
width: 5rem;
border-radius: 1rem;
line-height: 5rem;
}
.keys-bottom{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-flow: row wrap;
}
ul>li>div:hover{
cursor: default;
background: rgba(230, 230, 230, .1);
}
ul>li>div:active{
user-select: none;
cursor: default;
background: rgb(217, 215, 215);
}
.phone-screen div{
padding: 3px;
word-break: break-all;
text-indent: 2rem;
text-align: left;
overflow-y: auto;
}
.content-avatar img{
margin-left: 20px;
}
.content-name,
.content-email,
.content-avatar,
.content-job,
.content-hobby{
display: none;
}
结语
该效果实现技术较为简单，实现效果也较为一般，仍然有许多可以改进拓展的地方。比如还可以拓展更多的按键功能，添加更多的展示的动画效果，对代码进行封装处理等等，总之，相当于一个比较简单的小练习，但也学习和巩固到了不少的知识。
