第七阶段 -- 网页编程基础：【CSS】

本文链接：https://blog.csdn.net/weixin_42375099/article/details/95230313

文章目录

1. css的引用方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		     /*【2】内嵌样式*/
			/*p代表标签的名称*/
			p{
			/*字体颜色*/	
			 color: yellow;	
			 /*字体的大小*/
			 font-size: 25px;
			 /*字体加粗*/
			 font-weight: bold;
			}
		</style>
		<!--【3】外部式（连接式）  rel：引入文件和当前文件的关系  href：引入文件的路径-->
		<link rel="stylesheet" type="text/css" href="css/css1.css"/>
		<!--<style>
			/*[4]导入样式（了解即可）*/
			@import url("css/css1.css");
		</style>-->
	</head>
	<body>
		<p>我们不一样</p>
		<!--【1】行内样式   键：值-->
		<!--<p style="color: red;">我们不一样</p>-->
		<!--<p >我们不一样</p>
		<p>我们不一样</p>-->
	</body>
</html>
<!--
	CSS中的引入方式的顺序 ：就近原则
-->

2. css中常用选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*通用选择器  *代表该页面中的所有的元素 */
			*{
				color: red;
				background-color: black;
			}
			/*元素选择器*/
			div{
				width: 200px;
				height: 200px;
				/*背景颜色*/
				background-color: blue;
				/*边框的粗细   边框的风格  边框的颜色 */
				border: 1px solid red;
			}
			/*ID选择器 #id的名称 id的名称保证唯一 
			 * ID的命名： 数字、字母、下划线、中划线组成，不能用数字开头
			 * */
			#div1{
				background-color: green;
			}
			/*class类选择器*/
			.div_1{
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<!--<div class="div_1">1</div>-->
		<div>2</div>
		<!--<div class="div_1">3</div>-->
		<p>你好</p>
	</body>
</html>
<!--
	选择器的优先级：
	ID>类选择器>元素选择器>通用选择器
权重 100    10      1      
-->

3. css中其他选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*后代选择器   只要包含该标签对象即可  */
			/*div span{
				font-size: 27px;
				font-family: 宋体;
				color: red;
			}*/
			/*子选择器 直系子标签*/
		   /* div>span{
			color: red;
		   }
		   */
		  /*兄弟选择器  只会改变下面相邻的元素对象*/
		  /*#p_1+p{
		  	color: green;
		  }*/
		 /*兄弟选择器  后面所有的兄弟对象都会改变*/
		 /*#p_1~p{
		 	color: red;
		 	font-size: 30px;
		 }*/
		/*伪类选择器*/
			a:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<span>北京</span>
			<p>
				<span>北京123</span>
			</p>
		</div>
		<span>北京</span>
		<hr />
		<p id="p_1">我们不一样</p>
		<p>我们不一样</p>
		<p>我们不一样</p>
		<hr />
		<a href="">京东网址</a>
	</body>
</html>

4. css常用属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.top{
				width: 100%;
				height: 100px;
				border: 1px solid  red;
			}
			.top_a{
				/*字体的颜色*/
				color: gray;
				/*字体的大小*/
				font-size: 12px;
				/*
				/*字体的加粗*/
				/*font-weight: bold;*/
				/*字体的风格*/
			    /*font-family: 宋体;*/
				/*字体倾斜*/
				/*font-style: italic;*/
				/*去除下划线*/
				text-decoration: none;
			}
			a:hover{
				color: red;
				/*下划线展示*/
				text-decoration: underline;
			}
			.tips{
				width: 100%;
				height: 40px;
				border:  1px dotted indianred;
				/*背景颜色*/
				background-color: pink;
				/*文本居中*/
				text-align: center;
				/*行高  行高的高度和div外面的高度一致这时候里面的内容就会垂直居中*/
				line-height: 40px;
			}
			.center{
				width: 100%;
				height: 500px;
				border: 1px  solid  red;
               /*设置背景图片*/
                background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
				/*设置背景图片不重复*/
				background-repeat: no-repeat;
				/*调整背景图片的位置   X   Y*/
				background-position: center;
				/*调整背景图片的大小   宽  高  */
				/*background-size: 300px  500px;*/
				/*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */
				background-color: rgba(255,0,0,.5);	
			}
		</style>
	</head>
	<body>
		<!--顶部的位置-->
		<div class="top">
		  <a href="" class="top_a">登录页面，调查问卷</a>
		</div>
		<!--中间的提示操作-->
		<div class="tips">
			<span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span>
		</div>
		<div class="center">
		</div>
	</body>
</html>
<!--
	字体：
	            /*字体的颜色*/
				color: gray;
				/*字体的大小*/
				font-size: 12px;
				/*
				/*字体的加粗*/
				/*font-weight: bold;*/
				/*字体的风格*/
			    /*font-family: 宋体;*/
				/*字体倾斜*/
				/*font-style: italic;*/
	
	text
	            /*下划线展示*/
				text-decoration: underline;
	           /*去除下划线*/
				text-decoration: none;
	           /*文本居中*/
				text-align: center;
	行高
                line-height: 40px;  
    背景
                /*设置背景图片*/
                background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
				/*设置背景图片不重复*/
				background-repeat: no-repeat;
				/*调整背景图片的位置   X   Y*/
				background-position: center;
				/*调整背景图片的大小   宽  高  */
				/*background-size: 300px  500px;*/
				/*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */
				background-color: rgba(255,0,0,.5); 
-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.top{
				width: 100%;
				height: 100px;
				border: 1px solid  red;
			}
			.top_a{
				/*字体的颜色*/
				color: gray;
				/*字体的大小*/
				font-size: 12px;
				/*
				/*字体的加粗*/
				/*font-weight: bold;*/
				/*字体的风格*/
			    /*font-family: 宋体;*/
				/*字体倾斜*/
				/*font-style: italic;*/
				/*去除下划线*/
				text-decoration: none;
			}
			a:hover{
				color: red;
				/*下划线展示*/
				text-decoration: underline;
			}
			.tips{
				width: 100%;
				height: 40px;
				border:  1px dotted indianred;
				/*背景颜色*/
				background-color: pink;
				/*文本居中*/
				text-align: center;
				/*行高  行高的高度和div外面的高度一致这时候里面的内容就会垂直居中*/
				line-height: 40px;
			}
			.center{
				width: 100%;
				height: 500px;
				border: 1px  solid  red;
               /*设置背景图片*/
                background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
				/*设置背景图片不重复*/
				background-repeat: no-repeat;
				/*调整背景图片的位置   X   Y*/
				background-position: center;
				/*调整背景图片的大小   宽  高  */
				/*background-size: 300px  500px;*/
				/*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */
				background-color: rgba(255,0,0,.5);	
			}
		</style>
	</head>
	<body>
		<!--顶部的位置-->
		<div class="top">
		  <a href="" class="top_a">登录页面，调查问卷</a>
		</div>
		<!--中间的提示操作-->
		<div class="tips">
			<span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span>
		</div>
		<div class="center">
		</div>
	</body>
</html>
<!--
	字体：
	            /*字体的颜色*/
				color: gray;
				/*字体的大小*/
				font-size: 12px;
				/*
				/*字体的加粗*/
				/*font-weight: bold;*/
				/*字体的风格*/
			    /*font-family: 宋体;*/
				/*字体倾斜*/
				/*font-style: italic;*/
	text
	            /*下划线展示*/
				text-decoration: underline;
	           /*去除下划线*/
				text-decoration: none;
	           /*文本居中*/
				text-align: center;
	行高
                line-height: 40px;  
    背景
                /*设置背景图片*/
                background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
				/*设置背景图片不重复*/
				background-repeat: no-repeat;
				/*调整背景图片的位置   X   Y*/
				background-position: center;
				/*调整背景图片的大小   宽  高  */
				/*background-size: 300px  500px;*/
				/*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */
				background-color: rgba(255,0,0,.5);
-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div_1{
				width: 200px;
				height: 200px;
				background-color: rgba(255,0,0);
				color: rgba(0,0,255);
				/*调整透明度的属性  0-1*/
				opacity: 0.4;
				/*超出隐藏  hidden*/
				overflow: hidden;
			}
			#span_1{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/*行内元素转块级元素   inline   block  none(隐藏)*/
				display: block;
			}
			ul{
				float: right;
			}
			li{
				/*列表的风格去除*/
				list-style: none;
				float:left;
				/*内边距*/
				padding-left: 15px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="">新闻</a></li>
			<li><a href="">hao123</a></li>
			<li><a href="">地图</a></li>
			<li><a href="">视频</a></li>
			<li><a href="">贴吧</a></li>
			<li><a href="">学术</a></li>
		</ul>
		<!--<hr />
		<div class="div_1">
			
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			
		</div>
		<hr />
		<span id="span_1">1234</span>
		<hr />
		-->
	</body>
</html>
<!--
	行内元素：（多个标签位于同一行）
	 span  font  小标签   img  a  等
	块元素：（标签可以自动换行的元素是块元素）
	   div   h1-h6  ul    p    等
-->

5. css中的定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div_1{
				width: 200px;
				height: 200px;
				background-color: red;
				/*绝对定位*/
				/*position: absolute;*/
				/*固定定位*/
				position: absolute;		
		        top: 150px;
		        left: 150px;	
		        /*置于底层位置*/
		        z-index: -1;			
			}
			.div_2{
				width: 200px;
				height: 200px;
				background-color: green;
				/*相对定位*/
				/*position: relative;
				top: 300px;
				left: 300px;*/
			}
		</style>
	</head>
	<body>
		<div class="div_1"></div>
		<div class="div_2"></div>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
	</body>
</html>
<!--
	绝对定位:
	absolute  :定位离开之后释放的之前的位置   基于外层父级标签来说
    相对定位：
	relative: 定位离开之后之前的位置没有释放  基于之前的位置来说 
	固定定位：
    fixed   ：始终是基于浏览器的左上角定位    适合做广告
    默认定位：
    static   ：初始的定位的操作
-->

6. 盒模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*清除浏览器的留白*/
			body,html{margin: 0px;padding: 0px;}
			.div_1{
				width: 200px;
				height: 200px;
				background-color: red;
				/*内边距  真是div和border之间的距离*/
				/*padding: 50px;*/
				/*   上下的距离    左右的距离*/
				/*padding: 30px  50px;*/
				/* 上 右 下 左*/
				/*padding: 10px  20px  30px  40px;*/
				/*padding-top: 30px;*/
				/*外边距  给盒子进行定位*/
				/*margin: 50px;*/
				/*margin-left: 80px;
				margin-top: 70px;*/
			    /*外边距 垂直的方向回去较大的值*/
				margin-bottom: 40px;
				/*外边距  水平方向会合并*/
				margin-right: 40px;
			}
			.div_2{
				width: 200px;
				height: 200px;
				background-color: green;
				/*margin-top: 70px;*/
				margin-left: 50px;
			}
			div{
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="div_1"></div>
		<div class="div_2"></div>
	</body>
</html>

7. css3中的选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*获得class名称是div1下面的第一个子元素*/
			.div1>p:first-child{
				color: red;
			}
		  .div1>p:last-child{
			color: green;
		  }
		  /*获得具体的某一个子元素*/
		  /*.div1>p:nth-child(2){
		  	background-color: palegreen;
		  }*/
		 /* .div1>p:nth-child(even){
		  	background-color: red;
		  }
		  .div1>p:nth-child(odd){
		  	 background-color: green;
		  }*/
		   /*获得空的元素对象*/
		  .div1>p:empty{
		  	  height: 50px;
		  	  background-color: darkmagenta;
		  }
		  /*获得焦点执行的样式*/
		/*  input:focus{
		  	width: 300px;
		  	height:100px;
		  }*/
		 input:checked{
		 	width: 20px;
		 	height: 20px;
		 }
		</style>
	</head>
	<body>
		<div class="div1">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p></p>
			<p>4</p>
			<p>5</p>
		</div>
		<hr />
		<input type="text" name="" id="" value="" />
		<hr />
	   男：<input type="radio"  name="sex"/>
	   女：<input type="radio"  name="sex"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		 	/*属性选择器*/
			/*input[type='text']{
				width: 300px;
				height: 40px;
			}*/
			/*属性 ^用fom开头的对象   $*/
			input[name^='fom']{
				width: 300px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<p>
		  账号：	<input type="text" name="fom_zh" id="" value="" />
		</p>
		<p>
		密码：	<input type="password" name="fom_pwd" id="" value="" />
		</p>
		<p>
		邮箱：	<input type="email" name="fom_email" id="" value="" />
		</p>
		<p>
		 年龄：	<input type="number" name="age" />
		</p>
	</body>
</html>
<!--
	 选择器的种类：
	   【1】基础选择器
	    *   id   class   标签
	   【2】关系选择器
	    >   +   ~
	   【3】伪类选择器
	    hover 
	   【4】伪对象选择器
	    before  \	after
	   【5】属性选择器
	    input[type='text']
-->

8. css3中的常用属性

画个动态的心形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: #ffa5a5;
			}
			.cen{
				width: 200px;
				height: 200px;
				background-color: #d5093c;
				/*阴影   水平方向的偏移  垂直方向的偏移  模糊度 阴影的颜色*/
				 box-shadow: 0px 0px 70px #D5093C;
				 /*执行动画的调用*/
				 animation: 1s aj infinite;
			}
			.lef{
				/*倒圆角指令*/
				border-radius: 100px;
				/* 左上右下   右上左下 */
				/*border-radius:10px  60px;*/
				/*border-radius:10px 20px 30px 40px;*/
				position: absolute;
				top: 200px;
				left: 200px;
			}
			.rig{
				border-radius: 100px;
				position: absolute;
				top: 200px;
				left: 341px;
			}
			.c{
				/*旋转角度*/
				transform: rotate(45deg);
				position: absolute;
				top: 269px;
				left: 271px;
			}
			/*CSS3中的动画*/
			@keyframes aj{
                 0%{transform: scale(1)rotate(45deg);}
                 50%{transform: scale(1.1)rotate(45deg);}
                 100%{transform: scale(1)rotate(45deg);}
			}
			@-moz-keyframes name{
				from{}
				to{}
			}
			@-ms-keyframes name{
				from{}
				to{}
			}
			@-webkit-keyframes name{
				from{}
				to{}
			}
		</style>
	</head>
	<body>
		<div class="cen lef" ></div>
		<div class="cen c"></div>
		<div class="cen rig"></div>
	</body>
</html>
<!--
	CSS3中常用的属性
	         	/*倒圆角指令*/
				border-radius: 100px;
				/* 左上右下   右上左下 */
				/*border-radius:10px  60px;*/
				/*border-radius:10px 20px 30px 40px;*/
	            /*旋转角度*/
				transform: rotate(45deg);
				/*放大的倍数*/
				/*transform: scale(1.3);*/
				/* X:水平的位移   Y  ：垂直的位移  负数：上*/
			    /*transform: translate(0px,-5px);*/
			    /*2D角度的旋转  X  Y*/
			    transform: skew(40deg,45deg);
	           /*阴影   水平方向的偏移  垂直方向的偏移  模糊度 阴影的颜色*/
				box-shadow: 0px 0px 70px #D5093C;
				CSS3中的动画标签 
				@-ms-keyframes name{
				from{}
				to{}
				}
			@-ms-keyframes name{
				0%{}
				50%{}
				100%{}
			}
-->

9. css项目搭建 – 京东购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/jd.css"/>
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
		<script type="text/javascript" src="js/jd.js" ></script>
	</head>
	<body>
		<!--导航开始-->
		  <div class="nav">
		  	 <div class="warp">
		  	 	  <ul class="nav_ul1">
		  	 	  	<li><a href=""><i class="iconfont">&#xe6d3;</i> 京东首页</a></li>
		  	 	  	<li><a href="">配送到：北京</a></li>
		  	 	  </ul>
		  	 	  <ul class="nav_ul2">
		  	 	  	<li><a href="">洋洋宝贝</a><span>|</span></li>
		  	 	  	<li><a href="">我的订单</a><span>|</span></li>
		  	 	  	<li><a href="">我的京东</a><span>|</span></li>
		  	 	  	<li><a href="">京东会员</a><span>|</span></li>
		  	 	  	<li><a href="">企业采购</a><span>|</span></li>
		  	 	  	<li><a href="">京东手机</a><span>|</span></li>
		  	 	  	<li><a href="">关注京东</a><span>|</span></li>
		  	 	  	<li><a href="">客户服务</a><span>|</span></li>
		  	 	  	<li><a href="">网站导航</a></li>
		  	 	  </ul>
		  	 </div>
		  </div>
		<!--导航结束-->
		<!--搜索框开始-->
		  <div class="search">
		  	  <div class="warp">
		  	  	  <img src="img/logo.jpg" />
		  	  	  <div class="search_div">
		  	  	  	  <input type="text" class="search_text" />
		  	  	  	  <input type="button" value="搜索"  class="search_but"/>
		  	  	  </div>
		  	  </div>
		  </div>
		<!--搜索框结束-->
		<!--标题开始-->
		  <div class="title warp">
		  	  <h3>全部商品</h3>
		  	  <div>
		  	  	 <span>配送到</span>
		  	  	<select>
		  	  		<option>昌平区</option>
		  	  		<option>顺义区</option>
		  	  		<option>大兴区</option>
		  	  		<option>朝阳区</option>
		  	  		<option>昌平区</option>
		  	  	</select>
		  	  </div>
		  </div>
		<!--标题结束-->
		<!--显示菜单的开始-->
		  <div class="tips warp">
		  	 <ul>
		  	 	<li>
		  	 		<input type="checkbox" name="fav" id="all" onclick="checkTest1(this),checkTest2()"/>
		  	 		全选
		  	 	</li>
		  	 	<li>商品</li>
		  	 	<li>单价</li>
		  	 	<li>数量</li>
		  	 	<li>小计</li>
		  	 	<li>操作</li>
		  	 </ul>
		  </div>
		<!--显示菜单的结束-->
		<!--商品详情展示开始-->
		  <div class="info warp">
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox"   name="fav" onclick="checkTest2()"/> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button	
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  </div>
		 <div class="info warp">
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  </div>
		   <div class="info warp">
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" name="fav"  onclick="checkTest2()"/> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  </div>
		<!--商品详情展示结束-->
		<!--结算开始-->
	   <div class="balance warp">
	   	   <ul class="balance_ul1">
	   	   	<li>
	   	   		<input type="checkbox" name="fav" id="" value=""  onclick="checkTest1(this),checkTest2()"/>
	   	   		全选
	   	   	</li>
	   	   	<li><a>删除选中商品</a></li>
	   	   	<li><a>移到我的关注</a></li>
	   	   	<li><a>清除下柜商品</a></li>
	   	   </ul>
	   	   <ul class="balance_ul2">
	   	   	 <li>已经选择<span id="snum">0</span>件商品</li>
	   	   	 <li>总价 <span id="zongz">￥0</span></li>
	   	   	 <li>
	   	   	 	<button class="butt">去结算</button>
	   	   	 </li>
	   	   </ul>
	   </div>
		<!--结算结束-->
	</body>
</html>