首页百科大全正文内容

用HTML+CSS做一个漂亮简单的个人网页(HTML期末大作业)

百科大全

更新时间：2025-10-05 08:52:5156

admin管理员组
文章数量:1794759

用HTML+CSS做一个漂亮简单的个人网页(HTML期末大作业)

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻 💂 作者主页: 【进入主页—🚀获取更多源码】 🎓 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.视频演示

L22JP 个人博客个人介绍 4页无js

🧩 2.图片演示

四、💒 网站代码 🧱HTML结构代码 <!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/style.css"> </head> <body> <div id="bigbox"> <div id="banner"> <img src="picture/banner.png" alt=""> </div> <nav> <a class="dangqian" href="">首页</a> <a href="duanwen.html">短文</a> <a href="rizhi.html">日志</a> <a href="liuyan.html">留言板</a> </nav> <div id="main"> <div id="main_left"> <h2>关于我</h2> <img src="picture/me.png" alt=""> <p> <span>姓名</span>:*****<br> <span>性别</span>:男<br> <span>爱好</span>:听歌踢足球打游戏<br> <span>性格</span> :开朗<br> <span>家乡</span>:新疆乌恰县<br> <span>专业</span>:计算机网络技术 </p> </div> <div id="main_right"> <h2>热爱生活</h2> <p> 一、岁月从来不曾静好，只是有人在替你背负枷锁，含泪前行。也许是父母，也许是朋友，也许是陌生人……无论是谁，请记得常怀感恩之心。 </p> <p> 二、这个世界并不完美，甚至有点残酷。你无法决定下一段旅途遇见的是好事还是坏事，可你能决定面对它们的态度。你看这个世界的角度，决定了这个世界给你的温度。 </p> <p> 三、总会有一件事让你瞬间长大，也总会有一个人让你泪如雨下。愿你早日领教这个世界的深深恶意，让自己活得开心得意。 </p> <p> 四、想要与众不同，却总随遇而安，想要做很多未做的事，却在现实棘手的吃喝拉撒前低下了头，我们间歇性热血满腔，长时间迷茫犯懒，别等了，再努力试试看！ </p> <img src="picture/life.png" alt=""> </div> </div> <div id="luxing"> <h2>旅行生活</h2> <div> <div id="picture"> <img src="picture/11.png" alt=""> <p>在日月潭</p> </div> <div id="picture"> <img src="picture/22.png" alt=""> <p> 在毛里求斯 </p> </div> <div id="picture"> <img src="picture/33.png" alt=""> <p> 在马尔代夫 </p> </div> <div id="picture"> <img src="picture/44.png" alt=""> <p> 在玉龙雪山 </p> </div> </div> </div> <footer> <p> 版权所有©***** </p> </footer> </div> </body> </html> 🏠CSS样式代码 * { margin: 0px; padding: 0px; list-style: none; } body { background-color: #4B7C99; } #bigbox { width: 1000px; margin: 0 auto; } #banner { width: 1000px; font-size: 0px; } #banner img { width: 1000px; } nav { background-color: #CCD0D9; width: 1000px; height: 60px; } nav a { text-decoration: none; line-height: 60px; margin-left: 50px; margin-right: 50px; color: #020C16; font-weight: bold; } nav a:hover { color: #1a9be6; } .dangqian { color: #1a9be6; } #main { height: 490px; width: 1000px; margin: 0 auto; background-color: #86aacb; } #main_left { width: 300px; display: inline-block; background-color: #86aacb; float: left; } h2 { box-sizing: border-box; padding-left: 10px; font-size: 20px; line-height: 30px; background-color: #03151F; color: #CCD0D9; } #main_left img { width: 300px; } #main_left p { margin-left: 10px; line-height: 40px; } #main_left span { font-weight: bold; } #main_right { position: relative; width: 680px; margin-left: 20px; display: inline-block; height: 200px; } #main_right img { position: absolute; width: 260px; right: 0px; top: 30px; } #main_right p { width: 400px; display: inline-block; margin-left: 10px; text-indent: 32px; line-height: 30px; margin-top: 10px; } #luxing { background-color: #86aacb; width: 1000px; } #luxing div { font-size: 0px; } #picture { font-size: 0px; display: inline-block; margin-left: 25px; margin-right: 25px; margin-top: 25px; } #picture img { width: 200px; } #picture p { font-size: 16px; text-align: center; line-height: 60px; } footer { line-height: 60px; font-size: 14px; text-align: center; background-color: #CCD0D9; } #main_right ul li { width: 660px; margin-left: 10px; font-size: 12px; margin-top: 10px; border-bottom: 1px dotted #ccc; padding-bottom: 10px; } #main_right ul li span { font-size: 14px; font-weight: bold; } #liuyan { width: 660px; margin-left: 10px; margin: 20px; } #liuyan span { display: inline-block; width: 80px; line-height: 40px; } button { width: 100px; height: 30px; margin-left: 80px; }

五、🎁更多源码

1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

本文标签：作业做一个期末个人网页漂亮

版权声明：本文标题：用HTML+CSS做一个漂亮简单的个人网页(HTML期末大作业) 内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686976360a124545.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。