JavaWeb案例：旅游网站

当当当当~~~~欢迎大家阅读，通过这段时间对JavaWeb的学习，今天我们来做一个旅游网页

一：思路：

首先我们把网页分为三个版块：页眉，主体和页脚

其次再对将这三个大的版块划分成多个小版块

二：页眉

以上就是页眉部分的展示图啦~~~~接下来我们编辑具体代码

<!--首先使用BootStrap框架-><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="js/jquery-3.2.1.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script>

<!--1.页眉部分-->
<header class="container-fluid"><!--插入图片--><div class="row" ><img src="img/top_banner.jpg" class="img-responsive"></div>

<style>.paddtop{padding-top:10px;}.search-btn{float:left;border:1px solid #ffc900;width:50px;height:35px;background-color: #ffc900;text-align: center;line-height:35px;margin-top: 15px;}.search—input{float:left;border:2px solid #ffc900;width:400px;height:35px;padding-left:5px;margin-top: 15px;}
</style><div class="row paddtop"><!--插入图片--><div class="col-md-3"><img src="img/logo.jpg" class="img-responsive"></div><!--插入搜索框--><div class="col-md-5"><input class="search—input" placeholder="请输入线路名称"><a class="search-btn" href="#">搜索</a></div><!--插入图片--><div class="col-md-4"><img src="img/hotel_tel.png" class="img-responsive"></div>
</div>

 <!--导航条--><div class="row"><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><!--定义汉堡按钮--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><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="#">首页</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">导航栏<span class="sr-only">(current)</span></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></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></div>

<!--轮播图--><div class="row"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides --><!--插入三张图片--><div class="carousel-inner" role="listbox"><div class="item active"><img src="img/banner_1.jpg" alt="..."></div><div class="item"><img src="img/banner_2.jpg" alt="..."></div><div class="item"><img src="img/banner_3.jpg" alt="..."></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div>
</header>

三：主体

以上就是主题部分的展示图啦~~~~接下来我们编辑具体代码

<style>.paddtop{padding-top:10px;}.jx{border-bottom: 2px solid #ffc900;padding:5px;}
</style>
<!--2.主体要求-->
<div class="container"><div class="row jx"><img src="img/icon_5.jpg"><span>黑马精选</span></div><div class="row paddtop"><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行</p><font color="red">&yen; 699</font></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行</p><font color="red">&yen; 699</font></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行</p><font color="red">&yen; 699</font></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行</p><font color="red">&yen; 699</font></div></div></div>

<style>.paddtop{padding-top:10px;}.jx{border-bottom: 2px solid #ffc900;padding:5px;}
</style>
<div class="row jx"><img src="img/icon_6.jpg"><span>国内游</span></div><div class="row paddtop"><div class="col-md-4"><img src="img/guonei_1.jpg"></div><div class="col-md-8"><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚五天4晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚五天4晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚五天4晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div></div><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚五天4晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚五天4晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚五天4晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div></div></div></div>
</div>

四：页脚

以上就是页脚部分的展示图啦~~~~接下来我们编辑具体代码

<style>.company{height:40px;background-color: #ffc900;text-align: center;line-height: 40px;font-size: 8px;}
</style>
<!--3.页脚部分-->
<footer div class="container-fluid"><div class="row"><img src="img/footer_service.png" class="img-responsive"></div><div class="row company">江苏传智播客教育科技股份有限公司 版权所有Copyright &copy 2006-2018, All Rights Reserved 苏ICP备16007882</div>
</footer>

以上就是案例旅游网站的具体编码内容啦，希望我的文章对你有所帮助，如果有错误的地方还望大家批评指正，谢谢大家阅读!

JavaWeb案例：旅游网站相关推荐

javaweb黑马旅游网站
环境的搭建第一步:先搭建maven环境,使用maven创建javaweb项目.Idea环境下创建具体步骤为: File-new-Module-设置项目组和项目名称和项目保存位置 File-setti ...
HTML 练习案例旅游网站首页
1.确定使用table来完成布局 2.如果某一行只有一个单元格,则使用<tr><td></td><tr> 3.如果某一行有多个单元格则使用 <t ...
[教程+论文+答辩PPT+开题报告+源码等]基于javaweb的旅游网站
下载:https://download.csdn.net/download/m0_68856272/85052024 项目介绍: <基于javaweb实现的旅游网> 系统说明: 前端使用技 ...
旅游网站java项目模板_基于jsp的旅游网站sx-JavaEE实现旅游网站sx - java项目源码...
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的旅游网站sx, 该项目可用各类java课程设计大作业中, 旅游网站sx的系统架构分为前后台两部分, 最终实现在线上 ...
javaweb JSP JAVA旅游网站在线旅游信息网站（旅游系统旅游网站）jsp旅游管理系统
常见的Javaweb题材有理财系统,就业管理系统,汽车租赁,简易网盘,疫情数据查看,在线招标房,屋租赁,教务管理,医院管理,餐厅收银,来访咨询,兼职论坛,桌面聊天室,酒店管理,民宿管理,车位租赁,音 ...
HTML案例：旅游网站首页
案例:旅游网站首页 1.确定使用table来完成布局 2.如果某一行只有一个单元格,则使用 3.如果某一行有多个单元格 <tr> <td> <table> ...
项目管理案例分析-小型旅游网站开发项目
一.项目背景当今社会已步入了一个全新的信息时代, 人类的每个活动都和"信息" 紧密的联系在一起,小至个人的衣食住行,大及各个组织,单位之间的商务贸易,甚至国际间的交流, 合作都 ...
JavaWeb黑马旅游网-学习笔记01【准备工作】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
net-java-php-python-伊犁旅游网站计算机毕业设计程序
net-java-php-python-伊犁旅游网站计算机毕业设计程序 net-java-php-python-伊犁旅游网站计算机毕业设计程序本源码技术栈: 项目架构:B/S架构开发语言:Java ...