Bootstrap实现黑马旅游网

最新推荐文章于 2024-05-23 17:04:13 发布
最新推荐文章于 2024-05-23 17:04:13 发布
阅读量455 收藏 3
点赞数
分类专栏： web 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41870790/article/details/104518813
版权 
<!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 HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .paddtop{
            padding-top: 10px;

        }
        .search-btn{
            float: left;
            border: 1px solid #ffc900;
            width: 90px;
            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;
        }
        .jx{
            border-bottom: 2px solid #ffc900;
            padding: 5px;
        }
        .company{
            height: 40px;
            background-color:#ffc900;
            text-align: center;
            font-size: 12px;

        }
    </style>
</head>
<body>
    <!--1.头部-->
    <header class="container-fluid">
        <div class="row">
            <img src="img/header1.png" class="img-responsive">
        </div>
        <div class="row paddtop">
            <div class="col-md-3">
                <img src="img/header2.png" 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/header3.png" class="img-responsive">
            </div>
        </div>
        <!--导航条-->
        <div class="row">
            <nav class="navbar navbar-default">
                <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="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>


                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>

                        </ul>

                    </div>
                </div>
            </nav>
        </div>
        <!--轮播图-->
        <div class="row">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <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>

                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="img/1.png" alt="...">

                    </div>
                    <div class="item">
                        <img src="img/2.png" alt="...">

                    </div>
                    <div class="item">
                        <img src="img/3.png" alt="...">

                    </div>
                </div>


                <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>
    <!--2.主体部分-->
    <div class="container">
        <div class="row jx">
            <img src="img/body1.png">
            <span>黑马精选</span>
        </div>
        <div class="row paddtop">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/body2.png" alt="">
                    <p>上海飞三亚五天4晚自由行（春节销售+亲自/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <font color="red">￥699</font>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/body2.png" alt="">
                    <p>上海飞三亚五天4晚自由行（春节销售+亲自/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                    <font color="red">￥699</font>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/body2.png" alt="">
                    <p>上海飞三亚五天4晚自由行（春节销售+亲自/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                    <font color="red">￥699</font>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/body2.png" alt="">
                    <p>上海飞三亚五天4晚自由行（春节销售+亲自/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                    <font color="red">￥699</font>
                </div>
            </div>
        </div>
        <div class="row jx">
            <img src="img/body6.png">
            <span>国内游</span>
        </div>
        <div class="row paddtop">
            <div class="col-md-4">
                <img src="img/q3.png">
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="img/body2.png" alt="">
                            <p>上海飞三亚五天4晚自由行（春节销售+亲自/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                            <font color="red">￥699</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="img/body2.png" alt="">
                            <p>上海飞三亚五天4晚自由行（春节销售+亲自/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                            <font color="red">￥699</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="img/body2.png" alt="">
                            <p>上海飞三亚五天4晚自由行（春节销售+亲自/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                            <font color="red">￥699</font>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="img/body2.png" alt="">
                            <p>上海飞三亚五天4晚自由行（春节销售+亲自/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                            <font color="red">￥699</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="img/body2.png" alt="">
                            <p>上海飞三亚五天4晚自由行（春节销售+亲自/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                            <font color="red">￥699</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="img/body2.png" alt="">
                            <p>上海飞三亚五天4晚自由行（春节销售+亲自/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                            <font color="red">￥699</font>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--3.页脚-->
    <footer class="container-fluid">
        <div class="row">
            <img src="img/footer1.png" class="img-responsive">
        </div>
        <div class="row company paddtop">
            江苏传智播客教育科技有限公司 版权所有Copyright 2006-2018,All Rights Reserved 苏ICP备16007882
        </div>
    </footer>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

落落落Luo
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
黑马旅游网初始项目文件
12-22
【标题】"黑马旅游网初始项目文件"是一个与开发旅游网站相关的项目源代码包，它包含了一组用于构建在线旅游服务平台的基础代码。这个项目可能是针对初学者或中级开发者设计的，旨在帮助他们理解和实践Web应用的开发...
web前端期末大作业——基于html+css+javascript+jquery+bootstrap响应式户外旅游网站
qq_38512792的博客
05-14 230
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
Bootstrap开发旅游网站
liuzuoping的博客
04-01 2050
Bootstrap开发旅游网站 Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js...
毕业设计项目 基于Java web（SSM）的旅游网站设计与实现
最新发布
iuidfds的博客
05-23 294
7）复杂的业务在于一个景点对应多个门票，想要门票显示在对应的景点下方，要先查询出来景点，再对它遍历，根据id去 寻找门票，当时没有对应所有的景点都设置门票，报了空指针异常。本系统是一个地方性旅游网站，后台基于SSM框架，前台使用BootStrap、js、jsp实现，数据库试用mysql；2）注册时候会对密码进行MD5加密；1）注册成功会发送邮件，封装了邮件的工具类；4）上传图片到项目也是封装好了工具类；3）分页使用的是jsp自定义标签；5）在线支付调用易宝的支付接口；**项目分享: **
【Java 进阶篇】手把手教你创建 Bootstrap 旅游网站
繁依Fanyi的博客
10-22 556
上述示例提供了创建旅游网站的基本结构。现在，让我们进行一些自定义，以使您的网站更加吸引人。Bootstrap 提供了许多默认样式，但您可以轻松地自定义它们以适应您的品牌和设计需求。您可以通过编写自定义 CSS 来修改颜色、字体、边距等样式。以下是一个示例：< style > /* 修改导航栏背景颜色和文字颜色 */ .navbar {} /* 修改轮播图高度和文字样式 */ .carousel {} /* 修改按钮样式 */ .btn-primary {
使用Bootstrap制作简单的旅游网站页面（非功能型）
weixin_43305674的博客
10-16 3239
首先进入BootStrap网站页面下下载Bootstrap文件，如下图所示 然后解压压缩包，并将相应的包复制到当前你所建项目的源文件下，如下图所示： 解压后的文档如下图： 将上述的包导入到项目源文件下： 然后依据Bootstrap在线文档教程，创建简单的旅游html网页，具体：代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> ...
BootStrap框架-旅游网页设计
qq_33755492的博客
06-24 1495
使用BootStrap框架，设计一个旅游页面 其中，使用Carousel轮播图等JavaScript插件，以及导航条等组件完成 <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
JavaWeb黑马旅游网-学习笔记08【旅游线路详情】
upward
03-02 1094
JavaWeb黑马旅游网-学习笔记08【旅游线路详情】
黑马旅游网-代码及其数据库
06-25
【标题】：“黑马旅游网-代码及其数据库”指的是一个基于JavaWeb技术开发的在线旅游服务平台的源代码和配套数据库文件。这个项目旨在帮助开发者学习和理解JavaWeb开发的基础知识，同时提供了一个实际应用的场景。 ...
黑马旅游网heimaTravel.zip
04-06
JavaScript：用于在网页上实现交互性和动态效果的脚本语言。 React：一个流行的JavaScript库，用于构建用户界面。 Angular：一个用于构建Web应用的前端框架。 Vue.js：一个渐进式JavaScript框架，用于构建交互式界面...
黑马旅游网项目travel.zip
04-06
JavaScript：用于在网页上实现交互性和动态效果的脚本语言。 React：一个流行的JavaScript库，用于构建用户界面。 Angular：一个用于构建Web应用的前端框架。 Vue.js：一个渐进式JavaScript框架，用于构建交互式界面...
bootstrap仿旅游网站+登录首页
09-17
bootstrap响应式仿旅游网站+登录首页 bootstrap响应式仿旅游网站+登录首页 bootstrap响应式仿旅游网站+登录首页
bootstrap响应式旅游网站
09-15
bootstrap响应式旅游网站
travel:黑马旅游网
05-26
【标题】"旅行网站开发：黑马旅游网" 在IT行业中，黑马旅游网是一个典型的Java Web项目示例，它展示了如何使用Java技术栈构建一个功能完善的在线旅游服务平台。这个项目通常涵盖了许多重要的技术和实践，包括但不...
JavaWeb - 黑马旅游网（番外2）：用户收藏分页展示
xing123456jl的博客
10-21 1825
黑马旅游网（番外2）：用户收藏界面展示1 功能描述2 功能分析2.1 业务逻辑2.2 实现细节2.2.1 用户身份获取2.2.2 特殊情况处理2.2.3 代码编写位置3 代码实现3.1 后端3.1.1 Servlet3.1.2 Service3.1.3 Dao3.2 前端4 相关链接 笔者在之前的一系列博客中将黑马旅游网系列公开视频课程中涉及到的功能进行了分析和实现，详细内容可前往《黑马旅游网》系列博客及笔者源码传送门 进一步了解和阅读。 1 功能描述 接上篇黑马旅游网（番外1）：“自动登录”，本篇博客介绍
黑马旅游网编写练习(10)--用户收藏线路的展示功能
暮光乐鱼的博客
10-26 2685
黑马旅游网编写练习(10)–用户收藏线路的展示功能 分析 当用户点击我的收藏按钮时，需要将用户所收藏的所有线路进行展示；并且点击响应的线路，就会跳转到该线路对应的详情页面。 旅游线路的分页展示功能之前已经进行了实现，此处只需要仿照该方法，将查询的表格修改为tab_favorite即可； 跳转到路线详情页面之前也进行过实现，此处也只需要仿照该处传递相应的参数即可。 首先完成’我的收藏’按钮的跳转功能...
8-黑马旅游网-点击按钮收藏
拉格朗日的学习笔记
04-13 783
点击按钮收藏 前台代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>路线详情</title> <link rel="stylesheet" type="text/css" href="css/boo...
JavaWeb - 黑马旅游网（8）：旅游线路收藏
xing123456jl的博客
10-20 1392
黑马旅游网（8）：旅游线路收藏1 功能描述2 功能分析2.1 线路收藏判定2.2 旅游线路收藏2.3 页面样式更新3 代码实现：是否收藏3.1 后端3.1.1 Servlet3.1.2 Service3.1.3 Dao3.2 前端4 代码实现：收藏线路4.1 后端4.1.1 Servlet4.1.2 Service4.1.3 Dao4.2 前端5 相关链接 1 功能描述 接上篇黑马旅游网（7）：线路搜索分页展示，本篇博客对旅游线路收藏功能进行分析和实现。线路详情页面中带有 点击收藏 按钮，提示用户可以将喜欢
JavaWeb - 黑马旅游网（番外3）：取消收藏
xing123456jl的博客
10-21 1043
黑马旅游网（番外3）：取消收藏1 功能描述2 功能分析2.1 前端2.2 后端3 代码实现3.1 后端3.1.1 Servlet3.1.2 Service3.1.3 Dao3.2 前端4 相关链接 1 功能描述 接上篇黑马旅游网（番外2）：用户收藏分页展示，在本篇博客中，我将实现另一个与收藏相关的功能：取消收藏。 原始的旅游详情页面只有一个 点击收藏 的按钮。在我的实现方式中：在 点击收藏 旁边添加了一个 取消收藏 的按钮，两个按钮的样式相反。当用户没有登录或登录后没有收藏此线路，则 点击收藏 为红色且可点
bootstrap实现分页列表
05-10
Bootstrap 实现分页列表的方式是通过 `pagination` 组件。下面是实现分页列表的步骤： 1. 在 HTML 中添加 `ul` 标签，并添加 `pagination` 和 `page-item` 类。 ```html <li class="page-item"><a class="page-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值