个人首页静态网页编写中的踩坑

网页的效果可以访问https://test.jmbaozi.top/homepage/进行查看，或者下载源代码本地浏览。

欢迎大家访问我的个人博客：https://jmbaozi.top/

1.canvas标签表面无法添加其他内容

HTML5中引入标签，用于图形的绘制，为图形的绘制提供了画布，是图形容器，具体的图形绘制由JavaScript来完成。在该网页中我加入了气泡特效作为背景(原文)，但是由于canvas的特性，无法将其他内容覆盖到气泡特效上面。所以采用了另一种方法，将标签的属性写为

#canvas{
    border: 1px;
    top: 0px;
    left: 0px;
}
"canvas" width="3000" height="1080">

这样设置可以使气泡铺满大部分显示器(如果你是土豪超大屏，就当我没说)，同时为了让小屏可以适应，取消了X，Y方向的滚动条：

html{
	overflow-x: hidden;
	overflow-y: hidden;
}

最后将想要添加的内容直接设置定位和尺寸属性，比如头像放置的位置在右边的某个位置：

#touxiang{
    position: absolute; 
    left: 1375px;
    top:150px;
}
"touxiang">
	"img/touxiang.jpg" width="200" height="200">

2.字体设置

p标签内的字体动态换行时会产生重叠，原因是在设置行高时尺寸小于字体的尺寸。

p{
    font-size: 23px;
    /* line-height: 10px; */
    font-family: 隶书;
}

3.壁纸尺寸设置

在壁纸一页中，因为每张壁纸的尺寸不同，有手机壁纸，也有电脑壁纸，所以为了美观，将电脑壁纸放在了手机壁纸的前面。同时将每张壁纸的尺寸都按比例缩小。同时当鼠标放到图片上时，图片会适当放大。

img{
	width: 500px;
	/* float: left; */
	padding: 1.5%;
}
img:hover{
	width: 600px;
}

其中，为了实现按比例缩放，仅需要设置宽或者高，另一个就会自动缩放。在这里，我设置了宽为500px。

4.将JS函数的结果输出到网页

目的为将九九乘法表输出到网页，利用js函数可以很轻易地得到结果：

function mulTable(){
	for(var i=1;i<10;i++){
		for(var j=i;j<10;j++){
			document.write(i+"x"+j+"="+i*j+"；")
			if(j==9){
				doucument.write("
")
			}
		}
	}
}

用点我查看九九乘法表便可以打印出结果，但是因为是由按钮来调用后加载的，结果会将原先加载的内容冲刷掉，只留下九九乘法表，显然这不是应该的效果。

理想的效果是将结果输出到一个

中，我之前搜索了一些方法，有的使用各种框架，也有的方法无效，后来我就想到能不能先将结果保存到一个数组中，最后将这个数组添加到容器中，显然，这种方法是可行的，但是又发现了一个问题，就是输出数组的时候会将每个元素之间的逗号","也输出，这样就非常的难看。搜索解决方后我找到了这个一眼就能看明白的方法，先将别数组中每个元素遍历到一个字符串中，最后将这个字符串输出到相应的容器中。这样，就形成了最终版：

大体步骤：利用循环得到"1x1"到"9x9"的结果，将其放入一个数组，然后再将数组内的元素放入一个字符串中，最后用innerHTML方法将字符串输出到

中。

<div id="result">div>
<script>
function mulTable(){
	var result = new Array()
	for(var i=1;i<10;i++){
		for(var j=i;j<10;j++){
			result.push(i+"x"+j+"="+i*j+"；")
			if(j==9){
				result.push("
")
			}
		}
	}
	var c = ""
	for(var i =0;i<result.length;++i){
		c += result[i]
	}
	var x = document.getElementById("result")
	x.innerHTML = c
}
script>

这样看起来似乎是没有问题了，但是。。。当我写完的时候我突然意识到为什么不直接用字符串，省去数组这一步

<div id="result">div>
<script>
function test(){
    var result = ""
    for(var i=1;i<10;i++){
        for(var j=i;j<10;j++){
            result += (i+"x"+j+"="+i*j+"；")
            if(j==9){
                result += ("
")
            }
        }
    }
    var x = document.getElementById("demo")
    x.innerHTML = result
}
script>