BootSerap

最新推荐文章于 2019-08-13 15:40:53 发布

A2307812087

最新推荐文章于 2019-08-13 15:40:53 发布

阅读量242

点赞数

本文链接：https://blog.csdn.net/A2307812087/article/details/84146031

版权

BootSerap：

1.表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../css/style.css" />
		<title></title>
		<!--
			1. 首先给必填项,添加尾部添加一个小红点
			2. 获取用户输入的信息,做相应的校验
			3. 事件: 获得焦点, 失去焦点, 按键抬起
			4. 表单提交的事件
			
			Jq的方式来实现:
				1. 导入JQ的文件
				2. 文档加载事件: 在必填项后天加一个小红点
				3. 表单校验确定事件: blur focus keyup
				4. 提交表单 submit
		-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			
			$(function(){  //默认做一些页面初始化
				//动态在必填项后面添加小红点
				$(".bitian").after("<font class='high'>*</font>");
				
				//给必填项绑定事件
				$(".bitian").blur(function(){
					//首先获取用户当前输入的值
					var value = this.value; //123
					//清空上一次提示的信息
					$(this).parent().find(".formtips").remove();
					
					//判断当前的值是哪一项输入的值
					if($(this).is("#username")){  //判断是否是用户名输入项
						if(value.length < 6){
							$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
						}
					}
					
					if($(this).is("#password")){  //判断是否是密码输入项
						if(value.length < 6){
							$(this).parent().append("<span class='formtips onError'>,密码太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
						}
					}
				}).focus(function(){
					$(this).triggerHandler("blur");
				}).keyup(function(){
					$(this).triggerHandler("blur");
				})
				
				
				
				//给表单提交绑定事件
				$("form").submit(function(){
					//触发所有必填项的校验
					$(".bitian").trigger("focus");
					//找到错误信息的个数
					if($(".onError").length > 0){
						return false;
					}
					return true;
				});
			});
			
			
			
			
			
			
			
		/*	
			$(function(){
				// 在所有必填项后天加一个小红点 *
				$(".bitian").after("<font class='high'>*</font>");
				
				//事件绑定
				$(".bitian").blur(function(){
//					var value = this.value;
					var value = $(this).val();
					//清空当前必填项后面的span 
//					$(".formtips").remove();
					$(this).parent().find(".formtips").remove();
					//获得当前事件是谁的
					if($(this).is("#username")){
						//校验用户名
						if(value.length < 6){
							$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
						}
					}
					
					if($(this).is("#password")){
						//校验密码
						if(value.length < 3){
							$(this).parent().append("<span class='formtips onError'>密码太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
						}
					}
				}).focus(function(){
					$(this).triggerHandler("blur");
				}).keyup(function(){
					$(this).triggerHandler("blur");
				});
				
//				$(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})

				//给表单绑定提交事件
				$("form").submit(function(){
					//触发必填项的校验逻辑
					$(".bitian").trigger("focus");
					
					var length = $(".onError").length
					if(length > 0){
						return false;
					}
					return true;
				});
			});*/
			
		</script>
	</head>
	<body>
		<form action="../index.html">
			<div>
				用户名:<input type="text" class="bitian" id="username" />
			</div>
			<div>
				密码:<input type="password"  class="bitian" id="password" />
			</div>
			<div>
				手机号:<input type="tel" />
			</div>
			<div>
				<input type="submit" />
			</div>
		</form>
	</body>
</html>

JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

2.程序猿老黄历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		</style>
		<link rel="stylesheet" href="../css/laohuangli.css" />

		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<!--
			编程开发的过程遇到问题
				达不到预期效果
				1.检查自己代码
				2.使用断点调试工具 javascript
				3.百度 or 问同学 or 问同事
				4.问老师
				5.老师问总监
		-->
		<script>
			$(function(){
				//涉及到请求链接, 动态显示数据
				
				var url = "http://127.0.0.1:8020/day05-bootStrap/data.json";
				//ajax  最简单异步请求网络
				$.get(url,function(jsonArr){
//					console.log(jsonArr);
//					var obj = jsonArr[4];  // JSONObject
					var goodCount = Math.floor(Math.random()*3+3) //
					
					console.log("test");
//					var i = 1/0;
					
					while(goodCount > 0){  //取几条数据
						//随机去取一条数据
						var index = Math.floor(Math.random()*jsonArr.length)
						var obj = jsonArr[index];
						//向适合干啥
						$(".good ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.good+"</div></li>")
						goodCount--;
					}
					var badCount = Math.floor(Math.random()*3+2) //
					//不适合干啥
					while(badCount > 0){
						var index = Math.floor(Math.random()*jsonArr.length)
						var obj = jsonArr[index];
						$(".bad ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.bad+"</div></li>")
						badCount--;
					}
					
					
				},"json");
				
				
				
			});
		</script>
	</head>
	<body>
		<div class="container">
			<div class="title">
				程序员老黄历
			</div>
			<div class="good">
				<div class="title">
					<table>
						<tr><td>宜</td></tr>
					</table>
				</div>
				<div class="content">
					<ul>
						
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			
			<div class="split"></div>
			
			<div class="bad">
				<div class="title">
					<table>
						<tr><td>不宜</td></tr>
					</table>
				</div>
				<div class="content">
					<ul>
						
					</ul>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</body>
</html>

BootSerap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

1.BootSerap作用

复制粘贴，能够提高开发人员的工作效率

2.什么是响应式页面

适应不同的分辨率显示不同样式，提高用户的体验。

3.bootstrap

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="../css/bootstrap.css" />

		<!--需要引入JQuery-->
		<!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script type="text/javascript" src="../js/bootstrap.js"></script>

		<meta name="viewport" content="width=device-width, initial-scale=1">
		
	</head>

	<body>
		<div class="container">
			<a href="#" class="btn btn-warning">百合网</a>
			<a href="#">世纪佳缘</a>
			
			<div class="row">
			
				<div class="col-md-8 col-sm-8">
					123
				</div>
				<div class="col-md-5 col-sm-5">
					456
				</div>
				
			</div>
		</div>
		
		
		<!--<div class="container">
			<div class="row">
				<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
				<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
				<div class="col-md-1 col-sm-2 col-xs-4">.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-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.col-md-1</div>
				<div class="col-md-1">.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>-->
	</body>

</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
		<link rel="stylesheet" href="../css/bootstrap.css" />
	</head>
	<body >
		<table class="table">
			<tr >
				<td>
					<input type="checkbox" />
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>成人用品</td>
				<td>充气的</td>
				<td>这里面的充气电动硅胶的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
		</table>
	</body>
</html>

4.导航条

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="../css/bootstrap.css" />

		<!--需要引入JQuery-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script type="text/javascript" src="../js/bootstrap.js"></script>

		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>

	<body>
		<div class="container">

			<nav class="navbar 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">
				        <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-expanded="false">全部分类 <span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li>
										<a href="#">手机数码</a>
									</li>
									<li>
										<a href="#">电脑办公</a>
									</li>
									<li>
										<a href="#">鞋靴箱包</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">香烟酒水</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">其它分类</a>
									</li>
								</ul>
							</li>
						</ul>
						<form class="navbar-form navbar-right" role="search">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Search">
							</div>
							<button type="submit" class="btn btn-default">Submit</button>
						</form>

					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container-fluid -->
			</nav>

			<div>
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="500">
					<!-- 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/1.jpg" alt="...">
							<div class="carousel-caption">
								<h3>电脑大促销</h3>
								<p>黑马出品电脑黑马出品电脑黑马出品电脑</p>
							</div>
						</div>
						<div class="item">
							<img src="../img/2.jpg" alt="...">
							<div class="carousel-caption">
								<h3>电脑大促销</h3>
								<p>黑马出品电脑黑马出品电脑黑马出品电脑</p>
							</div>
						</div>
						<div class="item">
							<img src="../img/3.jpg" alt="...">
							<div class="carousel-caption">
								<h3>电脑大促销</h3>
								<p>黑马出品电脑黑马出品电脑黑马出品电脑</p>
							</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>
			
			
			<div class="row">
				<div class="col-md-4 col-sm-6 col-xs-4">
					<h3>公司简介</h3>
					<p>黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员</p>
					<a href="http://www.itheima.com" class="btn btn-danger pull-right">了解更多</a>
				</div>
				<div class="col-md-4 col-sm-6 col-xs-4">
					<h3>公司愿景</h3>
					<p>黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员</p>
					<a href="http://www.itheima.com" class="btn btn-info pull-right">了解更多</a>
				</div>
				<div class="col-md-4 col-xs-4">
					<h3>联系我们</h3>
					<p>黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员</p>
					<a href="http://www.itheima.com" class="btn btn-primary pull-right">了解更多</a>
				</div>
			</div>

		</div>
	</body>

</html>

5.网站首页代码完成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="../css/bootstrap.css" />

		<!--需要引入JQuery-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script type="text/javascript" src="../js/bootstrap.js"></script>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!--
			引入bootstrap相关的头文件
			1. div布局容器  class = " container"
			2. 放8行 row 
		-->
	</head>

	<body>
		<!--最外层的布局容器-->
		<div class="container">
			<!--LOGO部分-->
			<div class="row">
				<div class="col-md-4 col-sm-6 col-xs-6">
					<img src="../img/logo2.png" />
				</div>
				<div class="col-md-4 hidden-sm hidden-xs">
					<img src="../img/header.png" />
				</div>
				<div class="col-md-4 col-sm-6 col-xs-6" style="line-height: 50px;height: 50px;">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>

			<!--导航栏部分-->
			<nav class="navbar 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">
					        <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-expanded="false">全部分类 <span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li>
										<a href="#">手机数码</a>
									</li>
									<li>
										<a href="#">电脑办公</a>
									</li>
									<li>
										<a href="#">鞋靴箱包</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">香烟酒水</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">花生瓜子</a>
									</li>
								</ul>
							</li>
						</ul>
						<form class="navbar-form navbar-right" role="search">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Search">
							</div>
							<button type="submit" class="btn btn-default">Submit</button>
						</form>

					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container-fluid -->
			</nav>
			
			
			<!--轮播图-->
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
				<!-- 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/1.jpg" alt="...">
						<div class="carousel-caption">
							...
						</div>
					</div>
					<div class="item">
						<img src="../img/2.jpg" alt="...">
						<div class="carousel-caption">
							...
						</div>
					</div>
					<div class="item">
						<img src="../img/3.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-12">
					<h3>最新商品<img src="../images/title2.jpg"/></h3>
				</div>
			</div>
			
			
			<!--商品部分-->
			<div class="row">
				<!--左边大图部分-->
				<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
					<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
				</div>
				<!--
					右边商品项部分
				-->
				<div class="col-md-10">
					<!--投影神券来袭-->
						<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
							<img src="../products/hao/middle01.jpg" style="width: 100%;" />
						</div>
						
						<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
							<img src="../products/hao/small01.jpg" style="max-width: 80%;"/>
							<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="../products/hao/small02.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="../products/hao/small03.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="../products/hao/small04.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="../products/hao/small05.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="../products/hao/small06.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="../products/hao/small07.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="../products/hao/small08.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="../products/hao/small09.jpg"/>
							<p>微波炉</p>
							<p style="color: red;">$998</p>
						</div>
						
					
				</div>
			</div>
			<!--LOGO部分-->
			<div class="row">
				<div class="col-md-12">
					<img src="../products/hao/ad.jpg" width="100%"/>
				</div>
			</div>
			
			<!--最新商品-->
			<div class="row">
				<div class="col-md-12">
					<h3>最新商品<img src="../images/title2.jpg"/></h3>
				</div>
			</div>
			<!--商品部分-->
			<div class="row">
				<!--左边大图部分-->
				<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
					<img src="../products/hao/big01.jpg"/>
				</div>
				<!--
					右边商品项部分
				-->
				<div class="col-md-10">
					<!--投影神券来袭-->
					<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
						<img src="../products/hao/middle01.jpg" />
					</div>
					
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
						<img src="../products/hao/small09.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="../products/hao/small08.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="../products/hao/small07.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="../products/hao/small06.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="../products/hao/small05.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="../products/hao/small04.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="../products/hao/small03.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="../products/hao/small02.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="../products/hao/small01.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 传智商城 版权所有
			</div>
			
		</div>
	</body>

</html>