【HTML】做一个HTML的个人简介页面

文章目录

布局
- 头像旋转
- 文字排版
- 绘制矩形
- 禁用左右键和F12
- 图片链接
- 飘雪
效果

我的hexo博客是看的大神教程一步步做的,然后所以我的about界面,也准备仿着大佬的做，之前根本没学过web的前端，只接触过xaml这种带标签的设计语言…

布局

设计这个东西还是比较难得,我就直接没有设计,布局是照着别人的抄的,虽然实现是自己实现的，但是如果还是侵权的话，联系我删除
大佬的about界面

最上层,旋转的头像、昵称、生日等信息
中间左半部分，技能和占比
中间右半部分，个人的简介
底部，图片链接
最底部，版权信息、博客链接

确定好每个区域的位置，背景色和透明度，颜色我不会弄成渐变的，暂且纯色代替，css我也没学过，写法如果错误请见谅…

<style>.center {position: fixed;left: 20%;right: 20%;top: 10%;width: 60%;height: 15%;opacity: 0.95;float: left;background-color: white;}.centerAfterLeft {position: fixed;left: 20%;top: 26%;width: 29.5%;height: 50%;opacity: 0.95;float: left;background-color: white;}.centerAfterRight {position: fixed;right: 20%;top: 26%;width: 29.5%;height: 50%;opacity: 0.95;float: left;background-color: white;}.footer {position: fixed;left: 20%;right: 20%;top: 77%;width: 60%;height: 15%;opacity: 0.95;background-color: white;}.lastfooter {position: fixed;left: 20%;right: 20%;top: 93%;width: 60%;height: 30px;vertical-align: middle;text-align: center;background-color: transparent;}body {background-color: rgb(81, 77, 85);font-family: 楷体;}</style>

头像旋转

遇到不会的就要多百度一下，然后我惊讶的发现了大佬也是查询的这篇博客，还留了言…
HTML图片旋转

基本上博客上的内容复制过去就直接能用，然后我就不求甚解了…

文字排版

拿最上层举例,昵称和后面的文字是需要在一行的,标签p需要设置display:inline-block;
然后空格我也不知道为啥HTML默认不显示,我查到的方法是&nbsp,好像markdown里也是这样的

<div style="float: left;margin-left: 20px;"><p style="margin-bottom: 10px;display: inline-block;font-weight: bold;">昵称:</p><p style="margin-bottom: 10px;display: inline-block;">&nbsp&nbsp染墨灬若流云</p><br><p style="margin-bottom: 15px;display: inline-block;font-weight: bold;">最爱:</p><p style="margin-bottom: 15px;display: inline-block;">&nbsp&nbsp迷人又可爱的鹿宝宝~</p></div>

我知道这样写会有问题,如果是xaml布局,我会考虑竖屏下的情况,避免分辨率变化造成的页面显示异常,但是html实在是无能为力…

中间的右半部分,那个黑色的点很容易让人想到markdown的-,那么是不是html可以用markdown语法呢?很遗憾不可以,但是可以把markdown转换成html,Typora或者CSDN的编辑器都支持这个功能

<ul><li>学历: </li><br><li>现况: </li><br><li>目标: </li><br><li>博客: </li><br><li>兴趣: ><br>
</ul>

导出后最后是没有<br>标签的,我是为了和左边对齐

绘制矩形

这个我查了很多,都是用js来做,可惜js我也没学过,我觉得我在window_load事件中写会导致刷新的时候明显感觉矩形闪烁,大佬的博客about界面就没这个问题,所以我觉得这个方法不太对…

    /*技能条*/var canvas = document.getElementById("SkillCanvas");if (canvas == null)return;var t = new Array(12, 39, 64, 89, 114);var y = new Array("#4AB480", "#E1AB3E", "#DC595#7390F2", "#747DC5");var l = new Array(120, 150, 40, 60, 30);var content = canvas.getContext("2d");for (var i = 0; i < 5; ++i) {content.fillStyle = y[i];content.fillRect(0, t[i], l[i], 15);}

这样写维护性很差很差,但是考虑到这个界面过很久很久才可能更新,所以先只追求效果,不追求代码规范(给自己的菜找一找借口)

技能的百分比就还是之前的方法,移到合适的位置就好
排版的话我毕竟没学过,追求效果类似我用的margin-left,直接偏移过去,不知道更优雅的做法是怎么样的…大佬的这个界面是禁用左右键和F12的…

禁用左右键和F12

大佬这样做的目的可能是保护自己的代码或者不让自己的界面被人改动,既然我们是仿照大佬的做,这个功能我们也要有

JS也可以禁用左右键,但是网上说禁用JS脚本后这招就没用了,所以这里用html自带的属性

<body topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false"onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()">

将这段放入body标签中即可生效

禁用F12我只找到了JS的方法,不知道大佬是怎么做的…

window.onkeydown = window.onkeyup = window.onkeypress = function (event) {// 判断是否按下F12，F12键码为123  if (event.keyCode = 123) {event.preventDefault(); // 阻止默认事件行为  window.event.returnValue = false;}}

图片链接

链接是<a>标签,图片链接就是在这个标签里加入一个<img>标签

<a href="https://blog.csdn.net/Austin_Yan" target="-blank" title="CSDN"><img id="blog" style="margin-top: 0px;left: 75%;position: absolute;"src="https://cdn.jsdelivr.net/gh/AustinYANyh/Image@1.1.1/CSDN.png"></a>

target
设置为-blank表示在浏览器新标签页打开
title
替换文字,鼠标移到上方显示的文字

唤醒微信的我没查到,查到的也不能用,但是QQ的可以
跳转链接为http://wpa.qq.com/msgrd?v=3 &uin=1241528539 &site=qq&menu=yes
里面有空格是因为我不加空格我跳转之后啥也不发生…加了空格貌似发送了点什么但是不太对的样子…

飘雪

飘雪的代码来源于大佬的教程https://www.itrhx.com/2018/08/27/A04-Hexo-blog-topic-personalization/

将js代码拷贝到script标签下,然后window_load事件调用即可

window.onload = function StartSnow() {/* 调用及控制方法 */var snow = new snowFall({ maxFlake: 60 });snow.start();

效果

一些小细节比如说,中间左右部分之间的间隔和上下的不一致…背景图没有找用纯色代替…还有大佬的模块背景和技能条的颜色都是渐变的…这些我都没处理好,不过还是先记录下来先做到这个样子吧…

最终效果

不知道什么时候更新了一下，在里面从three.js的教学网站上把那个樱花也加进去了，一个个发太麻烦了，上传了，只要2积分，不动态调分

https://download.csdn.net/download/Austin_Yan/85293874