html网页制作——html css javascript jquery bootstarp马尔代夫旅游响应式网站

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

🏀 精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【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>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper header col-xs-12">
  <div class="container nav-wrapper">
    <div class="head-top">
      <div class="logo col-md-6 col-sm-4 col-xs-12"><img src="img/login.png"></div>
      <div class="logo-right col-md-6 col-sm-8 col-xs-12">
        <div class="search col-md-12 col-sm-12"> <i class="taobao"></i> <i class="sina"></i> <i class="wx"></i>
          <form class="navbar-form col-xs-6" role="search">
            <div class="form-group">
              <input type="text" class="form-control" name="search" value="" placeholder="请输入关键字">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="clearfix"></div>
<!--导航-->
<div class="navs">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="index.html">首页</a> </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="content.html">关于马尔代夫</a></li>
          <li><a href="jdjs.html">酒店介绍及报价</a></li>
          <li><a href="list.html">最新优惠政策</a></li>
          <li><a href="">预定流程</a></li>
          <li><a href="text.html">马代旅游需知</a></li>
          <li><a href="yhzc.html">关于我们</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>
<div class="clearfix"></div>
<!--banner-->
<div class="banner">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active"> <img src="img/banner1.jpg" alt="...">
        <div class="carousel-caption-con">
	      <div class="container">
	        <div class="col-md-4 col-sm-4 col-xs-12">
	          <div class="banner-title">人和假期</div>
	          <p>蜜月尽在马尔代夫 </p>
	          <p>咨询电话：010-56149580</p>
	        </div>
	        <div class="col-md-4 col-sm-4 col-xs-12 weather">
	        	<div class="title"></div>
	        	<iframe width="210" scrolling="no" height="80" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=#FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 bj">
				<div class="title">北京时间</div>
				<div class="bjtime"></div>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 md">
	        	<div class="title">马尔代夫时间</div>
				<div class="mdtime"></div>
	        </div>
	      </div>
	    </div>
      </div>
      <div class="item"> <img src="img/banner2.jpg" alt="...">
        <div class="carousel-caption-con">
	      <div class="container">
	        <div class="col-md-4 col-sm-4 col-xs-12">
	          <div class="banner-title">浪漫沙滩的气味</div>
	          <p>你是风儿我是沙 </p>
	          <p>咨询电话：010-56149580</p>
	        </div>
	        <div class="col-md-4 col-sm-4 col-xs-12 weather">
	        	<div class="title"></div>
	        	<iframe width="210" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=#FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 bj">
				<div class="title">北京时间</div>
				<div class="bjtime"></div>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 md">
	        	<div class="title">马尔代夫时间</div>
				<div class="mdtime"></div>
	        </div>
	      </div>
	    </div>
      </div>
      <div class="item"> <img src="img/banner3.jpg" alt="...">
        <div class="carousel-caption-con">
	      <div class="container">
	        <div class="col-md-4 col-sm-4 col-xs-12">
	          <div class="banner-title">蔚蓝色的心跳</div>
	          <p>让心情随波浪跳动 </p>
	          <p>咨询电话：010-56149580</p>
	        </div>
	        <div class="col-md-4 col-sm-4 col-xs-12 weather">
	        	<div class="title"></div>
	        	<iframe width="210" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=#FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 bj">
				<div class="title">北京时间</div>
				<div class="bjtime"></div>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 md">
	        	<div class="title">马尔代夫时间</div>
				<div class="mdtime"></div>
	        </div>
	      </div>
	    </div>
      </div>
    </div>
    
    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
</div>
<div class="container">
  <div class="main col-md-12">
    <div class="row products">
      <div class="col-md-4 col-sm-4 col-xs-12"><img src="img/main1.png" class="img-responsive">
        <div class="products_title">W Retreat & Spa Maldives W宁静岛</div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-12"><img src="img/main1.png" class="img-responsive">
        <div class="products_title">Viceroy Maldives 薇斯瑞岛</div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-12"><img src="img/main1.png" class="img-responsive">
        <div class="products_title">Medhufushi Island Resort曼德芙岛</div>
      </div>
    </div>
    <div class="row news">
      <div class="col-md-4 col-sm-4 col-xs-12"><!--img src="img/main1.png" class="img-responsive"-->
        
        <div class="kePublic"> 
          <!--效果html开始-->
          <div class="mkeFocus">
            <div class="mkeUl">
              <ul>
                <li><b class="bg"></b><b class="text">七月份</b><a href="http://www.17sucai.com" target="_blank"><img src="img/ban1.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li>
                <li><b class="bg"></b><b class="text">八月份</b><a href="http://www.17sucai.com" target="_blank"><img src="img/ban2.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li>
                <li><b class="bg"></b><b class="text">马尔代夫</b><a href="http://www.17sucai.com" target="_blank"><img src="img/ban3.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li>
                <li><b class="bg"></b><b class="text">浪漫</b><a href="http://www.17sucai.com" target="_blank"><img src="img/ban4.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li>
              </ul>
              <div class="mkeLbtn"></div>
              <div class="mkeRbtn"></div>
            </div>
          </div>
          <!--效果html结束-->
          <div class="tejia"></div> 
        </div>
      </div>
      <div class="col-md-8 col-sm-8 col-xs-12">
      	<div class="row">
	        <div class="col-md-12 index_news_list">
	          <h4><a href="#">2013.04.18爱情喜剧电影《马尔代夫遇见爱》</a></h4>
	          <div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。马尔代夫的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div>
	        </div>
	         <div class="col-md-12 index_news_list">
	          <h4><a href="#">2013.04.18爱情喜剧电影《马尔代夫遇见爱》</a></h4>
	          <div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。马尔代夫的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div>
	        </div>
	         <div class="col-md-12 index_news_list">
	          <h4><a href="#">2013.04.18爱情喜剧电影《马尔代夫遇见爱》</a></h4>
	          <div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。马尔代夫的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div>
	        </div>
	         <div class="col-md-12 index_news_list">
	          <h4><a href="#">2013.04.18爱情喜剧电影《马尔代夫遇见爱》</a></h4>
	          <div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。马尔代夫的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div>
	        </div>
		</div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper footer">
  <div class="service">
    <div class="container">
    	<div class="col-md-3 col-sm-12">
    		<div class="link_logo"></div>
    	</div>
    	<div class="col-md-6 col-sm-12">
    		<div class="link_tel"></div>
    	</div>
    	<div class="col-md-3 col-sm-12 fx">
    		<div class="bshare-custom icon-medium">
    			<div class="bsPromo bsPromo2"></div>
				<a title="分享到一键通" class="bshare-bsharesync" href="javascript:void(0);"></a>
				<a title="分享到QQ空间" class="bshare-qzone"></a>
				<a title="分享到新浪微博" class="bshare-sinaminiblog" href="javascript:void(0);"></a>
				<a title="分享到人人网" class="bshare-renren" href="javascript:void(0);"></a>
				<a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
			</div>
			<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script>
			<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
		</div>
    </div>
  </div>
  <div class="container">
    <div class="friendlink">
      <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/wx_link.png" class="img-responsive"></a></div>
      <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/taobao_link.png" class="img-responsive"></a></div>
      <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/wb_link.png" class="img-responsive"></a></div>
    </div>
    <div class="copyright col-md-12">
      <p>版权所有：人和假期旅游咨询   咨询电话：15611549285 传真：010-66094197</p>
      <p>北京西城区复兴门内大街45号 4号楼101室 邮编：100801   备案专政号 京IPC备1300362号</p>
    </div>
  </div>
</div>
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script language="javascript">
var rnum=$(".mkeUl ul li").size();
var cnum=0;
$(".mke_ns2").html(rnum);
$(".mkeUl ul").width(rnum*367);
$(".mkeRbtn").click(function(){
	cnum++;
	if(cnum>(rnum-1)){
	cnum=0	
	}
	$(".mkeUl ul").animate({"left":-cnum*367},300);
	$(".mke_ns1").html(cnum+1);
});
$(".mkeLbtn").click(function(){
	cnum--;
	if(cnum<0){
	cnum=rnum-1;	
	}
	$(".mkeUl ul").animate({"left":-cnum*367},300);
	$(".mke_ns1").html(cnum+1);
});

function autoPlay(){
  	cnum++;
	if(cnum>(rnum-1)){
	cnum=0	
	}
	$(".mkeUl ul").animate({"left":-cnum*367},300);
	$(".mke_ns1").html(cnum+1);
}
var Timer=setInterval(autoPlay,4000);
$(".mkeFocus").hover(function(){clearInterval(Timer)},function(){Timer=setInterval(autoPlay,4000);});
</script>
<script language="javascript">
		var myDate = new Date();
		var y =	myDate.getFullYear();    //获取完整的年份(4位,1970-????)
		var M =	myDate.getMonth();       //获取当前月份(0-11,0代表1月)
		var D =	myDate.getDate();        //获取当前日(1-31)
		var week =	myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
		var days=[ "日 ", "一 ", "二 ", "三 ", "四 ", "五 ", "六 ",] 
		var H =	myDate.getHours();       //获取当前小时数(0-23)
		var Mt =	myDate.getMinutes();     //获取当前分钟数(0-59)
		time ='马尔代夫　'+y+'年'+(M<10 ? "0"+ M : M)+'月'+(D<10 ? "0"+ D : D)+'日'+' '+'星期'+days[week];
		bjtime = (H<10 ? "0"+ H : H)+':'+(Mt<10 ? "0"+ Mt : Mt);
		mdtime = (H<10 ? "0"+ H+2 : H+2)+':'+(Mt<10 ? "0"+ Mt : Mt);
		$(".weather .title").text(time);
		$(".bjtime").text(bjtime);
		$(".mdtime").text(mdtime);
</script>
</body>
</html>

CSS样式代码🏡

@charset "utf-8";
body{background:#e1dac8;color:#E1DAC8;}

body,h1,h2,h3,h4,h5,h6, ul, dl, dd, dt, ol, li, p{font-family:"微软雅黑"," 黑体","宋体";  margin:0;padding:0;-webkit-text-size-adjust: none}
.wrapper{width:100%;}
a{color:#715B1D;}
.header{background:url(../img/header_bg.png) no-repeat center center; height:150px;}
.logo-right{margin-top:30px;height:15px;}
.logo{padding-top:15px;}
.search{padding-top:15px;}
.search .form-control{background:#463511; border:1px solid #2D2408; color:#968869;}
.search .btn-default{background:#2D2408; border:1px solid #2D2408; color:#968869;}
.navbar-form{ float:right;padding-right:5px;}
.search i{height:34px; width:34px; display:block; float:right;margin-top:8px; background-size: 34px 34px; border-radius:3px; margin-right:5px;}
.wx{background:url(../img/wx.png) no-repeat 0px 0px;}
.taobao{background:url(../img/taobao.png) no-repeat 0px 0px;}
.sina{background:url(../img/sina.png) no-repeat 0px 0px;}
.search .btn{margin-left:-8px;}
.navbar{ margin-bottom:0px;}
.navbar-header{ padding-left:15px;}
.navbar-default{background:rgba(0,0,0,.6); border:0px;position:absolute;top:100px; z-index:12; width:100%;}
.navbar-default .navbar-brand{color:#fff;}
.nav>li>a {font-size:1.4em;}
.navbar-default .navbar-nav>li>a{color:#fff; font-size:1.2em;}
.navbar-default .navbar-nav>li>a:hover{color:#eee; font-size:1.2em;}
.navbar-default .navbar-brand:hover{color: #eee;}
.navbar-brand {font-size:1.2em;}

.carousel-caption-con{position:absolute;left:0px;right:0px;padding-bottom:0px; height:120px; bottom:0px; padding-top:0px; color:#fff; z-index:11; background:url(../img/bg.png);}
.banner-title{margin-top:15px; font-size:1.5em; font-weight:bold; padding-bottom:15px;}

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

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

七、实训总结😊

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

八、更多干货🎁

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

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

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