Bootstrap概述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
bootstrap来自于Twitter ,前端框架
作用：复制粘贴
响应式页面：适应不同的分辨率显示不同样式提高用户体验
bootstrap官方网站https://v3.bootcss.com
用于生产环境的Bootstrap
bootstrap源码
Bootstrap 是移动设备优先的
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签
Bootstrap全局CSS样式
栅格样式
表格样式
组件
字体图标
下拉菜单
导航条
JAVAScript插件
Carousel轮播图
-->
<!-- 最新版本的 Bootstrap 核心 CSS 文件
<link rel="stylesheet" href="css/bootstrap.css" />
需要引入JQuery 因为Bootstrap依赖于Jqury
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
最新的 Bootstrap 核心 JavaScript 文件
<script type="text/javascript" src="js/bootstrap.js" ></script>-->
<!--最新版本的 Bootstrap 核心 CSS 文件-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--可选的 Bootstrap 主题文件（一般不用引入）-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!--最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 1px solid red;
}
</style>
</head>
<body>
<!-- <div class="container">
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
container 类用于固定宽度并支持响应式布局的容器
</div>
<div class="container-fluid">
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
</div>-->
<!--
栅格系统将页面横向平均分成12部分
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
col-md-1表示在桌面(≥992px)显示占一格，col-sm-2表示在平板(≥768px)大小界面显示占两格，col-xs-适配手机(<768px)，col-lg-适配大屏幕(≥1200px)
详见 Bootstrap中文档
-->
<!-- <div class="container">
<div class="row">
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>-->
<div class="container">
<!--为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式
导航和导航条组件只支持 <button> 元素
（默认样式）btn-Default
（首选项）btn-Primary
（成功）btn-Success
（一般信息）btn-Info
（警告）btn-Warning
（危险）btn-Danger
（链接）btn-Link
<a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性
尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果
Firefox <30 版本的浏览器上出现的一个 bug，其表现是：阻止我们为基于 <input> 元素所创建的按钮设置 line-height 属性
-->
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<!--HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。-->
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<div class="row">
<div class="col-md-12">
栅格系统
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
表格样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<!--为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
-->
</head>
<body>
<table class="table table-hover">
<tr>
<td>项目</td>
<td>分类名称</td>
<td>分类项目</td>
<td>分类描述</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------
导航条和轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--最新版本的 Bootstrap 核心 CSS 文件-->
<link rel="stylesheet" href="css/bootstrap.css" />
<!--需要引入JQuery 因为Bootstrap依赖于Jqury-->
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<!--最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<!--
务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。
-->
<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 class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--
-->
<div class="container">
<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" style="height: 600px;">
<div class="item active" >
<img src="img/tp1.jpg" alt="...">
<div class="carousel-caption">
<h3>creative women!</h3>
</div>
</div>
<div class="item">
<img src="img/tp2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/tp3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</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 class="row">
<div class="col-md-4">
<h3>公司愿景</h3>
<p>这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">了解更多</a>
</div>
<div class="col-md-4">
<h3>公司愿景</h3>
<p>这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">了解更多</a>
</div>
<div class="col-md-4">
<h3>公司愿景</h3>
<p>这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">了解更多</a>
</div>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
响应式网站首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--最新版本的 Bootstrap 核心 CSS 文件-->
<link rel="stylesheet" href="css/bootstrap.css" />
<!--需要引入JQuery 因为Bootstrap依赖于Jqury-->
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<!--最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
响应式网站首页
引入Bootstrap相关头文件
1.div布局容器class="conyainer"
2.放8行row
-->
</head>
<body>
<!--最外层的布局容器-->
<div class="container">
<!--第一行-->
<div class="row">
<!--标题栏分为三格-->
<div class="col-md-4 col-sm-6 col-xs-6">
<img src="img/logo/jpg" />
</div>
<div class="col-md-4 hidden-sm hidden-xs">
<!--hidden-sm、在平板状态显示下隐藏-->
<img src="img/logo/jpg" />
</div>
<div class="col-md-4 col-sm-6 col-xs-6" style="line-height: 50px;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--第二行导航栏部分-->
<nav class="navbar navbar-inverse">
<!--navbar-inverse背景为黑色-->
<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 class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">全部分类 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">手机数码</a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">鞋靴箱包</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">美妆护肤</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">其他分类</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!--<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--第三行轮播图（js插件）-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
<!--data-interval="2000"将默认的5秒轮播改成2秒-->
<!-- 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/tp1.jpg" alt="...">
<div class="carousel-caption">
<h3>creative women!</h3>
</div>
</div>
<div class="item">
<img src="img/tp2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/tp3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</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 class="row">
<div class="col-md-4">
<h3>公司愿景</h3>
<p>这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">了解更多</a>
</div>
<div class="col-md-4">
<h3>公司愿景</h3>
<p>这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">了解更多</a>
</div>
<div class="col-md-4">
<h3>公司愿景</h3>
<p>这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼这个公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">了解更多</a>
</div>
</div>
<!--第四行最新商品-->
<div class="row">
<div class="col-md-12">
<h3>最新商品<img src="img/title.jpg" /></h3>
</div>
</div>
<!--第五行商品部份-->
<div class="row">
<!--左边大图部分-->
<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
<img src="img/goods.jpg" />
</div>
<!--右边商品部分-->
<div class="col-md-10">
<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
<img src="img/goods.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
</div>
</div>
<!--第六行logo广告部分-->
<div class="row">
<div class="col-md-12">
<img src="img/logo.jpg" width="100%" />
</div>
</div>
<!--第七行最新商品部分-->
<div class="row">
<div class="col-md-12">
<h3>最新商品<img src="img/title.jpg" /></h3>
</div>
</div>
<!--第八行商品部份-->
<div class="row">
<!--左边大图部分-->
<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
<img src="img/goods.jpg" />
</div>
<!--右边商品部分-->
<div class="col-md-10">
<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
<img src="img/goods.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波炉</p>
<p style="color: red;">￥998</p>
</div>
</div>
</div>
<!--第九行footer图片-->
<div class="row">
<div class="col-md-12">
<img src="img/footer.jpg" width="100%" />
</div>
</div>
<!--第十行尾部链接-->
<div style="text-align: center;">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br> Copyright © 2005-2016 CZ商城 版权所有
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
总结
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>总结</title>
</head>
<body>
JQ方式校验表单（要求）
json：
json对象{}
json数组[{},{}]
$.get(url,functin(data{})) （了解）
bootstrap:是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
全局CSS样式：css样式
栅格系统
将屏幕划分成12个格子、12列
class='row'当前是行
行里面放的是列col-屏幕分辨率-数字（每一种分辨率数后的数字综合必须是等于12，如果超过12灵气一行）
col-lg-数字 超宽屏幕
col-md-数字 中等屏幕
col-sm-数字 平板电脑
col-xs-数字 手机
组件：导航条、进度、字体
javascript插件：轮播图
复制粘贴
响应式：会根据不同的分辨率显示不同的页面结构提高用户体验
HTML：超文本标记语言：设计网页，决定了网页的结构
CSS：层叠样式表，主要用来梅花页面，将梅花和HTML代码进行分离一高代码的复用性
javascript：脚本语言，由浏览器执行，所类型语言（var i），提供用户交互
Jquery：javascript函数库，进一步的封装
选择器
ID选择器
类选择器
元素选择器
通配符选择器
选择器分组
层级选择器
后代选择器
子元素选择器
相邻兄弟选择器
兄弟选择器
属性选择器
选择器[属性名称=[属性名称='属性值']
表单选择器
:input
:text
:password
body>div>div.nth-child(7)>div.nth-child(3)>div.nth-child(8)
基本的过滤器：
:first
:last
:even
:odd
:gt
:lt
:eq
表单对象属性
:selected
:checked
</body>
</html>