-
web前端期末大作业网课设计与实现 _简单DIV布局旅游网页——简洁的旅游酒店公寓(15页)html css javascript
👨🎓学生HTML静态网页基础水平制作👩🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
网页题目👨🎓
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
网页描述✍️
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
网站效果🌐
网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。
HTML结构代码🧱
<html > <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/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><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> <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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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>