当青训营遇上码上掘金 | 我的名片

很高兴能够参加这次青训营前端专场，本人作为一个学了100多天前端的大一学生，看到两个主题创作活动后，我觉得用现有的技术写出一个自己的名片是一件很酷的事情哎，（当然不是因为这个主题对小白比较友好）

主题介绍

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

构建思路

既然是个人名片，自己又是一名学前端的童鞋，当然不是简简单单的写姓名，性别，地址等等啦。body部分我放了一点自己写过的项目，简洁明了，主次分明。三个部分主要是header、body和footer。图片上传到图床通过url来访问

header：简单的介绍自己，加上自己在网络上经常使用的头像
body：放写过的一些项目
footer：结语部分

使用flex布局，方便简单，无需过多调整

代码

html

  <div class="app">
    <!-- 个人信息 -->
    <div class="header">
      <h1>Hello,I am YuXuan</h1>
      <h3>一名大一学生，正在学习前端中~</h3>
      <img src="https://i.328888.xyz/2023/02/10/RpJpc.png" alt="">
    </div>
    <!-- 项目信息 -->
    <div class="body">
      <h3 class="title">那么学习前端100多天，我都做过些什么呢？</h3>
      <h4>静态页面：比较多，这里就随便放俩，因为学过平面设计，所以原型图是自己画的啦~</h4>
      <div class="section1 section">
        <img class="image" src="https://i.328888.xyz/2023/02/10/RpxP5.png" alt="">
        <p>主页</p>
        <img class="image" src="https://i.328888.xyz/2023/02/10/RpxP5.png" alt="">
        <p>二级页面</p>
      </div>
      <h4>旅途项目: 使用vue3全家桶+vant3开发</h4>
      <div class="section2 section">
        <img class="image" src="https://i.328888.xyz/2023/02/10/Rp9WJ.jpeg" alt="">
        <p>主页</p>
        <img class="image" src="https://i.328888.xyz/2023/02/10/RpK9A.jpeg" alt="">
        <p>详情页</p>
        <img class="image" src="https://i.328888.xyz/2023/02/10/RpPNN.jpeg" alt="">
        <p>选择日期</p>
        <img class="image" src="https://i.328888.xyz/2023/02/10/RpM4o.jpeg" alt="">
        <p>选择城市</p>
      </div>
      <h4>运动会计分系统：vue3全家桶+elementUI</h4>
      <div class="section3 section">
        <img class="image2" src="https://i.328888.xyz/2023/02/10/RphuC.jpeg" alt="">
      </div>
    </div>
    <!-- 结语 -->
    <div class="footer">
      <h3>永远积极的前进下去吧！</h3>
    </div>
  </div>

CSS

    *{
      padding: 0;
      margin: 0;
    }
    img {
      vertical-align: top;
      border-radius: 15px;
    }
    body {
      background-color: #f0f2f5;
      color: #ee7544;
      font-family: "得意黑", "LXGWFasmartGothic", system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif;;
    }
    h4 {
      font-size: 20px;
    }

    .app {
      margin: 0 auto;
      margin-top: 60px;

      padding: 30px;
      width: 500px;
      border-radius: 20px;
      background-color: #fff;
    }

    .header h1{
      text-shadow: 10px 10px 10px #909090;
      margin: 12px 0;
    }

    .header h3 {
      margin: 20px 0;
    }

    .header img {
      border-radius: 50%;
      width: 100px;
    }

    .image {
      margin: 12px 0;
      width: 300px;
    }

    .image2 {
      width: 400px;
    }

    .body .title{
      color: #000;
    }

    .body p{
      color: #000;
    }
    
    .title {
      margin: 50px 0;
      font-size: 22px;
    }

    .section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 20px 0;
    }

名片

最后

一张简简单单的名片就这样完成啦，全是基础，小白也能写哈哈哈。准备再去学一点让这张名片可以通过打字机效果显示出来。虽然自己现在写过的项目不多，但是希望好好努力，以后写出像诗一样的代码。