利用BootStrap编写一个简单的旅游网页

我决定了每周写一篇博客，分享自己所学的知识，这周是个简单的旅游网页制作。
这是效果图：

编写这个旅游网页利用BootStrap框架可以分为头部，正文，底部 3个部分。再在每个部分一一实现相应的功能。
1、头部主要要实现两个功能：搜索框和导航条。导航条利用BootStrap组件实现。
2、正文部分：’BootStrap栅格系统实现。
3、底部：添加张图片即可（我这里做得很简单哈）。
源码链接在底部：想要的话自行下载！

利用BootStrap组件的前提是需要先导入BootStrap的js插件，去BootStrap官网可下载。
下面直接放源码：
index.html

<!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"><title>小葵花旅游网</title><!--导入bootstrap框架--><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/index.css" rel="stylesheet"><script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script>
</head>
<body>
<header class="container-fluid"><!--第一行--><div class="row"><img src="img/top_banner.jpg" class="img-responsive"></div><!--第二行--><div class="row padd-top"><div class="col-md-12 padd-top search"><input class="search_input" type="text" placeholder="请输入线路名称"><a class="search_button" href="#">搜索</a></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"><span class="glyphicon glyphicon-th-list" style="color: white"></span></button></div><!-- 下拉菜单，表单等--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><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><li><a href="#">攻略</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></div><!--第四行：轮播图--><div class="row"><div id="carousel-example-generic" data-interval="2000" 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是一张图片--><div class="item active"><img src="img/banner_1.jpg"><div class="carousel-caption">墨西哥</div></div><div class="item"><img src="img/banner_2.jpg" alt="..."><div class="carousel-caption">土耳其</div></div><div class="item"><img src="img/banner_3.jpg" alt="..."><div class="carousel-caption">北海道</div></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>
<div class="container"><!--今日推荐--><div class="row"><div class="jx_top"><img src="img/icon_5.jpg">今日推荐</div></div><div class="row"><div class="col-md-3"><div class="thumbnail"><img src="img/jingxuan_1.jpg" alt="..."><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">&yen;888</span></div></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jingxuan_2.jpg" alt="..."><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">&yen;888</span></div></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jingxuan_3.jpg" alt="..."><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">&yen;888</span></div></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jingxuan_4.jpg" alt="..."><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">&yen;888</span></div></div></div></div><div class="row"><div class="jx_top"><img src="img/icon_6.jpg">国内游</div></div><div class="row"><div class="col-md-4"><img src="img/guonei_1.jpg" class="img-responsive"><img src="img/guonei_2.jpg" class="img-responsive"></div><div class="col-md-8"><div class="col-md-4"><div class="thumbnail"><img src="img/jingxuan_1.jpg" alt="..."><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">&yen;888</span></div></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jingxuan_2.jpg" alt="..."><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">&yen;888</span></div></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jingxuan_3.jpg" alt="..."><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">&yen;888</span></div></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jingxuan_4.jpg" alt="..."><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">&yen;888</span></div></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jingxuan_5.jpg" alt="..."><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">&yen;888</span></div></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jingxuan_6.jpg" alt="..."><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">&yen;888</span></div></div></div></div></div>
</div>
<footer class="container-fluid"><div class="row"><img src="img/footer_service.png" class="img-responsive"></div>
</footer>
</body>
</html>

index.css

* {padding: 0px;margin: 0px;
}a:link {color: black;text-decoration: none;
}a:hover {color: orange;text-decoration: none;
}.padd-top {padding-top: 10px;
}.search_input {/* 宽400，高36，左浮动，边框2，颜色#ffc900，左内边距10，外轮廓outline设置为0*/width: 400px;height: 36px;float: left;border: 2px solid #ffc900;padding-left: 10px;outline: 0px;
}.search_button {/*点击按钮，是一个链接：左浮动，宽90，高36，背景色#ffc900，行高36，文本居中*/float: left;width: 90px;height: 36px;background-color: #ffc900;text-align: center;line-height: 36px;
}.jx_top {/*外上边距15px, 底部边框2px 实线 #ffc900做为下面的线，宽度100%，高度35px，行高35px，外下边距5px。图标文件：icon_5.jpg*/margin-top: 15px;border-bottom: 2px solid #ffc900;width: 100%;height: 35px;line-height: 35px;margin-bottom: 5px;
}.company {/*字体大小12，背景色#ffc900，文字居中对齐，高度与行高为40px*/font-size: 12px;background-color: #ffc900;text-align: center;height: 40px;line-height: 40px;
}
.search{margin-left:500px;margin-top:20px;margin-bottom:20px;
}

总结：制作中的巧妙之处有：1、用BootStrap的组件很快的实现轮播效果和导航栏。
2、用container容器很好的解决了图片布局问题。因为网页中中间部分的布局是一张大图片加三张小图片，而row属性一行有12列，怎么能更好的划分这四张图片呢？，这里就聪明的把大图片占四列，其他三张占8列，再在这8列的基础上每张图片占四列，就把这问题OK掉了。
这是源码哈：https://download.csdn.net/download/weixin_42490117/11505119

用BootStrap框架编写旅游网页相关推荐

使用bootstrap框架快速开发网页
使用bootstrap框架快速开发网页本次使用bootstrap5+框架进行对网页进行快速开发,本文不涉及JavaScript内容,只涉及网页的搭建,即html和css的使用,如果有疑惑可以参考以下 ...
Bootstrap 框架响应式网页开发
Bootstrap Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定 HTML 结构及JavaScript,快速编写功能 ...
JavaScript—使用bootstrap框架做一个网页
这是通过黑马程序员的教程进行学习的.以下是做一个网页的流程. 目录第一步分析:分析网页--将网页分成若干部分第二步实现: 1-头部 2-导航条 3-注册页面 4-网站底部1 5-网站底部2 6- ...
仿csdn写的页面（bootstrap框架）
博客仿写这是一个用bootstrap设计布局的网页,参照了csdn的布局设计,不完全按照csdn的样式.将代码放置博客是因为个人没有存代码的习惯,写的东西比较简单不值得保存,但又觉得弃之可惜(毕竟东 ...
BootStrap框架-旅游网页设计
使用BootStrap框架,设计一个旅游页面其中,使用Carousel轮播图等JavaScript插件,以及导航条等组件完成 <!doctype html> <html lang= ...
bootstrap 导航菜单折叠位置_教大家如何编写一个网页导航条
导航条简单地说就是对你整个网站模块的简单介绍,你可以直接点击导航条某一个按钮或板块便可进入其相应的界面,如:网页.新闻.贴吧等 .在企业网站上,导航条上常见的有:产品介绍,公司简介,最新产品,联系我们 ...
初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap
自己也刚刚开始接触框架,在学习了bootstrap框架过后,练习写了一个简单的主界面,主界面的图如下: 这个页面主要用的bootstrap的栅格系统进行整体布局,网页效果简约大方,最重要的是比较简单吧 ...
用bootstrap框架制作网页
课程设计要做一个html网页,自己做的css样式实在是不堪入目,所以用了bootstrap框架,现总结如下: (1):下载bootstrap: 点击下载后: 下载解压后得到如下文件: (2):将这个文 ...
【Web】Bootstrap框架实现简单旅游网站页面
这里主要是为了熟悉以下Bootstrap框架的简单使用,采用了响应式布局. 代码如下: <!DOCTYPE html> <html lang="zh-CN"> ...

用BootStrap框架编写旅游网页

利用BootStrap编写一个简单的旅游网页

用BootStrap框架编写旅游网页相关推荐

最新文章

热门文章