用HTML做自我介绍
- 准备
- 开肝
- 分析
- 简便得搭个小框架
- 修饰
- 最后
准备
要有一个自我介绍的网页，并且做出炫酷的效果，我们得先创建一个文件，后缀名为.html，像这样
点击是，
之后右键，打开方式，选择vscode。按下英文感叹号，回车
开肝
分析
我们想要四个小div内容分别是姓名、年龄、专业、爱好，爱好再是一个介绍的段落，在右下角还有一个超链接。
简便得搭个小框架
我们将所有的东西放在boxes的div中。而四个小div内容分别是姓名、年龄、专业、爱好我们将它们的类定为box。
开始简便得大小框架，向我这样敲一遍。
注意必须要有第一行的提示，如果没有，需要删去最后一个字符再打一遍，如果他有了按下回车。
这是一个小框架就出现了。像这样：
然后“Ctrl + s”保存，然后回到卓面上你创建的文件然后双击运行。现在应该什么也没有。
这是到现在的所有代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="boxes">
<div></div>
<div></div>
<div></div>
<div></div>
<p></p>
<a href=""></a>
</div>
</body>
</html>
接下来开始填充内容。想这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="boxes">
<div>姓名：MMO死神永生</div>
<div>年龄：1······</div>
<div>专业：scratch、python、HTML和C++</div>
<div>爱好：敲代码</div>
<p>this is my information</p>
<a href="">More</a>
</div>
</body>
</html>
然后“Ctrl + s”保存，然后回到卓面上你创建的文件然后双击运行。
我的网站出来了，但是太丑了
修饰
我们将它的boxes变得透明并且居中，文字居中，上面再加一个标题。
第一步：居中
上面的margin是外间距，效果。
有点偏，那我们就使用就对定位，用margin-left和margin-top。在此之前，我们得先设一下boxes的width和height属性。
像这样就差不多，sorry我的浏览器帮我翻译了一下，我们接下使用margin-left和margin-top，代码长这样。
效果：
成功的到中间了。
接下来让boxes背景色变成肉色透明，再让边框加粗，文字居中，边框带有圆角。代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.boxes{
text-align: center;
background: rgba(245, 236, 236, 0.897);
width: 300px;
height: 400px;
border: 11px solid #ffffffaf;
position: absolute;
left: 50%;top: 50%;
margin-left: -150px;
margin-top: -300px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="boxes">
<h1>自我介绍</h1>
<div>姓名：MMO死神永生</div>
<div>年龄：1······</div>
<div>专业：scratch、python、HTML和C++</div>
<div>爱好：敲代码</div>
<p>this is my information</p>
<a href="">More</a>
</div>
</body>
</html>
最后我加了一些炫酷的效果。我直接把代码贴这里了，下篇会讲，主要是代码雨
最后效果如下：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
overflow: hidden;
}
.boxes{
color: #fff;
text-align: center;
background: rgba(245, 236, 236, 0.25);
width: 300px;
height: 400px;
border: 11px solid #ffffffaf;
position: absolute;
left: 50%;top: 50%;
margin-left: -150px;
margin-top: -300px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="boxes">
<h1>自我介绍</h1>
<div>姓名：MMO死神永生</div>
<div>年龄：1······</div>
<div>专业：scratch、python、HTML和C++</div>
<div>爱好：敲代码</div>
<p>this is my information</p>
<button class = "btn"><a href="">More</a></button>
</div>
<canvas id="myCanvas"></canvas>
<script>
const width = document.getElementById("myCanvas").width = screen.availWidth;
const height = document.getElementById("myCanvas").height = screen.availHeight;
const ctx = document.getElementById("myCanvas").getContext("2d");
const arr = Array(Math.ceil(width / 10)).fill(0);
const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".split("");
function rain() {
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#0f0";
arr.forEach(function (value, index) {
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
});
}
setInterval(rain, 30);
</script>
</body>
</html>
注意这个是动态网页。
纯代码雨代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code</title>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
const width = document.getElementById("myCanvas").width = screen.availWidth;
const height = document.getElementById("myCanvas").height = screen.availHeight;
const ctx = document.getElementById("myCanvas").getContext("2d");
const arr = Array(Math.ceil(width / 10)).fill(0);
const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
function rain() {
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#0f0";
arr.forEach(function (value, index) {
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
});
}
setInterval(rain, 30);
</script>
</body>
</html>
最后
按钮有点丑，没来的及设置，我有学会用HTML做3d立方体，不旋转，这篇结束了，敬请期待！
