首页 > 分享 > 大学生网页制作期末作业——html+css+javascript+jquery旅游官网6页 html大学生网站开发实践作业 web网页设计实例作业

大学生网页制作期末作业——html+css+javascript+jquery旅游官网6页 html大学生网站开发实践作业 web网页设计实例作业

花匠小妙招
2024-11-13 22:40

‍静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计‍，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。

精彩专栏推荐

【作者主页——获取更多优质源码】
【web前端期末大作业——毕设项目精品实战案例(1000套)】

文章目录一、网站题目‍二、网站描述✍️三、网站介绍四、网站效果五、网站代码制作部分 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）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/init.css"><link rel="stylesheet" type="text/css" href="css/common.css"><link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body>  <div id="header"> <div class="topnav"> <div class="w980"> <ul class="l"> <li><a href="#">客户端</a>|</li> <li><a href="#">手机版</a>|</li> <li><a href="#">收集工具</a></li> </ul> <div class="info"> <ul> <li><a href="register.html">注册</a></li> <li><a href="login.html">登陆</a></li> <li><a href="#" class="msg"> </a></li> <li><a href="#" class="mail"> </a></li> <li><img src="picture/admin.jpg"><a href="#">吾爱旅行</a></li> </ul> </div> </div> </div> <div class="nav"> <div class="w980"> <div class="logo l"><a href=""></a></div> <div class="menu l"> <ul> <li> <a href="waterfall_1.html" class="toplist">广播</a> </li> <li> <a href="waterfall_2.html" class="toplist">发现</a> <a href="article_list_1.html">文章</a> <a href="waterfall_1.html">心情</a> </li> <li> <a href="#" class="toplist">专辑</a> <a href="#">生活</a> <a href="#">时尚</a> <a href="#">兴趣</a> </li> <li> <a href="article_list_1.html" class="toplist">Wiki</a> </li> <li class="lastli"> <a href="article_list_1.html" class="toplist">小组</a> </li> </ul> </div> <div class="search r"> <form action="" method=""> <input type="text" name="" placeholder="请输入要查询的内容"> <button type="submit"></button> </form> </div> </div> </div> <div class="line" id="line"> </div> </div>  <div id="content"> <div class="main"> <div class="slider"> <div class="v"> <div class="wrap"> <a href="#"><img src="picture/pic1.jpg" width="710"></a> <a href="#"><img src="picture/pic2.jpg" width="710"></a> <a href="#"><img src="picture/pic3.jpg" width="710"></a> <a href="#"><img src="picture/pic4.jpg" width="710"></a> <a href="#"><img src="picture/pic5.jpg" width="710"></a> <a href="#"><img src="picture/pic6.jpg" width="710"></a> <a href="#"><img src="picture/pic7.jpg" width="710"></a> <a href="#"><img src="picture/pic8.jpg" width="710"></a> <a href="#"><img src="picture/pic9.jpg" width="710"></a> <a href="#"><img src="picture/pic10.jpg" width="710"></a> </div> <div class="thumbpics"> <ul> <li><img src="picture/pic1.jpg" width="60" class="curr"><div class="icon"></div></li> <li><img src="picture/pic2.jpg" width="60"></li> <li><img src="picture/pic3.jpg" width="60"></li> <li><img src="picture/pic4.jpg" width="60"></li> <li><img src="picture/pic5.jpg" width="60"></li> <li><img src="picture/pic6.jpg" width="60"></li> <li><img src="picture/pic7.jpg" width="60"></li> <li><img src="picture/pic8.jpg" width="60"></li> <li><img src="picture/pic9.jpg" width="60"></li> <li><img src="picture/pic10.jpg" width="60"></li> </ul> </div> </div> </div> <div class="section"> <div class="title"> <h2><a href="#">生活</a></h2> <span><a href="#">更多>></a></span> </div> <div class="thumb"> <ul> <li> <img src="picture/img1.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> <li> <img src="picture/img2.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> <li> <img src="picture/img3.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> <li> <img src="picture/img4.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> <li> <img src="picture/img5.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> <li> <img src="picture/img6.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> </ul> </div> </div> <div class="section"> <div class="title"> <h2><a href="#">时尚</a></h2> <span><a href="#">更多>></a></span> </div> <div class="thumb"> <ul> <li> <img src="picture/img7.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> <li> <img src="picture/img8.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> <li> <img src="picture/img9.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> <li> <img src="picture/img10.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> <li> <img src="picture/img11.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> <li> <img src="picture/img12.jpg"> <div class="cover"><a href="#">运动健身</a><span>(20张)</span> </div> </li> </ul> </div> </div> <div class="section"> <div class="title"> <h2><a href="#">兴趣</a></h2> <span><a href="#">更多>></a></span> </div> <div class="thumb"> <ul> <li> <img src="picture/img13.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> <li> <img src="picture/img14.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> <li> <img src="picture/img15.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> <li> <img src="picture/img3.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> <li> <img src="picture/img4.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> <li> <img src="picture/img6.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> </ul> </div> </div> <div class="section"> <div class="title"> <h2><a href="#">时尚</a></h2> <span><a href="#">更多>></a></span> </div> <div class="thumb"> <ul> <li> <img src="picture/img7.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> <li> <img src="picture/img8.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> <li> <img src="picture/img9.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> <li> <img src="picture/img10.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> <li> <img src="picture/img11.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> <li> <img src="picture/img12.jpg"> <p><a href="#">运动健身</a><span>(20张)</span> </p> </li> </ul> </div> </div> </div> <div class="sider"> <div class="recommend"> <div class="title"> <h2><a href="#">热门推荐</a> </h2> </div> <div class="view"> <a href="javascript:;"><img src="picture/img1.jpg"> </a> <h3>标题：<a href="javascript:;">【普罗旺斯】</a></h3> <p>普罗旺斯从诞生之日起，就谨慎地保守着她的秘密，天气阴晴不定，暖风和煦，海风狂野，地势跌宕起伏，平原广阔，峰岭险峻，寂寞的峡谷，苍凉的古堡，蜿蜒的山脉和活泼的都会，全都在这片法国的大地上演绎万种风情。</p> </div> </div> <div class="tag"> <div class="title"> <h3>热门标签</h3> </div> <div class="taglist"> <ul> <li><a href="#" class="lev1">标签</a></li> <li><a href="#" class="lev3">登山</a></li> <li><a href="#" class="lev3">自驾车</a></li> <li><a href="#" class="lev2">骑车</a></li> <li><a href="#" class="lev2">自然</a></li> <li><a href="#" class="lev3">徒步</a></li> <li><a href="#" class="lev3">兴趣</a></li> <li><a href="#" class="lev1">心情</a></li> <li><a href="#" class="lev2">户外</a></li> <li><a href="#" class="lev1">景色</a></li> <li><a href="#" class="lev3">大海</a></li> <li><a href="#" class="lev2">骑车</a></li> <li><a href="#" class="lev1">大海</a></li> <li><a href="#" class="lev3">徒步</a></li> <li><a href="#" class="lev3">天气</a></li> <li><a href="#" class="lev1">心情</a></li> <li><a href="#" class="lev2">景色</a></li> <li><a href="#" class="lev2">景色</a></li> <li><a href="#" class="lev1">驴友</a></li> </ul> </div> </div> <div class="weibo"> <div class="title"> <h3>悟语</h3> <span><a href="#">更多>></a></span> </div> <div class="outer"> <div class="wbdesc"> <div class="wblist"> <div class="userinfo"> <img src="picture/use1.jpg"> <h4>作响_</h4> <p>1分钟前</p> </div> <div class="cont"> <p>只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！</p> <img src="picture/weibo1.jpg" width="210"> </div> </div> <div class="wblist"> <div class="userinfo"> <img src="picture/use2.jpg"> <h4>大媚子</h4> <p>13分钟前</p> </div> <div class="cont"> <p>人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动。独自旅行，不受羁绊。</p> <img src="picture/weibo2.jpg" width="210"> </div> </div> <div class="wblist"> <div class="userinfo"> <img src="picture/use3.jpg"> <h4>Honey米儿</h4> <p>6分钟前</p> </div> <div class="cont"> <p>任何一场旅行，都似对生活的拯救；每一个沉思的瞬间，都成就了旅行的意义。</p> <img src="picture/weibo3.jpg" width="210"> </div> </div> <div class="wblist"> <div class="userinfo"> <img src="picture/use4.jpg"> <h4>如茅挽君</h4> <p>16分钟前</p> </div> <div class="cont"> <p>我想要一次旅行，不留任何足迹，独自一起。我在你的记忆，却不在你心里。我们一起走过过去和现在。</p> <img src="picture/log4.jpg" width="210"> </div> </div> </div> </div> </div> <div class="active"> <div class="title"> <h3>主题活动</h3> <span><a href="#">更多>></a></span> </div> <div class="actdesc"> <a href="#"><img src="picture/act1.gif"></a> <p class="h"><a href="#">晒晒你的DIY成果[一周一主题]</a></p> <p>截止日期：<span>2013年8月31日</span></p> </div> </div> <div class="article"> <div class="title"> <h3>旅行日志</h3> <span><a href="article_list_1.html">更多>></a></span> </div> <div class="arclist"> <div class="arctop"> <img src="picture/arc1.jpg"> <h4><a href="#">远行，流浪！</a></h4> <p>推荐数：<span>362</span></p> </div> <ul> <li><a href="javascript:;">带着年轻的心去流浪</a></li> <li><a href="javascript:;">带着年轻的心去流浪</a></li> <li><a href="javascript:;">带着年轻的心去流浪</a></li> <li><a href="javascript:;">带着年轻的心去流浪</a></li> <li><a href="javascript:;">带着年轻的心去流浪</a></li> </ul> </div> </div> <div class="hotuser"> <div class="title"> <h3>活跃会员</h3> </div> <div class="users"> <ul> <li> <img src="picture/use1.jpg"> <p><a href="#">作响_</a></p> <p>发布<span>30</span>专辑<span>5</span></p> </li> <li> <img src="picture/use2.jpg"> <p><a href="#">大媚子</a></p> <p>发布<span>13</span>专辑<span>3</span></p> </li> <li> <img src="picture/use3.jpg"> <p><a href="#">Honey米儿</a></p> <p>发布<span>16</span>专辑<span>2</span></p> </li> <li> <img src="picture/use4.jpg"> <p><a href="#">如茅挽君</a></p> <p>发布<span>21</span>专辑<span>2</span></p> </li> <li> <img src="picture/use5.jpg"> <p><a href="#">雪木其</a></p> <p>发布<span>23</span>专辑<span>4</span></p> </li> </ul> </div> </div> <div class="focus"> <div class="title"> <h3>关注我们</h3> </div> <div class="focusdesc"> <a href="#" class="sina"></a> <a href="#" class="qqzone"></a> <a href="#" class="qqweibo"></a> <a href="#" class="douban"></a> <a href="#" class="renren"></a> <a href="#" class="weixin"></a> </div> <div class="wximg"><img src="picture/weixin.png"> </div> </div> </div> </div>  <div id="footer"> <div class="line"></div> <div class="copy"> <p>版权所有 ©爱旅行</p> </div> </div> <div class="tools"> <a href="#" class="gotop"><i></i>返回顶部</a> <a href="#" class="suggest"><i></i>意见反馈</a> </div> <div class="sugform"> <div class="sugtitle"><p>您对<span class="curpage">"当前页面"</span>满意吗?</p><a href="javascript:void(0)" class="close"> </a></div> <div class="check"><textarea name="" rows="" cols=""></textarea> </div> </div><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/index.js"></script><script type="text/javascript" src="js/common.js"></script> </body> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544

CSS样式代码

/*轮播图*/ #content .main .slider{height:355px;padding:10px 10px 13px;position:relative;} #content .main .slider .v {width:710px;height:355px;position:relative;z-index:100;} #content .main .slider .v .wrap {height:355px;width:7100px;position:absolute;left:0;} #content .main .slider .v .wrap a {float:left;} #content .main .slider .v .thumbpics {width:700px;padding:8px 5px 8px;line-height:50px;display:none;position:absolute;bottom:0;left:0;z-index:0;background:rgba(0,0,0,0.8);} #content .main .slider .v .thumbpics ul li {height:30px;line-height:30px;padding:2px;margin:0 3px;float:left;cursor:pointer;position:relative;} #content .main .slider .v .thumbpics img {width:60px;display:block;} /*列表展示*/ #content .main .title {height:35px;line-height:35px;border-bottom:1px solid #CCCCCC;letter-spacing:1px;} #content .main .title h2 {padding-left:15px;float:left;font-size:20px; } #content .main .title span {font-size:13px;float:right; } #content .main . /* 热门推荐 */ #content .sider .recommend {background:#F9F9F9;padding:5px 10px 10px;height:360px;} #content .sider .recommend .view {margin-top:10px;text-align:center;padding:0 4px;} #content .sider .recommend .view h3{text-align:left;padding-left:5px;margin:10px 0 5px;} #content .sider .recommend .view p {line-height:20px;letter-spacing:1px;text-align:left;text-indent:20px;padding-left:5px;} /* 热门标签 */ #content .sider .tag {height:205px;margin:19px 0 15px;background:#F9F9F9;padding:5px 10px 10px;} #content .sider .tag .taglist {margin:10px 5px;} #content .sider .tag .taglist li {height:23px;float:left;line-height:23px;margin:3px;white-space:nowrap;} #content .sider .tag .taglist li a.lev1 {font-size:23px;color:orange;} #content .sider .tag .taglist li a.lev2 {font-size:18px;color:#75C50A;} #content .sider .tag .taglist li a.lev3 {font-size:15px;color:#606060;}height:69px;background:url(../image/sites.png) -222px -211px no-repeat;} #content .sider .focus .focusdesc a.weixin:hover {height:69px;background:url(../image/sites.png) 1px -211px no-repeat;} #content .sider .focus .wximg {width:223px;height:210px;background:#FFFFFF;position:absolute;top:50px;left:10px;display:none;text-align:center;border-radius:20px;overflow: hidden;} #content .sider .focus .wximg img{width:223px;height:210px; }

六、遇到问题及如何解决

实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。

七、实训总结

通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。