黑马旅游网前端页面Bootstrap案例

最新推荐文章于 2022-12-10 16:28:39 发布
最新推荐文章于 2022-12-10 16:28:39 发布
阅读量646 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gfvvfb/article/details/104315340
版权 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <![endif]-->
    <style>
        .paddtop{
            padding-top: 10px;
        }
        .jx{
            border-bottom: 2px solid #ffc900;
            padding: 5px;
        }
        .company{
            height: 40px;
            background-color: #ffc900;
            text-align: center;
            line-height:40px ;
            font-size: 8px;
        }
        .search-btn{
            float: left;
            border:1px solid #ffc900;
            width: 90px;
            height: 35px;
            background-color:#ffc900 ;
            line-height: 35px;
            margin-top: 15px;
            text-align: center;
        }
        .search-input{
            float: left;
            border:2px solid #ffc900;
            width: 300px;
            height: 35px;
            padding-left: 5px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <header class="container">
        <div class="row">
            <img src="photos/top_banner.jpg" class="img-responsive">
        </div>
        <div class="row paddtop ">
            <div class="col-md-3">
                <img src="photos/logo.jpg" class="img-responsive">
            </div>
            <div class="col-md-6">
                <input class="search-input" placeholder="请输入线路名称">
                <a class="search-btn" href="#">搜索</a>
            </div>
            <div class="col-md-3">
                <img src="photos/hotel_tel.png" class="img-responsive">
            </div>
        </div>
        <!--导航条-->
        <nav class="navbar navbar-default" >
            <div class="container">
                <div class="container-fluid">
                    <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="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">首页</a>
                    </div>
                    <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>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </div>
        </nav>
        <!--轮播图-->
        <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="photos/banner_1.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="photos/banner_2.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="photos/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>
    </header>
    <div class="container">
        <div class="row jx">
            <img src="photos/icon_5.jpg">
            <span>黑马精选</span>
        </div>

        <div class="row paddtop">
            <div class="col-md-3">
                <div class="img-thumbnail">
                    <img src="photos/jiangxuan_3.jpg" alt="" >
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <font color="red">&yen; 899</font>
                </div>
            </div>

            <div class="col-md-3">
                <div class="img-thumbnail">
                    <img src="photos/jiangxuan_3.jpg" alt="" >
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <font color="red">&yen; 899</font>
                </div>
            </div>

            <div class="col-md-3">
                <div class="img-thumbnail">
                    <img src="photos/jiangxuan_3.jpg" alt="" >
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <font color="red">&yen; 899</font>
                </div>
            </div>

            <div class="col-md-3">
                <div class="img-thumbnail">
                    <img src="photos/jiangxuan_3.jpg" alt="" >
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <font color="red">&yen; 899</font>
                </div>
            </div>
        </div>


        <div class="row jx">
            <img src="photos/icon_6.jpg">
            <span>国内游</span>
        </div>
        <div class="row paddtop">
            <div class="col-md-4">
                <img src="photos/guonei_1.jpg" alt="">
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-4">
                        <div class="img-thumbnail">
                        <img src="photos/jiangxuan_3.jpg" alt="">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen; 699</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="img-thumbnail">
                            <img src="photos/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="img-thumbnail">
                            <img src="photos/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="img-thumbnail">
                            <img src="photos/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="img-thumbnail">
                            <img src="photos/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="img-thumbnail">
                            <img src="photos/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<footer class="container">
        <div class="row">
            <img src="photos/footer_service.png" class="img-responsive">
        </div>
        <div class="row company">
            江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
        </div>
    </footer>
</body>
</html>
gfvvfb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
旅游网页前端
11-23
包含Web前端开发技术的文档和开发网站的完整代码，开发出旅游网站
黑马旅游网_前端页面总结
底层码农
05-28 9009
register.html 是用于注册的页面 register_ok.html 是注册成功后跳转的页面 login.html 是用户登录的页面 header.html 复用的代码片段，在网站的最前面，包含搜索框，用户信息展示 footer.html 统一的页脚，用户公司声明信息展示 当我们点击一个景点的时候用于显示这个景点的详细信息 Locationhref属性 https://...
Bootstrap实现黑马旅游网
qq_41870790的博客
02-27 457
Bootstrap 概念： 一个前端开发框架 好处： 一、定义了很多的css样式和js插件。开发人员可以直接使用这些样式和插件得到丰富的页面效果 二、响应式布局。 1.同一套页面可以兼容不同分辨率的设备 快速入门： 1.下载Bootstrap 2.将三个文件夹复制到项目中 3.创建html页面，引入必要的资源文件 4.基本模板 <!DOCTYPE html> <html lang...
BootStrap的应用——实现黑马旅游网页面
weixin_42867975的博客
07-22 757
实现黑马旅游网页面代码 <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g...
总结本人学习b站黑马前端课程，各部分案例汇总
weixin_72322475的博客
12-10 2315
总结本人学习b站黑马前端课程，Ajax,ES6面向对象，BOM，DOM，移动端网页特效，PC端特效，jQuery，Vue2快速入门，Vue2后台管理项目等各部分案例汇总。！！！所有代码功能都亲测有效！！！持续更新中。。。
基于Bootstrap的旅游官网页面实例
05-25
Bootstrap是世界上最流行的前端开发框架之一，由Twitter的设计师和开发者创建。它提供了一套完整的响应式布局、移动设备优先的Web开发工具，旨在快速构建美观且功能强大的网站或应用程序。在"基于Bootstrap的旅游...
前端开发案例：bootstrap前端样式经典案例
最新发布
05-28
这个"前端开发案例：bootstrap前端样式经典案例"显然包含了使用Bootstrap构建的一些示例页面和设计模式，旨在帮助开发者更好地理解和应用Bootstrap的特性。 Bootstrap的核心特点包括其易于使用的预定义类、组件和...
BootStrap案例-旅游网首页.zip
08-09
在这个“BootStrap案例-旅游网首页.zip”压缩包中，我们可以深入学习如何利用Bootstrap来创建一个具有轮播图、导航栏以及栅格系统布局的旅游网站首页。 首先，轮播图（Carousel）是Bootstrap的一个核心组件，用于...
Bootstrap前端开发案例一
09-02
Bootstrap是一款由Twitter公司开发并开源的前端框架，它极大地简化了网页前端的开发流程，尤其在响应式设计和移动优先的开发策略上表现卓越。Bootstrap提供了丰富的预定义样式、组件和JavaScript插件，使得开发者...
黑马旅游网初始项目文件
12-22
【标题】"黑马旅游网初始项目文件"是一个与开发旅游网站相关的项目源代码包，它包含了一组用于构建在线旅游服务平台的基础代码。这个项目可能是针对初学者或中级开发者设计的，旨在帮助他们理解和实践Web应用的开发...
HTML+CSS旅游网
05-16
这是一个用Html+css+js+jquery写的一个旅游静态网站，很适合初学者参考，都是一些简单的div布局而成，希望大家能喜欢。
web前端旅游页面div+css实现
12-17
这是一套完整的web前端旅游页面， 一共7个页面， 并且在登录、注册时具有js表单校验， 页面之间实现了跳转。
旅游网站前端后端demo
06-26
简单明了的旅游网站开发前端后端demo,主要包括前台首页展示，新闻动态公告、详情页面各旅游景点描述、游客交流互动等、后台公告管理、用户管理、景点增删改查、用户评论管理等静态页面交互设计，此资源仅供参考！
国外著名旅游景点线路bootstrap模板
04-09
国外著名旅游景点线路bootstrap模板
完整的黑马旅游网已打包版
03-02
黑马旅游网，含静态资源和sql，以及自己完成的后端代码，已打包
基于Java实现前端web的黑马旅游网项目
S_yyuan的博客
04-06 865
基于Java实现前端web的黑马旅游网项目
前端项目实战案例_长沙黑马程序员前端22期项目实战评比会
weixin_39963534的博客
12-06 401
为了检验学员们的学习成效及团队合作能力，11月27日下午，长沙黑马程序员前端22期开展了一次项目实战评比会。俗话说的好：理论是灰色的，生活之树常青。只有将理论付诸于实践才能实现理论自身的价值，也只有将理论付诸于实践才能使理论得以检验。同样，对于我们IT行业来说，我们迈入社会，首先检验我们的就是动手能力的高低，只有通过项目实战才能使我们平时学的理论得以检验，我们只有做到了“打代码千遍万遍也...
黑马程序员_JavaScript案例（一）
晓染霜林的专栏
03-16 1311
------- android培训、java培训、期待与您交流！ ----------       这一段时间学习了JavaScript，使用JavaScript做了几个案例。 1、JS控制网页字体大小 2、JS控制某个部分显示或者隐藏 3、菜单切换效果 4、广告漂浮效果 1、JS控制字体大小，在网页上有一句话，还有两个按钮，一个按钮是变大，一个按钮是变小，当我点击变大按钮时，
黑马旅游网——旅游路线详情展示和旅游路线收藏功能（完结）
qq_40460454的博客
04-10 2821
旅游路线详情展示效果： 将该旅游路线的价格、商家、风景图等等详细信息展示到详情页面上： 这个功能实现起来不难，但是比较墨迹，因为这一个页面中的信息要从三张表中查询：商家信息在seller表，图片在route_img表，其他信息在route表中。 实现思路如下,有了rid后，从三张表中进行查询封装信息到route对象中： servlet代码： /** * 根据id查询一个旅游线路的详细信息 * * @param request * @param response
快速掌握前端框架：Bootstrap入门与应用
"Bootstrap框架是前端开发中常用的工具，尤其对于快速构建响应式和移动优先的网站有着显著的优势。这个框架结合了HTML、CSS和JavaScript，提供了丰富的预定义样式、组件和JavaScript插件，使得开发者能够更高效地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值