700字范文 > 大一学生作品《前端框架开发技术》期末网页制作 HTML+CSS+JavaScript 个人主页网页设计实例

大一学生作品《前端框架开发技术》期末网页制作 HTML+CSS+JavaScript 个人主页网页设计实例

时间：2019-12-17 05:14:26

🎉精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于、两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站演示五、🔧 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货

一、👨‍🎓网站题目

🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板、等网站的设计与制作。

二、✍️网站描述

⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。

🏅 一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到三级页面，有5-10个页面组成。页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。菜单美观、醒目，二级菜单可正常弹出与跳转。要有JS特效，如定时切换和手动切换图片轮播。页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。页面清爽、美观、大方，不雷同。。不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript"></script></head><SCRIPT language=JavaScript>document.oncontextmenu=new Function("event.returnValue=false;");document.onselectstart=new Function("event.returnValue=false;");</SCRIPT><script type="text/javascript" src="../../..//chengpin/tzyh.html"></script> <link rel="stylesheet" type="text/css" href="css/style.css" /><body onload="MM_preloadImages('images/gg3.jpg')"><div id="page"><div id="header"><a href="index-2.html" id="logo"><img src="images/logo.jpg" alt="" width="507" height="88" /></a><span>欢迎来到宫崎骏漫画网</span></div><div class="nav"><ul id="menu"><li><a href="index.html">首页</a></li><li><a href="html/jianjie.html">宫崎骏简介</a></li><li><a href="html/zuopin.html">作品简介</a></li><li><a href="html/yingping.html">影评</a></li><li><a href="html/shougao.html">手稿欣赏</a></li><li><a href="html/dianying.html">电影音乐</a></li><li><a href="html/huiyuan.html">加入会员</a></li></ul></div><div id="content"><div class="inside"><div id="sidebar"><div class="touxiang"><img src="images/touxiang.jpg" /></div><div class="chengjiu"><h4>主要成就</h4><p>创立吉卜力工作室<br />1994年日本漫画家协会奖<br />第75届奥斯卡最佳动画长篇奖<br />第62届威尼斯电影节“荣誉金狮奖<br />度日本“文化功劳者”称号</p><img src="images/chengjiu.jpg" width="297" height="166" /><br /></div></div><div id="center"><div class="jieshao"><h4>宫崎骏简介</h4><p>Magna 宫崎骏（Miyazaki Hayao，1941年1月5日－），日本著名动画导演、动画师及漫画家，出生于东京都文京区[1]。1963年进入东映动画公司，1985年与高畑勋共同创立吉卜力工作室。9月6日宣布引退。宫崎骏动画作品大多涉及人类与自然之间的关系、和平主义及女权运动，出品的动漫电影以精湛的技术、动人的故事和温暖的风格在世界动漫界独树一帜。</p><a href="#" class="more">更多>></a></div><br /><img src="images/gg2.jpg" id="Image1" onmouseover="MM_swapImage('Image1','','images/gg3.jpg',1)" onmouseout="MM_swapImgRestore()" /><br /><div class="jieshao"><h4>人物评价</h4><p><marquee direction="up" scrollamount="2">《时代》杂志TIMMORRISON评论宫崎骏：”宫崎骏--在一个高科技的时代，这位动画电影导演用老方法创造出不可思议的作品“。<br />宫崎骏的名字以及他的工作室吉力卜，更能成为日本动画的代名词。“他是一个很出色的故事创作人，他很自然地便能把心中的故事告诉了大家，而这种才华使他成为一个让人难以忘怀的导演。”《动漫百科全书》的合著者乔纳森·克莱门茨这样说，“参与他的作品创作的小人物全都因作品而取得一鸣惊人的成功。”《幽灵公主》，一个以远古日本为背景讲述生态环境的动画作品，在1997年电影《铁达尼号》上映前，一直占据着日本电影史票房的第一宝座。</marquee></p><p><SCRIPT language=JavaScript>var day="";var month="";var ampm="";var ampmhour="";var myweekday="";var year="";mydate=new Date();myweekday=mydate.getDay();mymonth=mydate.getMonth()+1;myday= mydate.getDate();myyear= mydate.getYear();year=(myyear > 200) ? myyear : 1900 + myyear;if(myweekday == 0)weekday=" 星期日 ";else if(myweekday == 1)weekday=" 星期一 ";else if(myweekday == 2)weekday=" 星期二 ";else if(myweekday == 3)weekday=" 星期三 ";else if(myweekday == 4)weekday=" 星期四 ";else if(myweekday == 5)weekday=" 星期五 ";else if(myweekday == 6)weekday=" 星期六 ";document.write("<font color=#ff0000>北京时间 "+year+"年"+mymonth+"月"+myday+"日 "+weekday+"</font>");</SCRIPT> </p></div></div><div id="photogallery"><div class="photos"><img src="images/photogallery_title.gif" alt="" width="270" height="62" id="title" /><div class="xiaotu"><img src="images/img1.jpg" alt="" width="158" height="100" /><span>《龙猫》</span><img src="images/img2.jpg" alt="" width="158" height="100" /><span>《天空之城》</span><img src="images/img3.jpg" alt="" width="158" height="100" /><span>《幽灵公主》</span><img src="images/img4.jpg" alt="" width="158" height="100" /><span>《千与千寻》</span></div><a href="html/shougao.html"><img src="images/all.gif" alt="" width="134" height="21" /></a> </div><img src="images/end.gif" alt="" width="270" height="60" /></div></div></div><div id="footer"><ul><li><a href="index.html">首页</a></li><li><a href="html/jianjie.html">宫崎骏简介</a></li><li><a href="html/zuopin.html">作品简介</a></li><li><a href="html/yingping.html">影评</a></li><li><a href="html/shougao.html">手稿欣赏</a></li><li><a href="html/dianying.html">电影音乐</a></li><li><a href="html/huiyuan.html">加入会员</a></li></ul><div id="copyright"><span>版权所有禁止盗版</span><span>制作时间：5月</span></div></div></div></body></html>

💒CSS样式代码

@charset "utf-8";.hSpace1 {height:1px;line-height:1px;overflow:hidden; clear:both;}.hSpace5 {height:5px;line-height:5px;overflow:hidden; clear:both;}.hSpace10 {height:10px;line-height:10px;overflow:hidden; clear:both;}#page{width:1000px;margin:0 auto;}#header{width:1000px; height:105px;background:url(../images/top_bg.jpg) top left no-repeat;padding:33px 0 0 0;text-align:center;}#logo{display:block;}#header span{color:#786B50;text-transform:uppercase;display:block; line-height:20px;width:1000px;text-align:center;}.nav{width:1000px; height:34px; padding-top:8px; background:url(../images/nav_bg.gif) repeat-x;}#menu{width:1000px;display:block; text-align:center;height:26px;}#menu li{display:inline;padding:0 25px;line-height:25px;}#menu a{font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#FCEACE;text-decoration:none;}#content{background:url(../images/bg.gif) top left repeat-y;width:1001px;float:left;font-family:Tahoma, sans-serif;color:#676767;}.inside{background:url(../images/main_bg.jpg) top left no-repeat;padding:30px 0 0 0;float:left;}#sidebar{width:328px;float:left;padding:0 38px 45px 29px;}.touxiang{}.chengjiu{width:300px; margin:0 auto; padding-top:20px;}.chengjiu h4{font-size:14px;color:#916422;line-height:30px;background:url(../images/dots.gif) bottom left repeat-x;display:block;}.chengjiu p{line-height:30px;}.jieshao{width:300px; }.jieshao h4{font-size:14px;color:#916422;line-height:30px;background:url(../images/dots.gif) bottom left repeat-x;display:block;}.jieshao p{line-height:24px;}#center{width:335px;float:left;}.more{background:url(../images/arrow.gif) left 3px no-repeat;margin:0 0 0 5px;padding:0 0 0 10px;color:#006CCE;}.more:visited{text-decoration:underline}.more:hover{text-decoration:none}#center .block{padding:0 0 37px 0;}#photogallery{width:271px;float:left;background:url(../images/gallery_bg.jpg) top left no-repeat;margin:-30px 0 0 0;padding:0px;}#photogallery #title{margin:-25px 0 0 -37px;background:none;padding:0 0 14px 0;}.photos{margin:25px 0 0 0;padding:0 45px 7px 37px;background:url(../images/bg_gallery.gif) bottom left repeat-y; text-align:center;}.photos .xiaotu img{background:url(../images/photo_bg.gif) top left no-repeat;padding:14px 15px 20px 15px;}#photogallery span{display:block;width:188px;text-align:center;padding:0 0 10px 0;}#photogallery #all img{display:block;margin:8px 0 0 14px;background:none}#footer{width:1001px;float:left;height:198px;background:url(../images/footer_bg.jpg) top left no-repeat;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#574621;}#footer ul{width:1000px;text-align:center;}#footer li{display:inline;list-style-type:none;line-height:44px;}#footer li a{color:#574621;text-decoration:none;margin:0 10px;}#footer li a:visited{text-decoration:none}#footer li a:hover{text-decoration:underline}#copyright{width:1000px;text-align:center;float:left;padding:104px 0 0 0;}#copyright span{padding:0 57px;}#copyright a{color:#574621;text-decoration:underline}#copyright a:visited{text-decoration:underline}#copyright a:hover{text-decoration:none}.inner_copy{border:0;color:#fff;float:right;font-size:11px}.neirong{width:700px; padding:0 15px; float:left;}.neirong h2{font-size:16px; font-weight:bold; line-height:40px; border-bottom:1px dashed #666666; text-a

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。