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

网页的效果可以访问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>

个人首页静态网页编写中的踩坑_第1张图片

你可能感兴趣的:(个人首页静态网页编写中的踩坑)