当青训营遇上码上掘金

一张小小的名片，最主要的内容是名片持有者的姓名、职业、工作单位、联络方式等，通过这些内容，把名片持有人的简明个人和或公司信息标注清楚，并以此为媒体向外传播。

在数字化信息时代中，每个人的生活工作学习都离不开各种类型的信息，名片以其特有的形式传递企业、人及业务等信息，很大程度上方便了我们的生活。

本文将介绍一个基于HTML、CSS和JavaScript的名片网页代码。进入青训营快一个月了，从一无所知到逐渐推开前端的大门，能够自己写一个小名片，虽然简陋，但我还是很开心！

实现

html：负责页面结构、内容
css：设计页面样式）
javascript：定义网页行为

HTML部分

我希望名片上所展示的内容有：名字、学校、电话和邮件地址，故用一些比较简单的标签来完成了HTML部分的创作


<!DOCTYPE html>
  <html>
  <head>
  <body>
    <h1>我的个人名片</h1>
    <div>
      <img src="https://p3-passport.byteimg.com/img/mosaic-legacy/3795/3033762272~100x100.awebp">
      <h2>名字</h2>
      <p id="name"></p>
      <h2>学校</h2>
      <p id="title"></p>
      <h2>电话</h2>
      <p id="phone"></p>
      <h2>E-mail</h2>
      <p id="email"></p>
    </div>
  </body>
</html>

CSS部分

body {
        text-align: center;
      }
      div {
        display: inline-block;
        width: 350px;
        border: 1px solid rgb(188, 211, 60);
        padding: 20px;
      }
      img {
        width: 180px;
        height: auto;
      }

JavaScript部分

window.onload = function() {
        document.getElementById('name').innerHTML = '该玩就玩';
        document.getElementById('title').innerHTML = '普通大学';
        document.getElementById('phone').innerHTML = '13812348765';
        document.getElementById('email').innerHTML = 'xxxxxxx@163.com';
      }

总结

上面所示的代码实现了一个彩色的个人名片。在HTML中，使用head和body标签定义页面内容；在head标签中引入CSS样式，将元素设置成彩色；在body标签中定义h1、div、img等标签；而在script标签中定义onload事件，用于设置个人信息的文本内容。最终，通过代码的形式我实现了这样一个个人名片。它不仅仅是一张简单的名片，更是见证我这个纯小白也能用代码展示了自己的技能和创造力。通过这张名片，我不仅仅向人们展示了自我，也展示了我对代码的热爱。

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

当青训营遇上码上掘金

实现

HTML部分

CSS部分

JavaScript部分

总结