用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立方体，不旋转，这篇结束了，敬请期待！
