当青训营遇上码上掘金
审题
主题 1：我的名片
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
当我们需要与他人分享自己的个人信息时，名片是非常重要的工具。个人名片通常包含有关个人姓名、职业、电话号码、电子邮件地址等重要信息。
我们的目的是在网页上创建一份名片，包括个人信息，并将其展示给他人。通过使用HTML语言，我们可以使用标记和标签来构建名片的布局，并且可以使用CSS来调整名片的样式和外观。
开搞
废话少说，直接开写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的名片</title>
</head>
<body>
<div class="container">
<div class="header">我的名片</div>
<div class="card">
<div class="name">胡图图</div>
<div class="title">前端小白</div>
<div class="contact-info">
<p>邮箱: 123456@qq.com</p>
<p>电话: (123) 456-7890</p>
</div>
</body>
</html>
代码效果如下：
美化
看到代码效果的你一定是满脸问号，我知道你很急，但是你先别急
接着，我们可以使用 CSS 和 JavaScript 来美化我的名片，以使其更加出色和富有交互性。
使用 CSS 可以更改卡片的样式，如背景颜色，边框半径，阴影效果等。例如，可以在卡片上添加渐变色背景，或改变字体颜色，以使其在不同的设备上更清晰。
以下是一个我使用 CSS 美化名片的示例：
/* 将容器设置为显示为flexbox */
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px;
}
/* 设置标题样式 */
.header {
width: 100%;
text-align: center;
font-size: 40px;
font-weight: bold;
margin-bottom: 40px;
}
/* 设置卡片样式 */
.card {
background: linear-gradient(to right, #56CCF2, #2F80ED);
width: 400px;
height: 600px;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
text-align: center;
padding: 40px;
}
.name {
font-size: 30px;
font-weight: bold;
color: white;
margin-bottom: 20px;
}
.title {
font-size: 20px;
font-style: italic;
color: white;
margin-bottom: 40px;
}
.contact-info {
font-size: 20px;
color: white;
margin-bottom: 20px;
}
.btn {
background-color: white;
color: #2F80ED;
border-radius: 10px;
padding: 10px 20px;
font-size: 20px;
cursor: pointer;
margin-top: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
美化后的效果如下
是不是瞬间大气了许多
总结
对于刚才的代码创作，主要采用了 HTML 和 CSS 两种技术来实现。首先，在 HTML 中通过一些标签来构建一个卡片的结构，将名片的不同部分分别定义为一个 div 元素，并给这些 div 元素添加类名，方便后面的 CSS 样式表进行样式的设置。
在 CSS 中，通过类选择器对 HTML 中的各个 div 元素的样式进行设置。包括对卡片的大小，颜色，字体大小等的设置。还有对点击按钮的样式设置。
优化
JavaScript 可以使我的名片更加交互性。例如，可以添加卡片上的点击效果，以隐藏或显示更多信息，或将名片内容动态加载到页面上。
<script>
const toggleBtn =
document.querySelector("#toggle-btn");
const hiddenInfo = document.querySelector("#hidden-info");
toggleBtn.addEventListener("click", function() {
if (hiddenInfo.style.display === "none") {
hiddenInfo.style.display = "block";
toggleBtn.innerText = "不展开";
} else {
hiddenInfo.style.display = "none";
toggleBtn.innerText = "展开";
}
});
</script>
如果需要添加更多信息，可以在名片上方的 <div class="container"> 元素中添加新的标题和段落元素。
例如，如果你想添加你的个人网站链接，可以在代码中添加以下内容：
<p class="contact">
<a href="https://yourwebsite.com">Visit my website</a>
</p>
同样，如果你想添加你的公司名称，可以在代码中添加以下内容：
<h2 class="subtitle">Company Name</h2>
创作思路
对于代码创作的更详细的展开，我们可以先从 HTML 开始。HTML 是网页内容的基础，它是一种标记语言，通过使用不同的标签来表示不同的内容，例如，通过 <header> 标签表示页面的头部，通过 <section> 标签表示页面的内容。在这张卡片的制作中，我们采用了一些 HTML 的基础标签，如 <div>、<p>、<img> 等。
接下来，CSS 是 Cascading Style Sheets 的缩写，它是一种用于设置 HTML 标签的样式的语言。在这张卡片的制作中，我们通过使用 CSS 定义了不同 div 元素的样式，如设置宽度、高度、背景颜色、字体大小等。使用 CSS 可以很方便地对网页的样式进行定制，而且很容易更改。
最后，JavaScript 是一种强大的编程语言，它可以用于制作网页上的交互效果。在这张卡片的制作中，我们使用 JavaScript 实现了“更多信息”按钮的功能，用户点击按钮即可显示或隐藏更多信息。
在实际的应用中，HTML、CSS、JavaScript 三种技术是相互配合的，它们可以创造出各种多样的网页
