【BootStrap笔记】BootStrap+css写旅游网页面

页面效果：

知识点总结：

Bootstrap：

class= "container-fluid"：表示块元素width%100

<div class="row"></div>：Bootstrap 中，“row”类主要用于保存其中的列。Bootstrap 将每一行划分为 12 个虚拟列

class="img-responsive":响应式图片

class="col-xx-x"：设置块元素占的列数（根据设备大小）

class="thumbnail"：为图片添加边框

html

<img src="">:图片标签

<div></div>自定义块元素

<p></p> 定义段落。

<span></span> 用于对文档中的行内元素进行组合

<input>：输入框

<button>:按钮

placeholder:输入框默认属性

css

padding:内边距控件中内容距离控件的边缘的距离。

margin:外边距指的是当前控件和父控件的边距。

left/right/top/bottom：位置

border:边框

height：高度

width：宽度

text-align：center:左右居中

line-height：（height)上下居中

class~.className{}:类选择器

background-color:rgba(0,0,0,0~0.1)带透明度的背景颜色

第一部分：

        <!-- 页眉部分 --><header class="container-fluid"><!--最上面的相应式图片 --><div class="row"><img src="../素材图片/images/top_banner.jpg" class="img-responsive"></div><!-- paddingtop设置边距 --><div class="row paddingtop"><!-- logo --><div class="col-md-3"><img src="../素材图片/images/logo.jpg"></div><!-- 搜索框 --><div class="col-md-5"><input class="search_input" placeholder="请输入线路名称"><a class="search_btn" href="#">搜索</a></div><!-- 图 --><div><img src="../素材图片/images/hot_tel.jpg"  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="#">Brand</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="#">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></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="../素材图片/images/banner_1.jpg" alt="..." class="img-responsive"></div><div class="item"><img src="../素材图片/images/banner_2.jpg" alt="..." class="img-responsive"></div><div class="item"><img src="../素材图片/images/banner_3.jpg" alt="..." class="img-responsive"></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>

第二部分：

 <div class="container"><div class="row jx" ><img src="../素材图片/images/icon_5.jpg" ><span ><strong>黑马精选</strong></span></div><div class="row"><div class="col-md-3 "><div class="thumbnail"><img src="../素材图片/images/jiangxuan_1.jpg"><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><span>￥699</span></div></div><div class="col-md-3"><div class="thumbnail"><img src="../素材图片/images/jiangxuan_1.jpg"><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><span>￥699</span></div></div><div class="col-md-3"><div class="thumbnail"><img src="../素材图片/images/jiangxuan_1.jpg"><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><span>￥699</span></div></div><div class="col-md-3"><div class="thumbnail"><img src="../素材图片/images/jiangxuan_1.jpg"><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><span>￥699</span></div></div></div><div class="row jx"><img src="../素材图片/images/icon_6.jpg"><strong>国内游</strong>     </div><div class="row"><div class="col-md-4 paddingtop"><img src="../素材图片/images/guonei_1.jpg"></div><div class="col-md-8"><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="../素材图片/images/jiangxuan_1.jpg"><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><span>￥699</span></div></div><div class="col-md-4"><div class="thumbnail"><img src="../素材图片/images/jiangxuan_1.jpg"><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><span>￥699</span></div></div></div><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="../素材图片/images/jiangxuan_1.jpg"><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><span>￥699</span></div></div><div class="col-md-4"><div class="thumbnail"><img src="../素材图片/images/jiangxuan_1.jpg"><p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><span>￥699</span></div></div></div></div></div>

第三部分：

图片+div（文字）

<div class="container-fluid"><div class="row"><img src="../素材图片/images/footer_service.png" class="img-responsive"></div><div class="row"><div class="footer">传智播客教育科技股份有限公司  版权所有Copyright 2006-2022, All Rights Reserved   苏ICP备16007882号-1  营业执照 增值电信业务经营许可证 出版物经营许可证</div></div></div>

css代码：

   <style>div[class*="paddingtop"]{padding: 20px;}.search_input{float: left;border: 2px solid yellow;width: 300px;/* 左边距，使左面字不紧贴着输入框 */padding-left: 10px;height: 35px;}.search_btn{border: 2px solid yellow;float: left;padding: 10px;height: 35px;width: 100px;text-align: center;line-height: 10px;background-color: rgba(165, 226, 23, 0.5);}div[class*="jx"]{border-bottom:2px solid yellow ;padding: 5px;}.thumbnail{margin: 20px;padding: 20px;}.footer{background-color: rgba(184, 167, 16, 0.5);height: 50px;text-align: center;font-size: small;line-height: 50px;}</style>

【BootStrap笔记】BootStrap+css写旅游网页面相关推荐

学习笔记——web网页庐山旅游网
学习笔记--web网页庐山旅游网这学期学习了web技术,简单学习了H5+CSS+JS的知识. 这是一个简单的前端,采用html.一共五个页面. 首页index.html <!DOCTYPE h ...
Bootstrap案例：简易旅游网页面
效果图: 代码: 下载Bootstrap 在项目中将这三个文件夹复制创建html页面,引入必要的资源文件 <!DOCTYPE html> <html lang="zh-C ...
Bootstrap快速入门（含旅游网案例）
Bootstrap快速入门 Bootstrap 更深入学习,进入Bootstrap中文网文档文档地址很多案例,现学现用 Bootstrap: 概念: 一个前端开发的框架,Bootstrap,来自 T ...
使用HTML+CSS写一个静态页面
背景: 刚开始学习前端,在仅使用HTML和CSS的情况下,也可以写出一个页面,使用HTML对页面的内容进行架构,再此基础上使用CSS对内容进行美化.其中涉及了许多HTML和CSS的知识点,定位浮动 ...
BootStrap笔记-BootStrap的安装与使用
下载BootStrap,如4.4.1 如下代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
用html和css写一个聚划算页面
你可以使用HTML和CSS来编写一个聚划算页面.首先,你可以使用HTML来创建页面的结构,比如标题.导航栏和其他元素.然后,你可以使用CSS来定义页面的布局和外观,比如字体.颜色和背景.最后,你可以添 ...
黑马旅游网完整代码_JavaWeb+黑马旅游网
JavaWeb+黑马旅游网 |____资料 |____16.黑马旅游网 |____15.Maven基础 |____14.Redis |____13.Ajax和JSON |____12.Jquery | ...
黑马旅游网完整代码_JavaWeb黑马旅游网视频下载
课程目录: JavaWeb+黑马旅游网 |____资料 |____16.黑马旅游网 |____15.Maven基础 |____14.Redis |____13.Ajax和JSON |____12.Jq ...
java旅游网项目_基于jsp的旅游网-JavaEE实现旅游网 - java项目源码
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的旅游网, 该项目可用各类java课程设计大作业中, 旅游网的系统架构分为前后台两部分, 最终实现在线上进行旅游网各 ...

【BootStrap笔记】BootStrap+css写旅游网页面

知识点总结：

【BootStrap笔记】BootStrap+css写旅游网页面相关推荐

最新文章

热门文章