WEB前端期末大作业——关于酒店主题网站设计——高级酒店公寓网页(4页)
2023-12-31 19:19:42
👨?🎓学生HTML静态网页基础水平制作👩?🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
🏀 精彩专栏推荐👇🏻👇🏻👇🏻
? 【作者主页——🔥获取更多优质源码】
? 【学习资料/简历模板/面试资料/ 网站设计与制作】
? 【web前端期末大作业——🔥🔥毕设项目精品实战案例】
一、网站题目👨?🎓
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
二、网站描述??
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
三、网站介绍📖
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发热地板,地暖地板,地热地板,地暖地板二合一</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="loading"><img src="picture/loading.gif" width="32" height="32"></div>
<div class="header">
<div class="header-main w1000 clearfix">
<div class="logo"><a href=""><img src="picture/logo.jpg" width="175" height="60"></a></div>
<div class="menub">
<b></b>
<ul>
<li class="ho">
<a href="default.html" class="btit">网站首页</a>
</li>
<li class="ho">
<a href="content.html" class="btit">关于我们</a>
<div class="subnav" style="width:500px;">
<a href="">品牌简介</a><span>·</span>
<a href="">品牌文化</a><span>·</span>
<a href="">取暖历程</a><span>·</span>
<a href="">荣誉资质</a><span>·</span>
<a href="">人才策略</a>
</div>
</li>
<li class="ho">
<a href="pro_list.html" class="btit">产品中心</a>
<div class="subnav" style="width:500px;">
<a href="">产品介绍</a><span>·</span>
<a href="">产品展示</a><span>·</span>
<a href="">安装说明</a>
</div>
</li>
<li class="ho">
<a href="news_list.html" class="btit">新闻中心</a>
<div class="subnav" style="width:400px;">
<a href="">品牌资讯</a><span>·</span>
<a href="">热门观点</a><span>·</span>
<a href="">家居动态</a><span>·</span>
<a href="">精彩视频</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">招商加盟</a>
<div class="subnav" style="width:400px;">
<a href="">加盟优势</a><span>·</span>
<a href="">体验中心展示</a><span>·</span>
<a href="">如何加盟</a><span>·</span>
<a href="">申请加盟</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">客户案例</a>
<div class="subnav" style="width:400px;">
<a href="">新房安装</a><span>·</span>
<a href="">老房改造</a><span>·</span>
<a href="">工程案例</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">服务中心</a>
<div class="subnav">
<a href="">服务理念</a><span>·</span>
<a href="">服务支持</a><span>·</span>
<a href="">家居顾问</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">联系我们</a>
</li>
</ul>
</div>
</div>
<div class="bg"></div>
</div>
<div class="n_banner"><img src="picture/ban.jpg" height="300"/></div>
<div class="main w1000">
<div class="show_local clearfix">
<div class="show_local_left fl">当前位置：<a href="">首页</a> > <a href="">关于我们</a></div>
<div class="show_local_right fr">
<ul>
<li class="all"><a href="">公司新闻</a></li>
<li><a href="">行业资讯</a></li>
<li><a href="">企业文化</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div class="newslist">
<ul class="clearfix">
<li>
<div class="newslist_img fl"><img src="picture/propic01.jpg" width="130" height="130"/></div>
<div class="newslist_txt fr">
<h4><a href="content.html">地板会发热 能省不少事</a></h4>
<h5>data：2020-06-01</h5>
<div class="newslist_txt_con">地板也能供暖?没错,现在来发热地板借助电气实力,成功生产出具有独立知识产权，正式改版上线啦发地板也能供暖?没错,现在来发热地板借助电气实力,成功生产出具有独立知识产权，正式改版上线啦自热地板运用先进的"CG远红外线智能蜂窝"发热技术和"智能温控技术",可以随时设定温度,并灵活控制采暖区域..</div>
</div>
</li>
<div class="bor_bot"></div>
<li class="no_mar">
<div class="newslist_img fl"><img src="picture/propic02.jpg" width="130" height="130"/></div>
<div class="newslist_txt fr">
<h4><a href="">发热地板的原理和优势</a></h4>
<h5>data：2020-06-01</h5>
<div class="newslist_txt_con">发热地板和传统的地暖方式有着本质的区别,传统的地暖需预先加热管道或地板下面的地坪...</div>
</div>
</li>
<div class="bor_bot"></div>
<li>
<div class="newslist_img fl"><img src="picture/propic03.jpg" width="130" height="130"/></div>
<div class="newslist_txt fr">
<h4><a href="">发热地板居家采暖新选择</a></h4>
<h5>data：2020-06-01</h5>
<div class="newslist_txt_con">地板地板也能供暖?没错,现在来发热地板借助电气实力,成功生产出具有独立知识产权，正式改版上线啦地板也能供暖?没错,现在来发热地板借助电气实力,成功生产出具有独立知识产权，正式改版上线啦也能供暖?没错,现在来发热地板借助电气实力,成功生产出具有独立知识产权，正式改版上线啦...</div>
</div>
</li>
<div class="bor_bot"></div>
<li class="no_mar">
<div class="newslist_img fl"><img src="picture/propic04.jpg" width="130" height="130"/></div>
<div class="newslist_txt fr">
<h4><a href="">解密自发热地板原理和优缺点</a></h4>
<h5>data：2020-06-01</h5>
<div class="newslist_txt_con">自发热地板将发地板也能供暖?没错,现在来发热地板借助电气实力,成功生产出具有独立知识产权，正式改版上线啦热装置整合到地板内部,将地暖设备和地热地板合二为一,减少了广大消费者的铺装成本...</div>
</div>
</li>
<div class="bor_bot"></div>
<li>
<div class="newslist_img fl"><img src="picture/propic07.jpg" width="130" height="130"/></div>
<div class="newslist_txt fr">
<h4><a href="">发热地板的原理和优势</a></h4>
<h5>data：2020-06-01</h5>
<div class="newslist_txt_con">发热地板和传统的地暖方式有着本质的区别,传统的地暖需预先加热管道或地板下面的地坪发热地板和传统的地暖方式有着本质的区别,传统的地暖需预先加热管道或地板下面的地坪...发热地板和传统的地暖方式有着本质的区别,传统的地暖需预先加热管道或地板下面的地坪...</div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="Page clearfix">
<span>46 条记录 1/6 页</span> <a href="">下一页</a><span class="current">1</span>
<a href=""> 2 </a>
<a href=""> 3 </a>
<a href=""> 4 </a>
<a href=""> 5 </a>
<a href="">下5页</a>
<a href="">末页</a>
</div>
</div>
<!--footer start-->
<div class="footer clearfix">
<div class="f-fi w1000 clearfix">
<div class="le">
<ul>
<li class="ho">
<a href="" class="btit">关于我们</a>
<div class="subnav">
<a href="">品牌简介</a>
<a href="">品牌文化</a>
<a href="">取暖历程</a>
<a href="">荣誉资质</a>
<a href="">人才策略</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">产品中心</a>
<div class="subnav">
<a href="">产品介绍</a>
<a href="">产品展示</a>
<a href="">安装说明</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">新闻中心</a>
<div class="subnav">
<a href="">品牌资讯</a>
<a href="">热门观点</a>
<a href="">家居动态</a>
<a href="">精彩视频</a>
</div>
</li>
</ul>
</div>
<div class="map"></div>
</div>
<div class="f-se w1000">
<div class="le fl">
CopyRight 2020 某某科技有限公司 All Right Reserved 浙ICP备xxxxxxxx号
技术支持：<a target="_blank" href="">某某科技</a>
</div>
<div class="footertel fr">全国免费统一热线：xxx</div>
</div>
</div>
<!--footer end-->
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
<script src="js/banner.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
CSS样式代码🏡
@charset "utf-8";
/* CSS Document */
html { font: 12px/1.8 "微软雅黑", "\5b8b\4f53", Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font: 12px/1.8 "微软雅黑", "\5b8b\4f53", Arial, sans-serif; }
.fl{ float:left;}
.fr{ float:right;}
.content { width: 1000px; margin: 0px auto; overflow:hidden;height:auto; *zoom:1;}
.content:after { content: ""; clear: both; visibility: hidden; height: 0px; display: block; }
body { min-width: 1000px; overflow-x: hidden; color: #333!important; }
.w1000 { width: 1000px; margin: 0 auto; position: relative; }
.loading { width: 100%; height: 100%; position: fixed; background: #ffffff; z-index: 11; opacity: 0.8; filter: alpha(opacity=80); }
.loading img { position: absolute; top: 50%; left: 50%; }
.i-seb .le a.leimg { display: block; width: 495px; height: 235px; overflow: hidden; }
.header { height: 85px; width: 100%; padding-bottom: 5px; background: url(../images/home_02.png) repeat-x center top; position: relative; z-index: 10; }
.header .header-main { position: relative; z-index: 11;}
.allerm { background: url("../images/drny.jpg") no-repeat; }
.header .logo { padding: 25px 0 0 0; float: left; }
.header-main .menub { padding-top: 13px; margin-left: 100px; float: left; position: relative; }
.header-main .menub li { width:56px; padding: 0 17px; position: relative;}
.header-main .menub li a{ font-size:14px;}
.header-main .menub li .btit { display: block; line-height: 72px; height: 72px; color: #333; text-align: center; position: relative; }
.header-main .menub li .subnav { position: absolute; left: -58px; top: 72px; display: none; z-index: 12; line-height: 45px; }
.header-main .menub li .subnav a { display: inline-block; text-align: center; line-height: 45px; color: #333; font-size:12px;}
.sz1 {width: 11px;height: 35px;background:url("../images/sz_1.png") no-repeat;margin-left: 15px; }
.sz2 {width:22px; height:35px;background: url("../images/sz_2.png") no-repeat; margin-left:11px; }
.sz3 {width:24px;height:35px;background: url("../images/sz_3.png") no-repeat; margin-left: 11px; }
.header-main .menub li .subnav a:hover { color: #c41723; }
.header-main .menub li .subnav span { display: inline-block; color: #333; padding: 0 10px; }
.header-main .menub b { display: block; width: 55px; height: 3px; background: #c41723; position: absolute; left: 23px; top: 82px; }
.header .bg { position: absolute; left: 0; top: 85px; width: 100%; height: 51px; background: url(../images/company_03.png) repeat-x center top; display: none; z-index: 2; }
.header-main .right { float: right; padding-top: 39px; }
.header-main .right a { display: inline-block; padding-left: 38px; background: url(../images/home_08.png) no-repeat left center; color: #333; }
.footer { background: #2e2a27; color: #a2a1a0; border-top: 1px solid #d0cfcf; }
/*导航 关于我们*/
六、遇到问题及如何解决🔍
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结😊
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “??评论” “💙收藏” 一键三连哦！
2.??【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
文章来源:https://blog.csdn.net/qq3200628753/article/details/126206046
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！