js个人博客设计大作业

article/2025/10/14 15:50:07

视频演示:

大作业演示

图片看效果:

 

 

 

  • 网站规划设计

1.结构设计

共设计3个HTML界面:一个登陆界面,一个注册界面,以及主页面;

2.内容规划

登陆界面包含logo,输入用户名,输入密码和登陆按钮。

用一个div的小盒子css样式规定这个界面出现的位置,并通过css样式设置内元素的位置和样式;并设置背景视频和音乐。点击logo可以进入注册界面(注册界面按钮隐藏在logo样式里了),输入正确的用户名和密码(那…就这样吧,dengning)点击登陆按钮可以进入主页面。

    注册界面包含输入用户名,密码,email,姓名,手机号,性别;以及注册按钮,和跳转登陆的链接。

    用一个div的小盒子css样式规定这个界面出现的位置,并通过css样式设置内元素的位置和样式;并设置背景视频和音乐。点击注册按钮后跳转至新的本页面,代表注册成功的意思(因为没有连接数据库,就这样表示注册成功),然后点击去登录的超链接跳转至登录界面。

    主页面包含菜单栏和菜单栏对应的页面。

    主页包含头像,艺术字描述,退出登录的按钮,以及背景和音乐;介绍包含标志,图片相册,艺术字描述,个人介绍栏,背景图片以及跳转我的csdn博客的链接;随心录包含标志,我收藏的语录(div以css设置样式小盒子隔绝开,且小盒子是弹性伸缩)以及背景图片;收藏包含标志,图片相册,及跳转链接;推荐包含标志和推荐的番剧的图片和文字介绍和跳转链接;留言包括标志,图片,留言框;留言墙包含标志和发布的留言(可删除);页面尾部包含一些简短的介绍。

3.技术方案

使用WebStorm编写html,JavaScript和css样式代码。

  •  网站特效设计

登录密码锁定特效:不是已经保存的密码不能登录成功。

应用了字符匹配的知识,满足条件就可以跳转界面:

if(username=="那...就这样吧" && usermm=="dengning"){window.location.href='w1.html';
}else{alert("抱歉,用户名或密码错误!")
}

头像图片旋转特效:鼠标放置头像上方时,头像会缓慢旋转。

缓慢旋转显示 css实现伪js类:

transition: transform 2s ease-out;

发布和删除留言特效:发布带有样式的留言块,并点击留言块就会删除。

    在HTML中可以添加<a><p>之类的标签,并将整体发布出去,如此样式就可以设置了,删除留言是利用了节点操作用数组存储发布留言的标签位置,实现删除。
html += "<div class='box tilt'> " + "<h3>" + biaoti + "</h3>" + "<p>" + xmm + ":" + emm + "<br>";html += "&nbsp;&nbsp;" + text_area + "<br>" + "</p>" + "<a href='javascript:'></a>" + "</div>";document.getElementById("scanner").innerHTML += html;var del = document.getElementsByClassName("box-container")[0];var user = document.getElementsByClassName("box tilt");for (let i = 0; i < user.length; i++) {user[i].onclick = function () {this.parentNode.removeChild(this);}

  •  心得体会

    经过这次设计JavaScript大作业后,我对css样式有了更多的理解,也对前端设计有了更全面的看法,不经历就很难了解,不了解就很容易产生偏见,以前我是认为前端页面设计就只是依据自己的想法去实现需要的界面,一开始设计网页时网页是这么理解的,但是一旦遇到bug,很多东西都是网上没有的,你必须自己去浏览器调试,去一个个百度,去问别人。有时候一个bug一改就是一晚上,而且相当一部情况下是调试失败的,这时候就只能放弃原来的思路,重新去编写,甚至有时需要重新写一整个页面。

    当然这次经历也给了我很多收获,向网上学习了很多知识,也在网上看见了很多的样式,很多美观的界面,以及一些的前端开源网站,从无到有无疑是很困难的,但是互联网可以给我们很多帮助,这应该就是所谓的工欲善其事必先利其器吧!可就算是这样,在我碰见bug时有时还是会调试老半天,这虽说有我的学习方向不同的因素在里面,可还是能够说明没有什么是简单的,可能这就是所谓的存在即合理!

    那么在这里我总结一下我的收获:在设计html的id和class时一定要注意,因为很多时候都是牵一发而动全身,这如果乱了很可能会让你的样式和js的功能冲突,导致页面显示或功能出现各种bug,所以一定要慎重!还有一定要把功能都想清楚了并想好大体样式了在开始编写代码,不然很容易出现改了前面改后面的情况。还有就是先把功能都做完了在最后去完善你喜欢的样式(一开始随便弄弄就行),因为一般后面都要改,而且可能还不是一次两次的改。

大体就是这些问题和收获,解决问题的最好方法就是面对它,解决了就会有收获,慢慢的发展下去,总有一天我也可以!

图片和完整代码并没有给出,如果想要可以私聊^-^,看到这里,不如点个赞,不如ლ(❛◡❛✿)ლ

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>欢迎来到--我的世界</title><link rel="stylesheet" href="css/w1.css"></head>
<body><header><!--<nav> 标签定义导航链接的部分。--><nav class="navbar"><a href="#home">主页</a><a href="#about">介绍</a><a href="#services">随心录</a><a href="#portfolio">收藏</a><a href="#blogs">推荐</a><a href="#contact">留言</a><a href="#ly">留言墙</a></nav></header><!-- 导航栏结束 --><!-- 主页页面 <section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。 -->
<!-- 插入背景图片和背景音乐并设置不显示播放器的自动循环播放
background-size: 100% 100%;-moz-background-size:100% 100%;--自适应全屏background-repeat--不管怎样只显示一张图片
autostart="true"--自动播放音乐
loop="true" --自动循环
hidden="true"隐藏播放器-->
<section class="home" id="home" style="background-image: url(images/11.jpg);background-size: 100% 100%;-moz-background-size:100% 100%; background-repeat:no-repeat;"><embed src="images/阮言Ruany%20-%20一生独一(翻自%20西彬呀).mp3" autostart="true" loop="true" hidden="true"></embed><div class="content"><img class="tilt" src="images/7.png" alt=""><!-- 插入图片 --><h3> 灰之魔女 <span>イレイナ</span> </h3><p>  <span class="typing-text"> 有一位魔女飞在草原之上,魔女一副兴奋喜悦的模样,下一个国家会是什么样子,下一个遇见的人会是什么样子?<br>她满心期待,这位旅行者究竟是谁呢? </span> </p><a href="1dl.html" class="btn">drop out</a><!-- 设置退出的超链接 --></div></section><!-- 主页结束 --><!-- 介绍界面  -->
<!-- 其中包含css样式和跳转至我的csdn博客的链接  -->
<section class="about" id="about" style="background-image: url(images/12.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat;"><h1 class="heading"> about <span>me</span> </h1><div class="row"><div class="image"><img class="tilt" src="images/人物图片.jpeg" alt=""></div><div class="content"><h3> my name is <span> Deng Ning </span> </h3><p class="info">我讨厌温柔的女孩子。温柔的女孩子其实对所有人都温柔,我却会误以为只对我温柔, 然后就沾沾自喜得意忘形,最后闹得不欢而散,双方都受到伤害。<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——所以我才讨厌温柔的女孩子。</p><div class="box-container"><div class="box"><p> <span> age: </span> 18 </p><p> <span> gender: </span> male </p><p> <span> constellation  : </span> 处女座 </p><p> <span> saying : </span> 凡是过往,皆为虚幻 </p></div><div class="box"><p> <span> language : </span> 中文 </p><p> <span> phone : </span> 110 </p><p> <span> email : </span> 3454631438@qq.com </p><p> <span> address : </span> 异次元 </p></div></div><a href="https://blog.csdn.net/qq_53114142?spm=1000.2115.3001.5343" class="btn">download CV</a></div></div></section><!-- 结束介绍 --><!-- 随心录界面  --><section class="services" id="services" style="background-image: url(images/11.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat}"><h1 class="heading"> <span> my </span> PVR </h1><div class="box-container"><div class="box tilt"><h3> 魔女の旅々 </h3><p>&emsp;&emsp;戴着这枚彰显魔女身份的胸针,披着一头灰色秀发,其美貌与才能散发的光芒,连太阳见了都不由眯起眼睛的美女,究竟是谁呢?<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——そう、私です。</p></div><div class="box tilt"><h3> 青春は嘘であり、悪である </h3><p>&emsp;&emsp;我讨厌温柔的女孩子。温柔的女孩子其实对所有人都温柔,我却会误以为只对我温柔, 然后就沾沾自喜得意忘形,最后闹得不欢而散,双方都受到伤害。<br>&emsp;&emsp;&emsp;&emsp;&emsp;——所以我才讨厌温柔的女孩子。</p></div><div class="box tilt"><h3> イレイナ </h3><p>&emsp;&emsp;有一位魔女坐着扫帚飞在空中,灰色头发在风中飘逸。这位像洋娃娃一般漂亮又可爱,连夏天的当空烈日见了都会放出更炙热光芒的美女,究竟是谁呢?<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——そう、私です。</p></div><div class="box tilt"><h3>秦时明月</h3><p>&emsp;&emsp;北林有燕,雨落雪兮;朔风哀哀,比翼难飞;欲折雨兮,奈之若何;朔风凛凛,终不离兮<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——雪女高渐离</p></div><div class="box tilt"><h3>みさか みこと</h3><p>&emsp;&emsp;あなたは、指先の电光石火の跃动私一生不変の信仰に、唯私超电磁炮永世不磨</p></div><div class="box tilt"><h3> ソードアート・オンライン </h3><p>&emsp;&emsp;俺の命は君のものだ、アスナ。だから君のために使う。最后の一瞬まで一绪にいよう。</p></div></div></section><!-- 随心录结束 --><!-- 收藏界面  --><section class="portfolio" id="portfolio" style="background-image: url(images/3-2.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat}"><h1 class="heading"> <span> my </span> photos </h1><div class="box-container"><div class="box tilt"><img src="images/0-4.jpg" alt=""><div class="content"><a href="https://www.luogu.com.cn/" class="btn">learn more</a></div></div><div class="box tilt"><img src="images/0-8.jpg" alt=""><div class="content"><a href="https://leetcode-cn.com/" class="btn">learn more</a></div></div><div class="box tilt"><img src="images/0-37.jpg" alt=""><div class="content"><a href="https://pintia.cn/problem-sets?tab=0" class="btn">learn more</a></div></div><div class="box tilt"><img src="images/4-3.jpg" alt=""><div class="content"><a href="https://www.dotcpp.com/oj/problemset.php?mark=6" class="btn">learn more</a></div></div><div class="box tilt"><img src="images/0-02.jfif" alt=""><div class="content"><a href="https://www.nowcoder.com/profile/250073103" class="btn">let's go</a></div></div><div class="box tilt"><img src="images/0-11.jpg" alt=""><div class="content"><a href="https://codeforces.com/profile/wukuyuanrong?csrf_token=b21ef201ec3f2c2861b92f7b7945e0b0" class="btn">learn more</a></div></div></div></section><!-- 收藏结束 --><!-- 推荐界面  --><section class="blogs" id="blogs" style="background-image: url(images/13.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat}"><h1 class="heading"> <span> my </span> recommend </h1><div class="box-container"><div class="box tilt"><img src="images/4-4.jpg" alt=""><h3> 魔女の旅々 </h3><p>"请别在意。我是旅人,得继续旅行才行。"<br>某个地方有个正在旅行的魔女,她的名字是伊蕾娜。<br>身为旅人,在很长很长的旅途中,她与形形色色的国家与人们邂逅。</p><a href="https://www.bilibili.com/bangumi/play/ss34412/?from=search&seid=5781533524187704333&spm_id_from=333.337.0.0" class="btn">learn more</a></div><div class="box tilt"><img src="images/4-2.jpg" alt=""><h3> 刀剑神域 </h3><p>这虽然是游戏,但可不是闹着玩的。」 <br> ——「SAO刀剑神域」 </p><a href="https://www.bilibili.com/bangumi/play/ep266323?from_spmid=666.4.feed.60" class="btn">learn more</a></div><div class="box tilt"><img src="images/4-1.png" alt=""><h3> 我的青春恋爱物语果然有问题 </h3><p>尽管如此,比企谷八幡的日常依然持续着<br>总有一天,也会有习惯这段关系的时候<br>每当闻到这股香味,一定会想起那个季节<br>于是,雪之下雪乃静静挥手,飒爽地,平冢静迈向前方,如同过去的某一天,由比滨结衣诚心盼望<br>心意,透过肌肤的温度确实传达过来,那扇门再次开启<br>时光流逝,那抹青蓝仍未褪色</p><a href="https://www.bilibili.com/bangumi/play/ep32242?from_spmid=666.4.feed.75" class="btn">learn more</a></div></div></section><!-- 结束 --><!-- 留言界面  --><section class="contact" id="contact" style="background-image: url(images/2-7.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat}"><h1 class="heading"> contact <span> me </span> </h1><div class="row"><div class="image"><img class="tilt" src="images/0-05.jfif" alt=""></div><!--定义表单内容--><form action=""><div class="inputBox"><input type="text" placeholder="name" id="xm"><input type="email" placeholder="email" id="em"></div><input type="text" placeholder="title" class="box" id="bt"><textarea placeholder="message" name="nr" id="text_area" cols="30" rows="10"></textarea><input type="button" class="btn" value="send message" id="send_msg"></form></div></section><!-- 留言墙-->
<section class="services" id="ly" style="background-image: url(images/2-6.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat}"><h1 class="heading"> <span> my </span> 留言 </h1><div class="box-container" id="scanner"><div class="box tilt"><h3> 幽灵公主 </h3><p>&emsp;&emsp;到不了的地方都叫做远方,回不去的世界都叫做家乡,我一直向往的却是比远方更远的地方。</p></div></div>
</section><!-- 结束 --><!-- 尾部  --><div class="footer"> 所有晦暗都留给过往, <span> 从遇见你开始 </span> ,凛冬散尽,星河长明 </div><script src="js/w3.js"></script></body>
</html>


http://chatgpt.dhexx.cn/article/MKcbkmrh.shtml

相关文章

python数据可视化:使用dash给博客制作一个dashboard

项目部署在&#xff1a;https://ffzs-blog-dashboard.herokuapp.com/ 项目代码在&#xff1a;https://github.com/ffzs/dash_blog_dashboard 1.dashboard 仪表板通常提供与特定目标或业务流程相关的关键绩效指标&#xff08;KPI&#xff09;的概览。另一方面&#xff0c;“仪表…

四、登录注册页功能实现《iVX低代码/无代码个人博客制作》

注&#xff1a;iVX也有免费直播课《第八期直播课》 首先打开在线编辑器进入我们的项目&#xff1a;https://editor.ivx.cn/ 一、登录页功能实现 上一节中已经完成了登录页的页面制作&#xff0c;那么这一节就开始对应的完成登录页的功能实现。 登录页的功能实现主要是对用户…

七、文章管理页面及功能实现《iVX低代码/无代码个人博客制作》

注&#xff1a;iVX也有免费直播课《第八期直播课》 一、文章管理页页面制作 文章管理页的基本结构与首页类似&#xff0c;我们复制一个首页&#xff0c;并且重命名首页的名称为文章管理页&#xff1a; 我们接着删除如下图所框选部分内容&#xff1a; 接着重命名导航为内容…

五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》

注&#xff1a;iVX也有免费直播课《第八期直播课》 一、详情页制作 在之前的章节中&#xff0c;我们已经制作完毕了登录、注册、首页等内容&#xff0c;在这一节中&#xff0c;我们编写详情页以及详情页功能制作。 详情页页面如下&#xff1a; 详情页头部也就是一个头部栏&…

三、登录页制作《iVX低代码/无代码个人博客制作》

注&#xff1a;iVX也有免费直播课《第八期直播课》 一、登录页实现 本节需要做的登录页如下&#xff1a; 该页面我们复习可以的值&#xff0c;首先设置整个页面页面的垂直和水平对其为居中&#xff0c;随后一个容器包裹对应的登录区域&#xff0c;此时我们创建一个页面命名为…

一、首页、详情页、文章编辑页制作《iVX低代码/无代码个人博客制作》

注&#xff1a;iVX也有免费直播课《第八期直播课》 一、首页制作 首页预览如下&#xff1a; 首先在博客页创建一个相对应项目&#xff1a; 接着选择前台&#xff0c;创建一个页面&#xff0c;命名为首页&#xff1a; 接着更改当前屏幕为小屏尺寸&#xff1a; 接着我们分…

二、文章发布页制作及后台实现《iVX低代码/无代码个人博客制作》

注&#xff1a;iVX也有免费直播课《第八期直播课》 一、文章编辑页制作 当首页制作完毕后&#xff0c;需要显示内容就需要有文章数据&#xff0c;此时我们创建一个文章编辑页增加对应的数据。 那么我们创建一个页面&#xff0c;命名为文章发布页&#xff1a; 接着我们查看标…

二、博客首页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、菜单思路参考及制作 在 CSDN 首页中的菜单部分为一串横排的内容&#xff0c;并且可以进行拖动&#xff1a; 首先咱们添加一个行&#xff0c;命名为菜单&#xff1a; 接着肯定是需要设置上下的内边…

四、博客详情页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、博客详情页分析 博客详情页大体分为顶部标题、发布时间、作者信息、博文内容&#xff0c;底部的评论我们在此不必做悬浮内容&#xff0c;咱们直接放到博文之下进行显示即可&#xff1b;顶部标题需要…

博客中GIF动画超简单制作

前言: 在写博客的时候图片和视频是非常通俗易懂的,比文字表述更为清晰,有时候演示过程用动画效果更好,毕竟图片只是静态的,看不出整个过程。而录制成视频,体积大,保存发送也比较麻烦,最重要的事博客中不支持这种格式,所以制作成GIF动画,方便、占用空间又小、博客也支…

一、博客首页搭建搭建《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、头部导航栏思路参考 首先我们可以查看CSDN的博客首页&#xff0c;从中查看一下布局&#xff1a; 在以上首页中&#xff0c;我们可以得知其顶部为一个整行&#xff0c;这个行内容左侧为一个logo&am…

《博客页面制作》教程

《博客页面制作》教程 一、《博客页面制作》第一部分 效果图&#xff1a; 参考代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>博客制作-第一部分</title><style type"text/css"&g…

Perfetto —— 靠谱的trace利器

最近踩到的坑&#xff0c;报了一个cst的测试项fail&#xff0c;帧率不符合预期&#xff0c;对应的测项进程是android.view.cts 肯定是要抓sytrace看看了 但是&#xff0c;试了systrace和atrace去抓&#xff0c;只抓了launcher的绘制&#xff0c;并没有android.view.cts的绘制…

perfetto使用简介

perfetto使用简介 文章目录 perfetto使用简介一、使用方法1.1 打开perfetto的设置界面1.1.1 adb指令1.1.2 系统设置 1.2 打开录制跟踪记录功能1.3 打开跟踪记录功能后&#xff0c;运行需要调试的APP1.4 运行完操作之后点击,可点击下拉菜单停止跟踪记录1.5 导出trace文件 二、打…

Android性能优化之Perfetto

Perfetto 一. 通过System Tracing抓取 1. System Tracing Overview System Tracing即系统跟踪界面&#xff0c;用户可以通过如下两种方式进入系统跟踪界面&#xff1a; &#xff08;1&#xff09;设置 – 其他设置 – 开发者选项 – 系统跟踪&#xff08;Realme GT Neo 闪速…

[ES6] 01. Intro to ES6 and traceur compiler

---恢复内容开始--- ES6 is ECMAScript version 6, which JavaScript is based on. The next version of JavaScript is going to be based on version 6 of ECMAScript. Tracer is a way to compile that next version of JavaScript back into JavaScript of today, meaning …

Android性能优化工具

一、性能优化工具基础 1.1 概述 在Android开发中&#xff0c;开发者可通过"系统跟踪"观察Android设备的运行情况并生成跟踪报告&#xff0c;在此基础上进行分析优化。Android 平台提供了多种获取跟踪信息的工具&#xff1a; Android Studio CPU 性能剖析器Systrace…

搭建Babel运行环境,Traceur ES6模板,块级作用域,let和const命令

搭建Babel运行环境 Babel&#xff08;http://babeljs.io/&#xff09;可用于将使用ES6语法的脚本转化为ES5语法的脚本&#xff0c;基本功能的安装步骤如下&#xff1a; 1、安装node解释器和npm包管理工具 2、安装babel解释器 npm install -g babel &#xff08;建议这个过程完…

ES6转ES5,Traceur使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…

Traceur 使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…