WEB前端期末大作业——关于酒店主题网站设计——高级酒店公寓网页(4页)

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

文章目录🌰

一、网站题目👨‍🎓
二、网站描述✍️
三、网站介绍📖
四、网站效果🌐
五、网站代码制作部分 📕
- 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 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-01h5>
          <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-01h5>
          <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-01h5>
          <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-01h5>
          <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-01h5>
          <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">1span>
	 <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>

<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">全国免费统一热线：xxxdiv>
	
	div>
div>

<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>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220

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; }
/*导航 关于我们*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

六、遇到问题及如何解决🔍

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

七、实训总结😊

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

八、更多干货🎁

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

2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥 在这里插入图片描述

相关阅读:
计算机毕业设计（附源码）python学生信息管理系统
 儿童医疗保健生物识别技术市场现状及未来发展趋势分析
 Java 框架的一些文件配置
 .NET周刊【11月第2期 2023-11-12】
k8s基于kubectl命令管理资源并分配
 第十二,十三章 mysql数据类型，视图的课后练习
 5分钟制作可直接导入GPTs知识库中的自动爬虫
 一、kafka基本原理
 CSS栅格布局（Grid）
16-CSS3
原文地址：https://blog.csdn.net/weixin__BJ050106/article/details/128197829