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

阿巴拉
134 阅读3分钟

当青训营遇上码上掘金，会碰撞出哪些火花呢？今天我想来细细谈论我参与「青训营 X 码上掘金」主题创作活动的整个过程，如果有兴趣的朋友们可以往下阅读（代码量不会太多，主要是想谈谈我的个人想法和整体活动情况）

【参加活动的目的】

我是一名数据科学与大数据技术专业的大二学生，一年半的学习让我感到既忙碌又空洞，因为我认为在这一年半的时间里我并没有学习到任何技术。今年寒假我发现了字节的青训营培训，「青训营 X 码上掘金」主题创作活动深深地吸引着我，我想尝试自己写出一个属于我创作的网页，想让自己真正学会一些知识

【选题：我的名片】

活动推荐学习前端的同学选择主题1我的名片和主题2遇见，在多番思考后，我选择了主题1我的名片，我想要借此机会真正的了解自己，向大家介绍自己同时也发现和挖掘自己身上的亮点所在。

【代码创作】

构思

我想用两个网页来展示我的名片，首先是一个简单介绍，同时给与大家选择的机会去点击查看我的详细信息，两个网页都选择用一个统一的图像作为背景，图像选择我某一喜爱的事物告诉大家我的喜好和风格。

记事本编写代码

由于我对「码上掘金」平台编写代码并不熟悉，我首先在电脑的记事本编写好自己的代码。我用两个HTML文件和一个CSS文件来完成整个“我的名片”代码创作

  • 个人介绍（即简单介绍页面代码如下）：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YY</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: url(D:/好看的/命韵峋环3.jpg) no-repeat;
            background-size: cover;
        }

        .box {
            color: rgb(122, 139, 139);
            width: 450px;
            background: rgba(0, 0, 0, 0.1);
            padding: 40px;
            text-align: center;
            margin: auto;
            margin-top: 5%;
            font-family: 'Century Gothic', sans-serif;
        }

        .box .box-img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }

        .box h1 {
            font-size: 50px;
            letter-spacing: 4px;
            font-weight: 400;
        }

        .box h2 {
            font-size: 30px;
            letter-spacing: 3px;
            font-weight: 300;

        }

        .one {
            text-decoration: none;
            font-size: 20px;
            font-weight: 600;
            color: grey;
        }

        .one:hover {
            color: rgb(0, 0, 0);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="D:\好看的\命韵峋环❤❤.jpg" alt="" class="box-img">
        <h1 class="name">YY</h1>
        <h2>一个平平无奇努力追赶着的人</h2>
        <h3>感谢你来发现我</h3>
        <h3>如果你想知道更多，请点击</h3>
        <a href="YY的主页.html" class="one">YY</a>
    </div>
</body>

</html>

首页图片展示如下：

image.png

  • 当访客点击"YY"即可进入我的主页部分（详细信息）代码如下：
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YY的主页</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
  <tr>
    <td width="100" align="center">YY的个人简介</td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td><table width="760" border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td>
          <p >姓名：YY</p>
          <p >性别：女</p>
          <p >生日：0307</p>
          <p >专业：数据科学与大数据技术</p>
          <p >爱好：美食、追剧、敲代码~</p>
          <p >你看&#8212;&#8212;</p></td>
        <td><img src="D:\好看的\也是阿瑟.jpg" width="400" /></td>
      </tr>
      <tr>
        <td><img src="D:\好看的\命韵峋环.jpg" width="400" /></td>
        <td>
          <p >好吧，我最喜欢帅哥美女❤ </p>
          <p >超级❤命韵峋环！ </p>
          <p >当然我还是很热爱学习滴 </p>
          <p >忙时披星戴月追赶最后期限 </p>
          <p >闲时书桌一隅领略文人风骨 </p>
          <p ></p></td>
      </tr>
      <tr>
        <td><p >我们每个人 </p>
          <p >都在一直不停忙碌着 </p>
          <p >口头里说着“我要躺平” </p>
          <p >却总是不会躺平，一直在奔跑 </p></td>
        <td><img src="D:\好看的\photo.jpg" width="400" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
  • CSS文件代码如下：
@charset "utf-8";
body {
	background-image: url(D:/好看的/命韵峋环3.jpg);
	background-size: cover;
	font-family: "微软雅黑";
	font-size: 16px;
	line-height: 25px;
	color: #333;
}
.main {
	background: rgba(0, 0, 0, 0.1);
	color: #000;
}

图片展示如下：

image.png

码上掘金代码编写

  • 我将编写完成的代码复制粘贴到“码上掘金”平台发现图片无法展示，搜索问题后发现了一个从未注意到的事项，我的图片是本地图片而非网络图片，在平台无法展现。
  • 在网上查找了许多解决方法未果后，了解到网络图片的原理所在，我将图片上传至云盘而后复制图片链接，此时的图片链接已是网络图片。将本地图片置换成网络图片后，顺利完成了图片的展现。

存在的问题

  • 目前两个网页均已创建，但在平台无法相互连接
  • 图片链接在一段时间后无法展现
    请大佬求教！

【小结】

感谢所有阅读到最后的朋友们，提前祝贺大家新年快乐！

avatar
文章
阅读
粉丝