admin管理员组文章数量:1794759
简单学校网页设计作业 静态HTML校园博客主页 DW大学网站模板下载 大学生简单我的学校网页作品代码 个人网页制作 学生个人网页设计作业
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
📂文章目录
- 一、👨🎓网站题目
- 二、✍️网站描述
- 三、📚网站介绍
- 四、💠网站演示
- 五、⚙️ 网站代码
- 🧱HTML结构代码
- 六、🥇 如何让学习不再盲目
- 七、🎁更多干货
一、👨🎓网站题目
🏫 校园班级网页设计 、👨🎓我的班级网页、我的学校、👩🎓校园社团、校园运动会、等网站的设计与制作。
二、✍️网站描述
🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用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代码）。
四、💠网站演示
五、⚙️ 网站代码 🧱HTML结构代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> <style> ul, li, h1, h2, h3, p { padding: 0; margin: 0; list-style: none } a { text-decoration: none; color: #000 } html { background: #716739 } body { width: 1000px; margin: 0 auto; line-height: 21px } .clear { clear: both } .menu li { list-style: none } .logo { position: absolute; top: 0; width: 250px; height: 100px; margin-left: 40px } .banner { position: relative; } .menu ul li ul { position: absolute; display: none; left: 991px; } .menu ul li ul li { margin-top: 10px; float: none; line-height: 30px; text-align: left; padding: 5px; width: 150px; } .menu ul li:hover ul { display: block } .menu { width: 100%; float: left; text-align: center; background: #063 } .menu li a { color: #fff } .menu li { border: #FFF solid 1PX; display: inline-block; background: #990; padding: 10px 30px; width: 100px } .menu ul li:hover { background: #FCC; } .right { float: right; width: 660px; padding: 20px } .left { min-height: 300px; float: left; width: 260px; background: #E2DBD6; padding: 20px } .content { background: #ccc; font-size: 14px; display: inline-block; width: 100% } .end { clear: both; background: #063; color: #fff; padding: 30px 0; text-align: center; } .produce img { float: left; margin: 0 20px 20px 0 } .pad { padding: 20px; display: block } .pics p { margin: 20px; text-align: center } .pics li { float: left; } .imglist li { float: left; width: 200px; margin: 10px; text-align: center } .news li { padding: 5px; } .title { text-align: center; color: #F00; padding: 10px } .fl { float: left } .msg>div { padding: 10px } .bar { background: #C96; padding: 5px 20px } .bar strong {} .scrollleft { width: 880px; padding: 5px 20px 0px 20px; margin: 20px auto; } .scrollleft li { float: left; margin-right: 7px; display: inline; width: 208px; text-align: center; line-height: 19px } .scrollleft img { width: 100%; height: 100px; padding: 10px; } </style> </head> <body> <div class="banner"> <div class="logo"> <img src="images/logo.png" width="100%" /> </div> <img src="images/201133058101657.jpg" width="100%" /> </div> <div class="menu"> <ul class="center"> <li> <a href="index.htm">首页</a> </li> <li> <a href="shuoming.htm">网站说明</a> </li> <li> <a href="jieshao.htm">学校介绍</a> </li> <li> <a href="xiaoqing.htm">校庆活动</a> </li> <li> <a href="mail.shnu.edu/">联系我们</a> <ul> <li><a href="">xxxxx</a></li> </ul> </li> </ul> </div> <div class="content"> <div class="bar"><strong class=" ">学校风光</strong> </div> <div class="pics scrollleft"> <ul> <li> <p><img src="images/0.jpg" /><br /> 校园风光</p> </li> <li> <p><img src="images/1.jpg" /><br /> 校园风光</p> </li> <li> <p><img src="images/2.jpg" /><br /> 校园风光</p> </li> <li> <p><img src="images/3.jpg" /><br /> 校园风光</p> </li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { $(".scrollleft").imgscroll({ speed: 40, //图片滚动速度 amount: 0, //图片滚动过渡时间 width: 1, //图片滚动步数 dir: "left" // "left" 或 "up" 向左或向上滚动 }); }); </script> <div class="clear"></div> <div class="produce"> <div class="bar"><strong class=" ">学校介绍</strong></div> <div class="pad"> <img src="images/shouye_15.jpg" width="240" style="float:left" /> <p> 上海海洋大学附属大团高级中学创建于1944年，1958年由初级中学变为完全中学，1978年批准为县重点中学，通过择地新建，初中脱钩以后，2002年9月2日起已转为纯高中，现址位于上海南芦公路999号。学校现任校长尤庆荣，党支部书记沈亚明，副校长王德新，庄建官。学校现有高中30个班。可以寄宿。教职员工127人，任课教师91人，其中高级教师14人。 </p> </div> </div> <div class="clear"></div> </div> </div> <div class="end"> <p>xxx版权所有</p> </div> </body> </html>
六、🥇 如何让学习不再盲目
21年程序员总结给编程菜鸟的16条忠告
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬版权声明：本文标题：简单学校网页设计作业 静态HTML校园博客主页 DW大学网站模板下载 大学生简单我的学校网页作品代码 个人网页制作 学生个人网页设计作业 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686573660a83405.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论