🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示 四、💒 网站代码🧱HTML结构代码🏠CSS样式代码 五、🎁更多源码二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、🔗网站效果
▶️1.视频演示
I79BG-个人网站
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!doctype html><html><head><meta charset="utf-8"><title>个人网站</title><link rel="stylesheet" type="text/css" href="css/common.css"/></head><body><!--container start--><div class="container"><!--header start--><div class="header"><div class="header_avatar"><img src="images/avatar.jpg"/></div><div class="header_nav"><a href="index.html">个人首页</a><a href="view1.html">生活瞬间</a><a href="view2.html">学习记录</a><a href="view3.html">学校生活</a><a href="view4.html">规划人生</a><a href="view5.html">旅行打卡</a><a href="view6.html">访客留言</a></div></div><!--header end--><!--user start--><div class="user"><div class="user_avatar"><img src="images/avatar.jpg"/></div><div class="user_name">小猪猪</div><div class="user_word">没有什么是一顿饭解决不了的</div><div class="user_info"><p><span>男</span><span>20岁</span><span>狮子座</span></p></div><div class="user_nav"><a href="index.html" class="select">个人首页</a><a href="view1.html">生活瞬间</a><a href="view2.html">学习记录</a><a href="view3.html">学校生活</a><a href="view4.html">规划人生</a><a href="view5.html">旅行打卡</a><a href="view6.html">访客留言</a></div></div><!--user end--><!--main start--><div class="main"><article class="image_word"><a href="view1.html"><img src="images/index1.jpg"/></a><h3>生活瞬间</h3><p><a href="view1.html">只要追求幸福和自身的完美，选择适合我们的生活。你会发现即使忙碌也可以很充实，对生活的经历也会更加清晰。只要抱有希望就会奔向美好的明天。</a></p></article><article class="word"><h3>学习记录</h3><p><a href="view2.html">有时候，我们只是需要换一扇窗户看风景。生活有微笑有苦楚，不想说不等于无言，只有心里明了，也许永远选择沉默，选择承受。沉默多了，承受也就越多，不如轻轻打开另一扇窗户，放逐心情，也许就是另一个轻松美丽的世界。从一扇窗户到另一扇窗户，从一个世界到另一个世界，需要的是一份勇气，一抹心境。只有按生活本来面貌去生活，我们才能成为真正完善的人。人生就是一场漫长对抗，就看你能够追逐多久，坚持多久。</a></p></article><article class="image_word"><a href="view3.html"><img src="images/index3.jpg"/></a><h3>学校生活</h3><p><a href="view3.html">有时候，我们只是需要换一扇窗户看风景。生活有微笑有苦楚，不想说不等于无言，只有心里明了，也许永远选择沉默，选择承受。</a></p></article><article class="image"><a href="view4.html"><img src="images/index4.jpg"/></a></article><article class="image_word"><a href="view5.html"><img src="images/index5.jpg"/></a><h3>旅行打卡</h3><p><a href="view5.html">趁阳光正好，趁微风不燥，趁现在还年轻，还可以走很长很长的路，还能诉说很深很深的思念。去寻找那些曾出现在梦境中的路径、山峦与田野。</a></p></article><article class="image"><a href="view6.html"><img src="images/index6.jpg"/></a></article></div><!--main end--><!--footer start--><div class="footer"><div class="footer_nav"><a href="index.html">个人首页</a><a href="view1.html">生活瞬间</a><a href="view2.html">学习记录</a><a href="view3.html">学校生活</a><a href="view4.html">规划人生</a><a href="view5.html">旅行打卡</a><a href="view6.html">访客留言</a></div><div class="footer_copyright">Copyright @ All Rights Reserved. 个人网站 版权所有</div></div><!--footer end--></div><!--container end--></body></html>
🏠CSS样式代码
/*life*/.life{width:830px;background-color:#fff;margin-top:20px;float:right;}.life h3{width:810px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;}.life h3 span{margin-right:2px;}.life article{width:830px;margin-top:15px;float:left;}.life article section{width:250px;margin:0 0 20px 20px;float:left;}.life article section img{width:250px;height:180px;float:left;}.life article section p{width:250px;height:35px;line-height:35px;background-color:#fafafa;text-align:center;float:left;}/*study*/.study{width:830px;background-color:#fff;margin-top:20px;float:right;}.study h3{width:810px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;}.study h3 span{margin-right:2px;}.study article{width:830px;margin-top:15px;float:left;}.study article section{width:385px;margin:0 0 20px 20px;background-color:#fafafa;float:left;}.study article section p{width:345px;font-size:14px;line-height:25px;margin:20px 20px;float:left;}/*school*/.school{width:830px;background-color:#fff;margin-top:20px;float:right;}.school h3{width:810px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;}.school h3 span{margin-right:2px;}.school article{width:830px;margin-top:15px;float:left;}.school article section{width:250px;margin:0 0 20px 20px;float:left;}.school article section img{width:250px;height:180px;float:left;}.school article section p{width:250px;height:35px;line-height:35px;background-color:#fafafa;text-align:center;float:left;}/*plan*/.plan{width:830px;background-color:#fff;margin-top:20px;float:right;}.plan h3{width:900px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;}.plan h3 span{margin-right:2px;}.plan article{width:830px;margin-top:15px;float:left;}.plan article img{width:250px;margin:0 0 20px 20px;float:left;}/*travel*/.travel{width:830px;background-color:#fff;margin-top:20px;float:right;}.travel h3{width:810px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;}.travel h3 span{margin-right:2px;}.travel article{width:830px;margin-top:15px;float:left;}.travel article section{width:250px;margin:0 0 20px 20px;float:left;}.travel article section img{width:250px;height:180px;float:left;}.travel article section p{width:250px;height:35px;line-height:35px;background-color:#fafafa;text-align:center;float:left;}/*word*/.word{width:830px;height:765px;background-color:#fff;margin-top:20px;float:right;}.word h3{width:810px;height:30px;line-height:30px;margin:15px 0 0 20px;float:left;}.word h3 span{margin-right:2px;}.word form{width:830px;margin:50px 0;float:left;}.word p{width:600px;line-height:30px;margin:20px 0 0 80px;float:left;}.word p label{width:130px;height:30px;text-align:right;margin-right:10px;float:left;}.word p input{width:400px;height:30px;float:left;}.word p span{margin-right:30px;float:left;}.word p textarea{width:400px;height:260px;line-height:20px;float:left;}.word p input.submit{width:190px;color:#FFF;background-color:#a7d2e2;letter-spacing:3px;border:0;}.word p input.reset{width:190px;color:#FFF;background-color:#a7d2e2;letter-spacing:3px;border:0;margin-left:20px;}/*footer*/.footer{width:1100px;color:#3c8aae;background-image:url(../images/footer.jpg);background-size:100% 100%;margin-top:20px;float:left;}.footer_nav{width:1100px;height:120px;margin-top:40px;float:left;}.footer_nav a{font-size:15px;font-weight:bold;color:#3c8aae;margin:0 86px 0 20px;float:left;}.footer_nav a:nth-last-child(1){margin-right:0;}.footer_copyright{width:1100px;height:38px;line-height:38px;text-align:center;float:left;border-top:1px solid #3c8aae;}
五、🎁更多源码
1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
