- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

关于城市旅游的HTML网页设计——中国旅游HTML+CSS+JavaScript 出游旅游主题度假酒店计划出行网站设计

IT司马青衫发表于 2022/08/11 00:45:42 2022/08/11

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

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

@TOC

一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

三、网站介绍📖

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言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 charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>中国旅游</title>
</head>
<body>
<header class="head">
  <div> <img src="images/logo.png"> <span class="bda"> <a href="zhuce.html">注册</a> |  <a href="denglu.html">登录</a> </span></div>
</header>
<nav class="menu">
  <ul class="center">
    <li><a href="index.html">网站首页</a></li>
    <li><a href="sichuan.html">四川旅游 </a></li>
    <li><a href="yunnan.html"> 云南旅游 </a></li>
    <li><a href="xizang.html">西藏旅游</a></li>
    <li><a href="tuijie.html">推荐旅游</a></li>
  </ul>
</nav>
<div class="content">
  <marquee>
  欢迎来到中国旅游，开启新的旅程吧！
  </marquee>
  <div class="banner">
    <div class="banner_box  ">
      <div class="box-1">
        <ul>
          <li><img src="images/banner1.jpg"></img></li>
          <li><img src="images/banner2.jpg"></img></li>
          <li><img src="images/banner3.jpg"></img></li>
          <li><img src="images/banner4.jpg"></img></li>
          <li><img src="images/banner5.jpg"></img></li>
        </ul>
      </div>
      <div class="box-2">
        <ul>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="content">
  <div class="clear"></div>
  <div class="bar"><strong>热门景区</strong> </div>
  <div class="pics scrollleft">
    <ul>
      <li> <b><img src="images/a1.jpg" /></b>
        <h3><a href="info.html">故宫博物馆</a></h3>
        <p> 北京故宫博物院建立于1925年10月10日，位于故宫博物院北京故宫即紫禁城内。是在明朝、清朝两代皇宫及其收藏的基础上建立起来的中国综合性博物馆，也是中国最大的古代文化艺术博物馆。 </p>
      </li>
      <li> <b><img src="images/a2.jpg" /></b>
        <h3><a href="info.html">颐和园</a></h3>
        <p>　颐和园位于中国北京市西北海淀区，占地290公顷（合4400亩），是一座巨大的皇家园林和清朝的行宫。修建于清朝乾隆年间、重建于光绪年间，曾属于清朝北京西郊三山五园之一。</p>
      </li>
      <li> <b><img src="images/a3.jpg" /></b>
        <h3><a href="info.html">平遥古城</a></h3>
        <p> 位于山西中部平遥县内，是一座具有2700多年历史的文化名城，与同为第二批国家历史文化名城的四川阆中、云南丽江、安徽歙县并称为“保存最为完好的四大古城”</p>
      </li>
      <li> <b><img src="images/a4.jpg" /></b>
        <h3><a href="info.html">长白山</a></h3>
        <p> 长白山犹如一条鳞光闪烁的巨龙，巍峨磅礴，横卧天际。是我国与五岳齐名、名光秀丽、景色迷人的关东第一山，因其主峰白头山多白色浮石与积雪而得名，素有"千年积雪为年松，直上人间第一峰"的美誉。</p>
      </li>
      <li> <b><img src="images/a5.jpg" /></b>
        <h3><a href="info.html">庐山</a></h3>
        <p> 庐山以雄、奇、险、秀闻名于世，素有“匡庐奇秀甲天下”之美誉。巍峨挺拔的青峰秀峦、喷雪鸣雷的银泉飞瀑、瞬息万变的云海奇观、俊奇巧秀的园林建筑，一展庐山的无穷魅力。</p>
      </li>
      <li> <b><img src="images/a6.jpeg" /></b>
        <h3><a href="info.html">五台山 </a></h3>
        <p> 中国佛教及旅游胜地之一。与四川峨嵋山、安徽九华山、浙江普陀山共称“中国佛教四大名山”。与尼泊尔蓝毗尼花园、印度鹿野苑、菩提伽耶、拘尸那迦并称为世界五大佛教圣地</p>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
  <div class="ad"><img src="images/ad.jpg" width="100%"></div>
  <div class="bar"><strong>摄影美图 </strong></div>
  <div id="div1">
    <ul id="ul">
      <li class="li"><img src="images/1.jpg"></li>
      <li class="li"><img src="images/2.jpg"></li>
      <li class="li"><img src="images/3.jpg"></li>
      <li class="li"><img src="images/4.jpg"></li>
      <li class="li"><img src="images/5.jpg"></li>
      <li class="li"><img src="images/6.jpg"></li>
      <li class="li"><img src="images/7.jpg"></li>
      <li class="li"><img src="images/8.jpg"></li>
      <li class="li"><img src="images/9.jpg"></li>
    </ul>
  </div>
  <div class="clear"></div>
</div>
<footer class="end">
  <p>xxx版权所有</p>
  <p>本地时间：<span id="localtime"><font color="#000000">2021-12-11 16:17:22  星期六</font></span></p>
</footer>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/gundong.js"></script>
<script type="text/javascript" src="js/time.js"></script>
</body>
</html>

CSS样式代码🏡

@charset "utf-8";

/* CSS Document */

ul,
li,
h1,
h2,
h3,
p {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none
}

body {
    background: #fff;
    margin: 0;
    line-height: 21px;
}

.head img {
    height: 80px;
}
.head .bda{ float:right; margin-top:30px;}
.head .bda a{ background:#99CC66; padding:5px 10px; margin:10px}
.clear {
    clear: both
}

.menu li {
    list-style: none
}

.banner {
    position: relative;
    clear: both
}

img {
    max-width: 100%;
}

.div1 img {}

.head div {
    width: 1000px;
    margin: 0 auto
}

.head {
    padding: 10px 0;
    background: #fff;
}

.head h2 {
    color: #105ae1;
    font-size: 36px
}

.menu {
    width: 100%;
    border-bottom: #a7f7a5 solid 3px;
    margin-bottom: 10px;
    float: left;
    text-align: center;
    background: rgb(168, 240, 250)
}

.menu ul {
    width: 1000px;
    margin: 0 auto
}

.menu li a {
    color: rgb(0, 0, 0);
    font-size: 18px;
	display:block;
    font-weight: bold;
}

.menu li  {
    float: left;
    width: 20%;
    text-align: center;
    padding: 10px 0
}
.menu li:hover{ background:#FF9966}
.right {
    float: right;
    width: 250px;

	background:#FBEBCC;
    
    padding:30px 15px ;
    margin-top: 30px;
}

.right ul a {
    color: #333;
}

.left1 {
    min-height: 300px;
    float: left;
    width: 1100px;
    padding: 20px 0;
}
.left {
    min-height: 300px;
    float: left;
    width: 680px;
    padding: 20px 0;
}
.content {
    background: #fff;
    width: 1000px;
    margin: 0 auto;
    font-size: 14px;
}

.div1 {
    width: 730px;
    float: left
}

.div2 {
    width: 252px;
    float: right
}

.div2 .m2 {
    margin-top: 19px
}

.end {
    clear: both;
    border-top: #c0f7a1 solid 2px;
    margin-top: 20px;
    padding: 30px 0;
    text-align: center;
}

.produce img {
    float: left;
    margin: 0 20px 20px 0
}

.produce {
    width: 33.3%;
    float: left
}

.pad {
    padding: 20px;
    display: block
}
.center1{width:100%;}
.div-left{ float:left; width:480px; height:350px; margin-right:40px; }
.div-right{ float:left; width:480px; height:350px;}
.top1{ width:440px; height:30px; background:#D6FFAC; padding:20px;}
.bottom1{ width:100%;}
.bottom2{ width:100%; padding:20px; font-size:16px;}
.bottom2 li{ margin:10px; }
.bottom2 a{ color:#000; }
.dibu{ width:100%; margin-top:20px;}
.dibutop{ font-size:16px; padding:20px; background:#D6FFAC; height:30px; margin-bottom:10px;}
.dibu img:hover{transform:scale(1.1);}
.dibu  img {
    object-fit: cover;
	transition:all 0.5s ease-out;
	position:relative;
}
.zhongshang{width:100%; height:200px; }
.heng{ width:15px; height:50px; background:#D6FFAC; float:left;}
.zhongshang h2{ font-weight:bold; color:#000; padding:10px; padding-left:30px;}
.zhongshang p{ margin:20px; margin-left:-2px}
.zhongshang img{ float:left; width:23%; margin-top:20px; margin-left:10px; height:150px;object-fit: cover;
	transition:all 0.5s ease-out;
	position:relative;}
.zhongshang img:hover{transform:scale(1.1);}
.zhongzhong{ text-align:center;}
.zhongzhong p{ text-indent:2em; font-size:14px !important;color:#000 !important; margin:10px;}
.zhongzhong li b{ display:block; overflow:hidden}
.pics li {
    width: 312px;
	margin:15px;
    list-style: none;
	float:left;
}
.pics li h3 {
    padding: 10px 0;
}
.pics li p {
}
.pics ul {
    margin: 0 -15px
}

.pics li h3 a {
    color: #333;
    font-size: 18px;
}

.pics li h3 a:hover {
    color: #990000
}
.pics li b{ display:block; overflow:hidden}
.pics li:hover img{transform:scale(1.2);}
.pics li {
    min-height: 350px;
}
.pics li img {
    height: 220px;
	display:block;
    width: 100%;
    object-fit: cover;
	transition:all 0.5s ease-out;
}
.pics2 li {
    width: 312px;
	margin:15px;
    list-style: none;
	float:left;
}
.pics2 li h3 {
    padding: 10px 0;
}
.pics2 li p {
}
.pics2 ul {
    margin: 0 -15px
}

.pics2 li h3 a {
    color: #333;
    font-size: 18px;
}

.pics2 li h3 a:hover {
    color: #990000
}
.pics2 li b{ display:block; overflow:hidden}
.pics2 img:hover{transform:scale(1.2);}
.pics2 li {
    min-height: 350px;
}
.pics2 li img {
    height: 220px;
	display:block;
    width: 100%;
    object-fit: cover;
	transition:all 0.5s ease-out;
}
.imglist li {
    list-style: none;
    float: left;
    width: 220px;
    margin: 10px;
    text-align: center
}




.right ul {
    margin-left: 20px;
    line-height: 30px
}

.ff1 {
    float: left;
    width: 50%
}

.ss {
    margin: 30px 20px
}

form {
    float: left;
    display: block;
    width: 90%;
    position: relative;
}
.msg>div .fl{ width:150px}
.banner_con {
	margin: 20px 0;
}
.banner_box {
	height: 560px;
	overflow: hidden;
	position: relative;
}
.box-1 ul {
}
.box-1 ul li {
	width: 100%;
	height: 560px;
	position: relative;
	overflow: hidden;
}
.box-1 ul li img {
	display: block;
	width: 100%;
	object-fit: cover;
	height: 100%;
}
.box-1 ul li h2 {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 40px;
	width: 100%;
	background: rgba(125,125,120,.4);
	text-indent: 2em;
	padding-right: 500px;
	font-size: 15px;
	line-height: 40px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-weight: normal;
	color: ghostwhite
}
.box-2 {
	position: absolute;
	right: 10px;
	bottom: 14px;
}
.box-2 ul li {
	float: left;
	width: 12px;
	height: 12px;
	overflow: hidden;
	margin: 0 5px;
	border-radius: 50%;
	background: rgba(0,0,0,0.5);
	text-indent: 100px;
	cursor: pointer;
}
.box-2 ul .on {
	background: rgba(255,255,255,0.6);
}
.box-3 span {
	position: absolute;
	color: rgba(255,255,255,0.1);
	background: rgba(255,255,255,0.1);
	width: 50px;
	height: 80px;
	top: 50%;
	font-family: "宋体";
	line-height: 80px;
	font-size: 60px;
	margin-top: -40px;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
}
.box-3 .prev {
	left: 10px;
}
.box-3 .next {
	right: 10px;
}
.box-3 span::selection {
	background: transparent;
}
.box-3 span:hover {
	background: rgba(255,255,255,.5);
	color: rgba(255,255,255,1)
}

#div1
{
    position: relative;
    margin: 10px auto;
  
    width: 100%;
    height:200px;
    overflow: hidden;
}
#div1 ul
{
    position: absolute;
    left:0;
}
#div1 ul li
{
    float:left;
    padding: 10px;
    list-style: none;
    width: 200px;
    height: 200px;
}
#div1 ul li img
{
    width: 200px;
    height: 200px;
}

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

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

七、实训总结😊

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

八、更多干货🎁

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

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

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥!

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

关于城市旅游的HTML网页设计——中国旅游HTML+CSS+JavaScript 出游旅游主题度假酒店计划出行网站设计

一、网站题目👨‍🎓

二、网站描述✍️

三、网站介绍📖

四、网站效果🌐

五、网站代码制作部分 📕

HTML结构代码🧱

CSS样式代码🏡

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

七、实训总结😊

八、更多干货🎁

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

关于城市旅游的HTML网页设计——中国旅游HTML+CSS+JavaScript 出游旅游主题度假酒店 计划出行网站设计

一、网站题目👨‍🎓

二、网站描述✍️

三、网站介绍📖

四、网站效果🌐

五、网站代码制作部分 📕

HTML结构代码🧱

CSS样式代码🏡

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

七、实训总结😊

八、更多干货🎁

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品

关于城市旅游的HTML网页设计——中国旅游HTML+CSS+JavaScript 出游旅游主题度假酒店计划出行网站设计