• web前端期末大作业网课设计与实现 _简单DIV布局旅游网页——简洁的旅游酒店公寓(15页)HTML+CSS+JavaScript

    👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,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 href="css/Home.css" rel="stylesheet" type="text/css" />
<link href="css/common/head.css" rel="stylesheet" type="text/css" />
<link href="css/common/foot.css" rel="stylesheet" type="text/css" />

<script type='text/javascript'  src="Js/head.js">script>

<script type="text/javascript" src="Js/ThemeFocus/jquery-1.9.1.min.js">script>

<script type="text/javascript" src="Js/ThemeFocus/jquery.nav.js">script>

<script type="text/javascript" src="Js/DestinationSearch/citySelector.js">script>
<script type="text/javascript" src="Js/My97DatePicker/WdatePicker.js">script>	
head>


<body>
	<div id="container">
		
		<div id="nav">
	  
	  <div class="logo"> <img src="Common/images/logo.png" width="120" height="80" border="0"/> div>
	  
	  <ul id="navMenu">
		<li><a href="#" rel='dropmenu1'>国内目的地a>li>
		<li><a href="#" rel='dropmenu2'>主题推荐a>li>
		<li><a href="#" rel='dropmenu3'>出游类型a>li>
		<li><a href="Theme/TravelGuide.html" rel='dropmenu4'>旅游指南a>li>
	  ul>
	  <div class="attention"> 
	  	<a href="#" class="atnimg"><img src="Common/images/attention.jpg" width="70" height="25" border="0"/>a> 
	  div>
	  
	  <div class="search" valign="middle">
		
	  	
		<div class="selectBox">
			<input type="text" class="cityinput" id="citySelect" value="城市名" style="border:0;background: none transparent scroll repeat 0% 0%;width:95px;height:20px;">
			
			
		div>	
		
		 <input name="text" type="text" class="searcText" style="border:0;background: none transparent scroll repeat 0% 0%;width:130px;height:20px;margin:10px 0 0 2px;float:left;"/>
		 <div class="searcher">
		 	<a href="#"><img src="Common/images/searcher.jpg" width="20" height="20" border="0"/>a>
		 div>
	  div>
	div>
	
	
		<div id="dropmenu1" class="dropMenu">
		<table border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td width="80" class="tdborder">
					<span class="province">直辖市span>
				td>
				<td class="tdborder">
					<ul>
						<li><a href="#">北京a>li>
						<li><a href="#">上海a>li>
						<li><a href="#">天津a>li>
						<li><a href="#">重庆a>li>
					ul>
				td>
			tr>
			<tr>
				<td class="tdborder">
					<span class="province">港澳台span>
				td>
				<td class="tdborder">
					<ul>
						<li><a href="#">香港a>li>
					ul>
				td>
			tr>
			<tr>
				<td class="tdborder">
					<span class="province">海南span>
				td>
				<td class="tdborder">
					<ul>
						<li><a href="House/CityHouse.html" target="_blank">三亚a>li>
						<li><a href="#">博鳌(琼海)a>li>
						<li><a href="#">文章a>li>
						<li><a href="#">五指山a>li>
						<li><a href="#">陵水（三亚）a>li>
					ul>
				td>
			tr>
			<tr>
				<td class="tdborder">
					<span class="province">西南span>
				td>
				<td class="tdborder">
					<ul>
						<li><a href="#">桂林a>li>
						<li><a href="#">大理a>li>
						<li><a href="#">丽江a>li>
						<li><a href="#">昆明a>li>
						<li><a href="#">腾冲a>li>
						<li><a href="#">西双版纳a>li>
						<li><a href="#">香格里拉a>li>
					ul>
				td>
			tr>
			<tr>
				<td class="tdborder">
					<span class="province">山东span>
				td>
				<td class="tdborder">
					<ul>
						<li><a href="#">青岛a>li>
						<li><a href="#">威海a>li>
						<li><a href="#">烟台a>li>
						<li><a href="#">蓬莱a>li>
						<li><a href="#">济南a>li>
						<li>
    • 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
  • 相关阅读:
    用队列式广度优先算法解决背包问题
    Django-(5)
    推荐 5 个 火火火火 的 CSS 项目
    电机与拖动 - 7 直流电机
    Springboot Jpa: [mysql] java.sql.SQLException: Duplicate entry 'XXX' for key 'PRIMARY'
    用verilog编写FFT软核从0到1最强实现及解析（一）
    算法-1.两数之和
    转载 - 洞察问题本质，解决工作难题
    什么？Coolbpf 不仅可以远程编译，还可以发现网络抖动！
    NLP——电影评论情感分析
  • 原文地址：https://blog.csdn.net/QQ_____365392777/article/details/126194361