目录
一、前言
二、开发过程
1、开发工具：
2、编程语言选择：
3、网页基本展示：
4、部分代码展示：
三、遇到的困难：
四、解决问题
总结
大家好，本作品为本人大二Web期末大作业，采用了html+css+JavaScript制作而成的静态网页，我技术有限😭，并且由于期末时间原因，我选择了制作一个静态的网页。说实话这也是自己第一次随机主题制作网页，做的时候我也很迷茫，最终参考其他朋友们的建议，制作了一个类似于个人空间的网页。（我知道自己做的很丑😥，大家担待着看）
我选用的是vscode（真的很香😄）
风格简单，功能齐全，配置方便。
很丑我知道（我很有自知之明），非常基本的html+css+javascript三件套，这也是老师这学期教的（其他高端的我也不会）
网站我放GitHub上了，大家有兴趣可以看看Welcome to my Home Page/
HTML：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Welcome to my Home Page</title><link rel="stylesheet" type="text/css" href="css/style.css"></head>
<body><div id="header"><head>My Home Page</head></div><div id="body"><div><div id="templatemo_menu"><ul><li class="current"><a href="index.html" class="link1">我的主页</a></li><li><a href="surfbase.html" class="link2">冲浪空间</a></li><li><a href="newsblog.html" class="link1">学习空间</a></li><li><a href="about.html" class="link2">关于</a></li><li><a href="contact.html" class="link1">联系</a></li></ul> <div class="cleaner"></div></div><div id="home"><h1><span>Hold ZywOo</span></h1><h2>本学期学习了html，css以及JavaScript语言，特建立此网站作为学习总结。</h2></div><div class="news"><h3>News & Blog</h3><a><img src="../images/功德.gif" alt="Image"></a><div><p>厚德载物，自强不息，心向清华!!!</p></div></div> </div></div><div id="footer"><div><div id="newsletter"><h3>Motto</h3><p>吾十有五而志于学，三十而立，四十而不惑，五十而知天命，六十而耳顺，七十而从心所欲，不逾矩。</p><p>相信生活，它给人的教诲比任何一本书籍都好。</p><form action="index.html"><input type="text" value="email address" onblur="this.value=!this.value?'email address':this.value;" onfocus="this.select()" onclick="this.value='';"></form></div><div id="connect"><h3>Social</h3><a id="facebook" target="_blank">Facebook</a><a id="twitter" target="_blank">Twitter</a><a id="googleplus" target="_blank">Google+</a></div></div></div>
</body>
</html><!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Welcome to My Surf Base</title><link rel="stylesheet" type="text/css" href="css/style.css"><script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/JavaScript" src="js/slimbox2.js"></script> <link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
</head>
<body><div id="header"><head>s1mple surfing space</head></div><div id="body"><div id="templatemo_menu"><ul><li><a href="index.html" class="link1">我的主页</a></li><li class="current"><a href="surfbase.html" class="link2">冲浪空间</a></li><li><a href="newsblog.html" class="link1">学习空间</a></li><li><a href="about.html" class="link2">关于</a></li><li><a href="contact.html" class="link1">联系</a></li></ul> <div class="cleaner"></div></div> <!-- end of templatemo_menu --><div id="slider_wrapper_n"><h2>Web Design surfbase</h2><p>此处为设计者小何平时网上冲浪浏览的各种图片，设计者觉得有趣，收集为个人gallery</p></div><div id="templatemo_main"><div class="col_w900 col_w900_last"><div id="gallery"><div class="gallery_box"><a rel="lightbox[portfolio]" href=".GmZTLVeftwgHihNXRcLQhwHaEM?w=289&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7" title="真相永远只有一个！"><img src=".GmZTLVeftwgHihNXRcLQhwHaEM?w=289&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7" alt="Image 1" /></a><h3><a rel="lightbox[portfolio]" href=".GmZTLVeftwgHihNXRcLQhwHaEM?w=289&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7" title="真相永远只有一个！">名侦探柯南</a></h3><div class="cleaner"></div></div><div class="gallery_box"><a rel="lightbox[portfolio]" href=".jpg" title="为了更高的money，为了更高的职位！"><img src=".jpg" alt="Image 2" /></a><h3><a rel="lightbox[portfolio]" href=".jpg" title="为了更高的money，为了更高的职位！">升职加钱</a></h3><div class="cleaner"></div></div><div class="gallery_box"><a rel="lightbox[portfolio]" href=".c9f40fbe520995bd34e5b565faa8d14c?rik=ADcfFqjzgaXLzw&riu=http%3a%2f%2fdmimg.5054399%2fallimg%2f110618%2f11_110618114808_1.jpg&ehk=f8wKxb6pTIFII2v2iSWBenhk%2fsztq5IOB5HAyB5dJeg%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" title="我们不是可有可无的存在！"><img src=".c9f40fbe520995bd34e5b565faa8d14c?rik=ADcfFqjzgaXLzw&riu=http%3a%2f%2fdmimg.5054399%2fallimg%2f110618%2f11_110618114808_1.jpg&ehk=f8wKxb6pTIFII2v2iSWBenhk%2fsztq5IOB5HAyB5dJeg%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt="Image 3" /></a><h3><a rel="lightbox[portfolio]" href=".c9f40fbe520995bd34e5b565faa8d14c?rik=ADcfFqjzgaXLzw&riu=http%3a%2f%2fdmimg.5054399%2fallimg%2f110618%2f11_110618114808_1.jpg&ehk=f8wKxb6pTIFII2v2iSWBenhk%2fsztq5IOB5HAyB5dJeg%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1">真·红莲</a></h3><div class="cleaner"></div></div><div class="gallery_box lmb"><a rel="lightbox[portfolio]" href=".7dkPpvLPHocaTWXDWZjolQHaEK?pid=ImgDet&rs=1" title="钱来，钱来，钱来！"><img src=".7dkPpvLPHocaTWXDWZjolQHaEK?pid=ImgDet&rs=1" alt="Image 4" /></a><h3><a rel="lightbox[portfolio]" href=".7dkPpvLPHocaTWXDWZjolQHaEK?pid=ImgDet&rs=1" >我一路向前~</a></h3><div class="cleaner"></div></div><div class="gallery_box"><a rel="lightbox[portfolio]" href=".mp4.jpg?x-oss-process=image/resize,type_6,m_fill,h_228,w_406" title="功德加一，我心向善"><img src=".mp4.jpg?x-oss-process=image/resize,type_6,m_fill,h_228,w_406" alt="Image 5" /></a><h3><a rel="lightbox[portfolio]" href=".mp4.jpg?x-oss-process=image/resize,type_6,m_fill,h_228,w_406">功德+1</a></h3><div class="cleaner"></div></div><div class="gallery_box"><a rel="lightbox[portfolio]" href=".7a9855e1c04bee2ccc0337fdd4452eba?rik=QO03hnbCwqedCQ&riu=http%3a%2f%2fwx2.sinaimg%2fbmiddle%2fb64da6adly1g9gzgg2jzaj20j60j6wg4.jpg&ehk=L%2bf2ImfZp95RDst3a3o8U1uy59vS3EYmKWMIeA1eSc8%3d&risl=&pid=ImgRaw&r=0" title="一心搞钱，搞钱搞钱搞钱"><img src=".7a9855e1c04bee2ccc0337fdd4452eba?rik=QO03hnbCwqedCQ&riu=http%3a%2f%2fwx2.sinaimg%2fbmiddle%2fb64da6adly1g9gzgg2jzaj20j60j6wg4.jpg&ehk=L%2bf2ImfZp95RDst3a3o8U1uy59vS3EYmKWMIeA1eSc8%3d&risl=&pid=ImgRaw&r=0" alt="Image 6" /></a><h3><a rel="lightbox[portfolio]" href=".7a9855e1c04bee2ccc0337fdd4452eba?rik=QO03hnbCwqedCQ&riu=http%3a%2f%2fwx2.sinaimg%2fbmiddle%2fb64da6adly1g9gzgg2jzaj20j60j6wg4.jpg&ehk=L%2bf2ImfZp95RDst3a3o8U1uy59vS3EYmKWMIeA1eSc8%3d&risl=&pid=ImgRaw&r=0">搞钱搞钱搞钱！</a></h3><div class="cleaner"></div></div><div class="gallery_box"><a rel="lightbox[portfolio]" href=".vig6k3cqlw8Wo9Ky_SVaUwAAAA?w=253&h=184&c=7&r=0&o=5&dpr=1.4&pid=1.7" title="怎么作业这么多"><img src=".vig6k3cqlw8Wo9Ky_SVaUwAAAA?w=253&h=184&c=7&r=0&o=5&dpr=1.4&pid=1.7" alt="Image 7" /></a><h3><a rel="lightbox[portfolio]" href=".vig6k3cqlw8Wo9Ky_SVaUwAAAA?w=253&h=184&c=7&r=0&o=5&dpr=1.4&pid=1.7">写不了一点</a></h3><div class="cleaner"></div></div><div class="gallery_box lmb"><a rel="lightbox[portfolio]" href=".7f812e730fe6999003f1c51365db1690?rik=j%2fMaXtEhytxbIA&riu=http%3a%2f%2fp3.itc%2fimages01%2f20201222%2f05e76bc7641249f6bbb8798a90314b1e.jpeg&ehk=foyaCXGwO6VzzG9aciIkrhJR91Ysl7xqSg0Y9drKMoI%3d&risl=&pid=ImgRaw&r=0" title="多给点分吧，别挂我呀"><img src=".7f812e730fe6999003f1c51365db1690?rik=j%2fMaXtEhytxbIA&riu=http%3a%2f%2fp3.itc%2fimages01%2f20201222%2f05e76bc7641249f6bbb8798a90314b1e.jpeg&ehk=foyaCXGwO6VzzG9aciIkrhJR91Ysl7xqSg0Y9drKMoI%3d&risl=&pid=ImgRaw&r=0" alt="Image 8" /></a><h3><a rel="lightbox[portfolio]" href=".7f812e730fe6999003f1c51365db1690?rik=j%2fMaXtEhytxbIA&riu=http%3a%2f%2fp3.itc%2fimages01%2f20201222%2f05e76bc7641249f6bbb8798a90314b1e.jpeg&ehk=foyaCXGwO6VzzG9aciIkrhJR91Ysl7xqSg0Y9drKMoI%3d&risl=&pid=ImgRaw&r=0">一心求高分</a></h3><div class="cleaner"></div></div><div class="cleaner"></div></div></div><div class="cleaner"></div><span class="bottom"></span></div> <!-- end of main --><div id="footer"><div><div id="newsletter"><h3>Motto</h3><p>世上只有一个真理，便是忠实人生，并且爱它。</p><p>人的一生，或多或少，总是难免有浮沉。不会永远如旭日东升，也不会永远痛苦潦倒。</p><form action="index.html"><input type="text" value="email address" onblur="this.value=!this.value?'email address':this.value;" onfocus="this.select()" onclick="this.value='';"></form></div><div id="connect"><h3>Social</h3><a id="facebook" target="_blank">Facebook</a><a id="twitter" target="_blank">Twitter</a><a id="googleplus" target="_blank">Google+</a></div></div></div>
</body>
</html>CSS：
/* SLIMBOX */#lbOverlay {position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;background-color: #000;cursor: pointer;
}#lbCenter, #lbBottomContainer {position: absolute;z-index: 9999;overflow: hidden;background-color: #fff;
}.lbLoading {background: #fff url(../images/loading.gif) no-repeat center;
}#lbImage {position: absolute;left: 0;top: 0;border: 10px solid #fff;background-repeat: no-repeat;
}#lbPrevLink, #lbNextLink {display: block;position: absolute;top: 0;width: 50%;outline: none;
}#lbPrevLink {left: 0;
}#lbPrevLink:hover {background: transparent url(../images/prevlabel.gif) no-repeat 0 15%;
}#lbNextLink {right: 0;
}#lbNextLink:hover {background: transparent url(../images/nextlabel.gif) no-repeat 100% 15%;
}#lbBottom {font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;font-size: 10px;color: #666;line-height: 1.4em;text-align: left;border: 10px solid #fff;border-top-style: none;
}#lbCloseLink {display: block;float: right;width: 66px;height: 22px;background: transparent url(../images/closelabel.gif) no-repeat center;margin: 5px 0;outline: none;
}#lbCaption, #lbNumber {margin-right: 71px;
}#lbCaption {font-weight: bold;
}body {background: url(.MF66kghnMdtPpIPqwT5dwQHaEo?w=277&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7) repeat;color: #d1d3d4;font-family: Arial, Helvetica, sans-serif;font-size: 14px;margin: 0;min-width: 960px;padding: 0;
}
a {outline: none;
}
img {border: 0;
}
p {line-height: 24px;margin: 0;
}
p a,
#body div h2 a,
#body div div#ws h4 a,
#body div #newsblog ul li div h3 a,
#body div #surfbase h3 a {color: #d1d3d4;
}
p a:hover,
#body div h2 a:hover,
#body div div#ws h4 a:hover,
#body div #newsblog ul li div h3 a:hover,
#body div #surfbase h3 a:hover,
:hover {color: #ffc000;
}
{color: #e1bd07;font-size: 12px;text-decoration: none;
}
#header {height: 100px;margin: 0 auto;padding: 39px 10px 0;width:max-content;text-align:left;color: black;font-size: 50px;background: url(.MF66kghnMdtPpIPqwT5dwQHaEo?w=277&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7) repeat;
}#body div #contact div form label {display: block;
}
#body {background: url(../images/bg-wave.png) repeat;
}
#body > div {background: url(../images/bg-content.png) repeat-x;margin: 0 auto;overflow: hidden;padding: 47px 10px;width: 940px;
}#templatemo_menu {clear: both;width: 930px;height: 45px;padding: 0 15px;background: url(images/menu.jpg) repeat
}#templatemo_menu ul {float: left;width: 695px;margin: 0;padding: 0;list-style: none;
}#templatemo_menu ul li {padding: 0px;margin: 0px;display: inline;
}#templatemo_menu ul li a {float: left;display: block;padding: 8px 20px;margin: 0 1px 0 0;font-size: 14px;font-weight: bold;text-align: center;text-decoration: none;color: #000;outline: none;border: none;background: url(images/templatemo_menu_divider.png) center right no-repeat
}#templatemo_menu ul li a:hover, #templatemo_menu ul li .current { color: #fff; background: #d5a30b; }
对于时间和技术都不足的我，困难属实不少。
1、图片滑动切换效果的实现，因为想到只有图片过于单调，我决定做一点图片滑动切换的动画。
2、css的设计，设计css时，我对很多属性的使用十分不熟悉，加上自己审美水平不行，很多都需要在网上查询资料，跟着教程制作。
3、图片点击后，会在滑动切换过程中，由于图片的大小不同而使整体动画不好看。
4、页面需要托管到其他网站上。而我第一次弄😥
1、图片切换问题，网上跟其他大佬学，给大家推荐详情网站，里面有详细代码，注释讲解🤗
纯JS实现轮播图（点击按钮切换下一张） - 掘金 (juejin)
2、css的设计时，相对来说这也没特别困难，只是属性名称记得不熟悉罢了，我通过上网查看便轻松解决。
3、网页托管问题，这一点通过上网查询（说实话没有找到想要的，很多都需要自己下载GitHub）
我请教了身边的同学大佬，也是学会了如何直接将自己的项目在线托管到GitHub上。
由于很多网上没有，我便给大家总结一下：
首先要进入GitHub网站（这是国外的网站，直接访问可能进不去我们可以使用加速器访问）：
这是我使用的加速器，大家也可以用一用。
点击左上角，new一个Top Repositories。
输入名称，添加一个readme文件然后直接创建即可。
在add file处，选择Upload files即可将自己的项目传到网站上。 最后要选择commit changes。
然后选择setting
选择此处Pages，然后选择Github Actions。
然后点击下图所示：
再点击Commit changes保存。
继续点击Commit changes
然后进入Actions界面
查看刚刚创建的yml文件。便可以看到自己的网站了。
4、图片大小问题，这个问题我也没有找到很好的方法来解决🙄。
总结一下本次web课程，虽然时间短暂，但是让我对前端编程有了一个更高一级的认识，说实话我感觉前端的设计比后端的更难编写，更何况这学期完成的还是一个普通的静态网页。学习的过程固然辛苦，但是完成后的成就感也是实打实的，大家一起努力吧！
本文发布于:2024-02-01 10:59:11，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170675635336143.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
