前端js实现淘宝部分界面

最新推荐文章于 2023-03-17 23:07:20 发布
YZiAngel
最新推荐文章于 2023-03-17 23:07:20 发布
阅读量7.3k
点赞数 6
分类专栏：前端工程师
本文链接：https://blog.csdn.net/yzi_angel/article/details/45481445
版权
前端工程师专栏收录该内容
52 篇文章 0 订阅
订阅专栏
网页小测试代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

#kuangjia {
	height: auto;
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#welcome {
	height: 17px;
	width: 100%;
	background-color: #f5f5f5;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#name {
	height: 80px;
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.jiaqian {
	font-size: 24px;
	color: #f0573e;
}
#daohang {
	height: 40px;
	width: 100%;
	font-size: 12px;
	background-color: #ff6932;
}
#mianfei {
	height: 280px;
	width: 70%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 10px;
}
#yaoqing {
	height: 80px;
	width: 70%;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #ffcab8;
	text-align: center;
	line-height: 80px;
	vertical-align: middle;
}
#banner {
	background-color: #ffcab8;
	height: 100px;
	width: 70%;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	line-height: 100px;
	text-align: center;
	vertical-align: middle;
}
#jinping {
	height: 650px;
	width: 70%;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#yongjin {
	height: 300px;
	width: 70%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#shiyong {
	height: 360px;
	width: 70%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#shouyi {
	height: 280px;
	width: 70%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#weibu {
	height: 90px;
	width: 55%;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#huanying {
	height: 100%;
	width: 50%;
	float: left;
	clear: none;
}
#denglu {
	height: 100%;
	width: 50%;
	float: right;
}
#mingzi {
	height: 80px;
	width: 50%;
	float: left;
}
#mingzi #wangming {
	height: 74%;
	width: 30%;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	background-color: #ffd0c0;
	font-size: 18px;
	text-align: center;
	line-height: 55px;
	list-style-type: none;
	vertical-align: middle;
}
#sousuo {
	height: 80%;
	width: 30%;
	float: left;
	padding-top: 30px;
	padding-left: 20px;
}
#daohang ul{
	line-height: 40px;
	color: #FFFFFF;
	text-align: center;
	display: block;
	float: left;
	height: 40px;
	width: 60%;
	list-style-type: none;
	background-color: #ff6932;
	padding-left: 180px;
	margin: 0;padding: 0;list-style: none;
}
#shangjia {
	height: 50px;
	width: 100px;
	text-align: center;
}


#kuangjia #daohang ul li {
	line-height: 40px;
	color: #FFFFFF;
	text-align: center;
	display: block;
	float: left;
	height: 40px;
	width: 100px;
	list-style-type: none;
	background-color: #ff6932;	
}
body,td,th {
	font-size: 12px;
	font-family: "微软雅黑";
}
#daohang a:link {
	text-decoration: none;
	color: #FFF;
}
#denglu a:link {
	text-decoration: none;
	color: #5F5F5F;
}
#apDiv5 a:link {
	text-decoration: none;
	color: 969696;
	color:#fff;
}
a:visited {
	text-decoration: none;
}
#daohang a:hover {
	text-decoration: none;
	background-color: #ff5a00;
	padding-top: 10px;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 11px;
	color:#FFF;
}
#apDiv5 a:hover {
	text-decoration: none;
	background-color: #ff5a00;
	padding-top: 10px;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 11px;
	color:#FFF;
}
a:active {
	text-decoration: none;
}
#tupian {
	float: left;
	height: 100%;
	width: 53%;
	margin-left: 10px;
	border: 1px solid #bfbfbf;
	text-align: center;
}
#chanpin {
	float: left;
	height: 100%;
	width: 15%;
	border: 1px solid #fe8e64;
}
#gonggao {
	float: left;
	height: 100%;
	width: 29%;
	margin-left: 10px;
}

#sy {
	height: 48%;
	width: 100%;
	border: 1px solid #bebebe;
	margin-top: 10px;
	text-align: center;
	line-height: 130px;
	vertical-align: middle;
}
#chaoliu {
	height: 98%;
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #ffd7c7;
	margin-top: 2px;
	margin-bottom: 2px;
	text-align: center;
	line-height: 20px;
	vertical-align: middle;
}
#apDiv1 {
	position: absolute;
	left: 921px;
	top: 518px;
	width: 73px;
	height: 19px;
	z-index: 1;
}
#pidai {
	float: left;
	height: 270px;
	width: 23%;
	border: 1px solid #e0e0e0;
}
#bao {
	float: left;
	width: 23%;
	border: 1px solid #e0e0e0;
	height: 270px;
	margin-left: 20px;
	margin-top: 20px;
}
#pixie {
	float: left;
	height: 270px;
	width: 23%;
	margin-left: 20px;
	border: 1px solid #e0e0e0;
}
#shubao {
	float: left;
	height: 270px;
	width: 23%;
	margin-left: 20px;
	border: 1px solid #e0e0e0;
}
#chuang {
	float: left;
	height: 270px;
	width: 23%;
	margin-left: 20px;
	border: 1px solid #e0e0e0;
}
#kuzi {
	float: left;
	height: 270px;
	width: 23%;
	border: 1px solid #e0e0e0;
	margin-left: 20px;
	margin-top: 20px;
}
#neiyi {
	float: left;
	height: 270px;
	width: 23%;
	border: 1px solid #e0e0e0;
	margin-left: 20px;
	margin-top: 20px;
}
#lianyixun {
	float: left;
	height: 270px;
	width: 23%;
	border: 1px solid #e0e0e0;
	margin-top: 20px;
}
#pd {
	height: 65%;
	width: 85%;
	border: 1px solid #e5e5e5;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#px   {
	height: 65%;
	width: 85%;
	border: 1px solid #e5e5e5;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#sb   {
	height: 65%;
	width: 85%;
	border: 1px solid #e5e5e5;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#c   {
	height: 65%;
	width: 85%;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#lyq   {
	height: 65%;
	width: 85%;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#ny   {
	height: 65%;
	width: 85%;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#kz   {
	height: 65%;
	width: 85%;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#b   {
	height: 65%;
	width: 85%;
	border: 1px solid #e5e5e5;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#pdm {
	height: 20%;
	width: 85%;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
#pdm input {
	background-color: #ff5b5a;
}
#apDiv2 {
	position: absolute;
	left: 922px;
	top: 1168px;
	width: 72px;
	height: 21px;
	z-index: 2;
}
.yj {
	float: left;
	height: 100px;
	width: 31%;
	border: 1px solid #fecfcb;
	margin-top: 10px;
	margin-right: 15px;
}

.renwu {
	text-align: center;
	float: left;
	height: 100%;
	width: 60%;
}
.chakan {
	text-align: center;
	float: right;
	height: 100px;
	width: 39%;
	border: 1px solid #fee4c1;
	background-color: #fff3ea;
	line-height: 100px;
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
}
#apDiv3 {
	position: absolute;
	left: 922px;
	top: 1468px;
	width: 74px;
	height: 22px;
	z-index: 3;
}
#changjia {
	float: left;
	height: 270px;
	width: 23%;
	margin-left: 20px;
	margin-top: 20px;
	border: 1px solid #e0e0e0;
}
#nuojiya {
	float: left;
	height: 270px;
	width: 23%;
	border: 1px solid #e0e0e0;
	margin-left: 20px;
	margin-top: 20px;
}
#chunzhuang {
	float: left;
	height: 270px;
	width: 23%;
	border: 1px solid #e0e0e0;
	margin-left: 20px;
	margin-top: 20px;
}
#baoyou {
	float: left;
	height: 270px;
	width: 23%;
	border: 1px solid #e0e0e0;
	margin-top: 20px;
}
#by   {
	height: 65%;
	width: 85%;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#cz   {
	height: 65%;
	width: 85%;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#njy   {
	height: 65%;
	width: 85%;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#cj   {
	height: 65%;
	width: 85%;
	border: 1px solid #e5e5e5;
	text-align: center;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#shouyibang {
	height: 100%;
	width: 26%;
	float: left;
	margin-left: 70px;
	border: 2px solid #e9e9e9;
}
#chufa {
	height: 100%;
	width: 26%;
	float: left;
	margin-left: 20px;
	border: 2px solid #ececec;
}
#jinggao {
	height: 100%;
	width: 26%;
	float: left;
	margin-left: 20px;
	border: 2px solid #ececec;
}
#bangzhu {
	float: left;
	height: 100%;
	width: 23%;
	margin-left: 40px;
}
#changjian {
	float: left;
	height: 100%;
	width: 23%;
	margin-left: 20;
}
#guanzhu {
	float: left;
	height: 100%;
	width: 23%;
	margin-left: 20;
}
#lianxi {
	float: left;
	height: 100%;
	width: 23%;
	margin-left: 20;
}
#apDiv4 {
	position: absolute;
	left: 940px;
	top: 98px;
	width: 99px;
	height: 38px;
	z-index: 4;
}
#apDiv5 {
	position: absolute;
	left: 907px;
	top: 98px;
	width: 100px;
	height: 40px;
	z-index: 4;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
}
body {
	margin-top: 0px;
	padding-top: 0px;
	color:#7E807E;
}
.new {
	color: #e7394d;
}
.shuipingxian {
	color: #e5e5e5;
}
.zhekou {
	color: #fc764c;
}
.old {
	color: #b8c1bd;
}
.danshu {
	color: #867973;
}
.shengyu {
	color: #d0d0d0;
}
.anniu {
	background-color: #fb952a;
}
.chaozhi {
	font-size: 18px;
	color: #e61327;
	float: left;
	height: 100%;
	width: 55%;
}
.shou {
	float: left;
	height: 100%;
	width: 45%;
	text-align: center;
}
.jia {
	font-size: 12px;
	color: #68748b;
}
.hong {
	color: #e62657;
}
.dan {
	font-size: 12px;
	color: #e94b81;
}
.top {
	color: #df2191;
}
.bang {
	color: #fe4332;
}
.jiangsu {
	color: #eb7b9d;
}
.xiahuaxian {
	text-decoration: underline;
}
.abc {
	height: 100%;
	width: 100px;
	float: left;
}
#biaodan {
	height: 48%;
	width: 100%;
	border: 1px solid #bebebe;
	text-align:center;
}
body {
	margin: 0px;
	padding: 0px;
}
#shang{
	height: 30;
	text-align: center;
	line-height: 30px;
	vertical-align: middle;
	}
#xia {
	height: 500px;
}
#xia a:link,#xia a:visited,#xia a:hover{
	text-decoration:none;
	}	
#zhengzhi,#wenhua{
	display:none;
	}
#biaodan #sp-junshi{
	width: 33%;
	height: 29px;
	border-right: 1px solid #bebebe;
	float: left;
	border-bottom: none;
}
#biaodan #sp-zhengzhi{
	width: 33%;
	height: 29px;
	border-right: 1px solid #bebebe;
	border-bottom: 1px solid #bebebe;
	float: left;
}
#biaodan #sp-wenhua{
	width: 33.4%;
	height: 29px;
	border-bottom: 1px solid #bebebe;
	float: left;
}
#junshi ul ,#zhengzhi ul,#wenhua ul{
	padding:none;
	margin:none;
}
</style>
<script>
function xianshijunshi(){
	//军事显示
	document.getElementById("junshi").style.display = "block";
	//政治隐藏
	document.getElementById("zhengzhi").style.display = "none";
	//文化隐藏
	document.getElementById("wenhua").style.display = "none";
	document.getElementById("sp-junshi").style.borderBottom = "none"
	document.getElementById("sp-zhengzhi").style.borderBottom = "1px solid #bebebe";
	document.getElementById("sp-wenhua").style.borderBottom = "1px solid #bebebe";
	}
function xianshizhengzhi(){
	//军事隐藏
	document.getElementById("junshi").style.display = "none";
	//政治显示
	document.getElementById("zhengzhi").style.display = "block";
	//文化隐藏
	document.getElementById("wenhua").style.display = "none";
	document.getElementById("sp-junshi").style.borderBottom = "1px solid #bebebe"; 
	document.getElementById("sp-zhengzhi").style.borderBottom = "none";
	document.getElementById("sp-wenhua").style.borderBottom = "1px solid #bebebe";
	}
function xianshiwenhua(){
	//军事隐藏
	document.getElementById("junshi").style.display = "none";
	//政治隐藏
	document.getElementById("zhengzhi").style.display = "none";
	//文化显示
	document.getElementById("wenhua").style.display = "block";
	document.getElementById("sp-junshi").style.borderBottom = "1px solid #bebebe"; 
	document.getElementById("sp-zhengzhi").style.borderBottom = "1px solid #bebebe";
	document.getElementById("sp-wenhua").style.borderBottom = "none";
	}
</script>
</head>
<body>
<div id="apDiv1">查看更多</div>
<div id="apDiv2">查看更多</div>
<div id="apDiv3">查看更多</div>
<div id="apDiv5"><a href="#">
  商家报名</a></div>
<div id="kuangjia">
  <div id="welcome" >
    <div id="huanying" style="text-align : center; font-size: 12px;">欢迎来到驻马店</div>
    <div id="denglu" style="text-align : center; font-size: 12px;"><a href="#">登陆</a> | <a href="#">注册</a>     <a href="#">帮助中心</a></div>
    <div style="clear:both;></div>
</div>
<div id="name">
  <div id="mingzi">
   <div id="wangming">网站名字</div>
  </div>
  <div id="sousuo">
   <div id="sou"><img src="images/sousuo.png" width="258" height="39" /></div>
  </div>
  <div style="clear:both;"></div>
</div>
<div id="daohang">
  <ul>
    <li class=“abc”><a href="#">首        页</a></li>
    <li class=“abc”><a href="#">精选商品</a></li>
    <li class=“abc”><a href="#">佣金任务</a></li>
    <li class=“abc”><a href="#">免费使用</a></li>
    <li class=“abc”><a href="#">使用中心</a></li>
    <li class=“abc”><a href="#">旺旺查询</a></li>
  </ul>
</div>
<div id="mianfei">
  <div id="chanpin">
    <div id="chaoliu"><img src="images/yifu.png" width="18" height="19" />潮流女装<br />
      <img src="images/nanzhuang.png" width="20" height="15" />精品男装<br />
      <img src="images/xiezi.png" width="23" height="16" />鞋子箱包<br />
      <img src="images/dapei.png" width="20" height="15" />时尚饰品<br />
      <img src="images/bangong.png" width="20" height="22" />办公用品<br />
      <img src="images/shuma.png" width="20" height="19" />数码家电<br />
      <img src="images/jiaju.png" width="23" height="20" />家居日用<br />
      <img src="images/meirong.png" width="19" height="19" />美容美肤<br />
      <img src="images/ertong.png" width="21" height="19" />儿童服装<br />
      <img src="images/zhonghe.png" width="20" height="20" />综合使用<br />
      <img src="images/xuni.png" width="21" height="22" />虚拟产品<br />
    </div>
  </div>
  <div id="tupian"><img src="images/tupian.png" width="424" height="227" /></div>
  <div id="gonggao">
    <div id="biaodan">
  <div id="shang" >
    <div id="sp-junshi" class="s1" onMouseover="xianshijunshi()">军事</div>
    <div id="sp-zhengzhi" class="s2" onMouseover="xianshizhengzhi()">政治</div>
    <div id="sp-wenhua" class="s3" onMouseover="xianshiwenhua()">文化</div>
    <div style="clear:both;"></div>
  </div>
  <div id="xia">
    <div id="junshi" class ="info">
      <ul>
        <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>
    <div id="zhengzhi" class ="info">
      <ul>
        <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>
    <div id="wenhua" class ="info">
      <ul>
        <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>
  </div>
</div>
    <div id="sy">试用流程(一个图片)
    </div>
  </div>
  <div style="clear:both;"></div>
</div>
<div id="yaoqing">邀请送积分banner</div>
<div id="jinping">精选商品<br /><hr class="shuipingxian" />
  <div id="pidai">真皮休闲腰带平滑扣头层纯牛皮<br />
    <div id="pd"><img src="images/pidai.png" width="156" height="157" /></div><br />
    <div id="pdm">
    <span class="new">¥59.00</span>
    <span class="old">¥288.00</span>
    <span class="zhekou">2.0折</span>
    <div style="clear:both;"></div>
      <img src="images/shijian.png" width="97" height="33" />   <input name="goumai" type="button" value="购买" /></div>
  </div>
  <div id="pixie">头层真皮豆豆鞋男士休闲鞋男鞋<br />
    <div id="px"><img src="images/pixie.png" width="156" height="157" /></div><br />
    <div id="pdm">
    <span class="new">¥59.00</span>
    <span class="old">¥288.00</span>
    <span class="zhekou">2.0折</span>
    <div style="clear:both;"></div>
      <img src="images/shijian.png" width="97" height="33" />   <input name="goumai" type="button" value="购买" /></div>
    </div>
  <div id="shubao">韩版中学双肩包撞色拼接学院风男<br />
    <div id="sb"><img src="images/shubao.png" width="158" height="156" /></div><br />
    <div id="pdm">
    <span class="new">¥59.00</span>
    <span class="old">¥288.00</span>
    <span class="zhekou">2.0折</span>
    <div style="clear:both;"></div>
      <img src="images/shijian.png" width="97" height="33" />   <input name="goumai" type="button" value="购买" /></div>
    </div>
  <div id="chuang">新款床上用品素色纯棉四件套<br />
    <div id="c"><img src="images/chuang.png" width="155" height="157" /></div><br />
    <div id="pdm">
    <span class="new">¥59.00</span>
    <span class="old">¥288.00</span>
    <span class="zhekou">2.0折</span>
    <div style="clear:both;"></div>
      <img src="images/shijian.png" width="97" height="33" />   <input name="goumai" type="button" value="购买" /></div>
    </div>
  <div id="lianyixun">气质女装长连衣裙包臀修身打低长<br />
    <div id="lyq"><img src="images/lianyiqun.png" width="157" height="157" /></div><br />
    <div id="pdm">
    <span class="new">¥59.00</span>
    <span class="old">¥288.00</span>
    <span class="zhekou">2.0折</span>
    <div style="clear:both;"></div>
      <img src="images/shijian.png" width="97" height="33" />   <input name="goumai" type="button" value="购买" /></div>
    </div>
  <div id="neiyi">聚拢文胸套装性感深V调整型内衣<br />
    <div id="ny"><img src="images/neiyi.png" width="157" height="155" /></div><br />
    <div id="pdm">
    <span class="new">¥59.00</span>
    <span class="old">¥288.00</span>
    <span class="zhekou">2.0折</span>
    <div style="clear:both;"></div>
      <img src="images/shijian.png" width="97" height="33" /><input name="goumai" type="button" value="购买" /></div>
    </div>
  <div id="kuzi">假两件打底裤子包臀裙裤拼木耳边<br />
    <div id="kz"><img src="images/kuzi.png" width="156" height="158" /></div><br />
    <div id="pdm">
    <span class="new">¥59.00</span>
    <span class="old">¥288.00</span>
    <span class="zhekou">2.0折</span>
    <div style="clear:both;"></div>
      <img src="images/shijian.png" width="97" height="33" />   <input name="goumai" type="button" value="购买" /></div>
    </div>
  <div id="bao">新款时尚潮女士链条单肩包<br />
    <div id="b"><img src="images/bao.png" width="156" height="156" /></div><br />
    <div id="pdm">
    <span class="new">¥59.00</span>
    <span class="old">¥288.00</span>
    <span class="zhekou">2.0折</span>
    <div style="clear:both;"></div>
      <img src="images/shijian.png" width="97" height="33" />   <input name="goumai" type="button" value="购买" /></div>
    </div>
  <br/>
<div style="clear:both;"></div>
</div>
<div id="yongjin">佣金任务<br /><hr class="shuipingxian" />
  <div class="yj">
  <div class="renwu">
   <span class="biaoti">[1钻起]男士短袖T恤任务</span><br />
   <span class="jiaqian">¥6元佣金</span><br />
   <span class="danshu"><br />下单49元，返还55元</span><br />
   <span class="shengyu">剩余份数：12/12份</span>
  <div style="clear:both;"></div>
  </div>
  <div class="chakan">
  <input type="button" class="anniu" value="查看佣金活动" /><br />
<img src="images/naozhong.png" width="46" height="20" /></div>
  <div style="clear:both;"></div>
    </div>
  <div class="yj">
  <div class="renwu">
  <span class="biaoti">购物赚钱测试活动</span><br />
  <span class="jiaqian">¥6元佣金</span><br />
  <span class="danshu"><br />
  下单49元，返还55元</span><br />
  <span class="shengyu">剩余份数：12/12份</span>
  <div style="clear:both;"></div>
  </div>
  <div class="chakan">
  <input type="button" class="anniu" value="查看佣金活动" /></div>
  <div style="clear:both;"></div>
    </div>
  <div class="yj">
  <div class="renwu">
  <span class="biaoti">学生女装短袖</span><br />
  <span class="jiaqian">¥6元佣金</span><br />
  <span class="danshu"><br />
  下单49元，返还55元</span><br />
  <span class="shengyu">剩余份数：12/12份</span>
  <div style="clear:both;"></div>
  </div>
  <div class="chakan">
  <input type="button" class="anniu" value="查看佣金活动" /><br />
<img src="images/jiaoliu.png" width="23" height="22" /></div>
<div style="clear:both;"></div>
   </div>
  <div class="yj">
  <div class="renwu">
    <span class="biaoti">电脑网线双绞线</span><br />
    <span class="jiaqian">¥6元佣金</span><br />
    <span class="danshu"><br />下单49元，返还55元</span><br />
    <span class="shengyu">剩余份数：12/12份</span>
  <div style="clear:both;"></div>
  </div>
    <div class="chakan">
    <input type="button" class="anniu" value="查看佣金活动" /><br />
    <img src="images/jiaoliu.png" width="23" height="22" /></div>
    <div style="clear:both;"></div>
   </div>
  <div class="yj">
  <div class="renwu">
  <span class="biaoti">德国韩国转换插座</span><br />
  <span class="jiaqian">¥6元佣金</span><br />
  <span class="danshu"><br />
  下单49元，返还55元</span><br />
  <span class="shengyu">剩余份数：12/12份</span>
  <div style="clear:both;"></div>
  </div>
  <div class="chakan">
  <input type="button" class="anniu" value="查看佣金活动" /></div>
  <div style="clear:both;"></div>
  </div>
  <div class="yj">
  <div class="renwu">
  <span class="biaoti">[2心起]认真诚信亲来</span><br />
  <span class="jiaqian">¥6元佣金</span><br />
  <span class="danshu"><br />
  下单49元，返还55元</span><br />
  <span class="shengyu">剩余份数：12/12份</span>
  <div style="clear:both;"></div>
  </div>
  <div class="chakan">
  <input type="button" class="anniu" value="查看佣金活动" /><br />
  <img src="images/nao.png" width="33" height="21" /></div>
  <div style="clear:both;"></div>
   </div>
  <div style="clear:both;"></div>
</div>
<div id="shiyong">试用任务<br />
  <hr class="shuipingxian" /><br />
  <div id="baoyou">包邮LG顶级RcEn润膏YUGO洗发<br />
    <div id="by"><img src="images/xifa.png" width="169" height="168" /></div><br />
    <div id="pdm">
      <div class="chaozhi" id="chaozhi">
        <span class="cz">超值试用</span><br />
        <span class="jia">下单价：</span><span class="dan">¥69.00</span><br />
        <span class="jia">超值价：</span><span class="dan">¥10.00</span></div>
      <div class="shou" ><img src="images/shou.png" width="65" height="15" /><br />
        <input name="goumai" type="button" value="抢购" /></div>
      </div>
  </div>
  <div id="chunzhuang">2015春装新款韩版修身大码女装七<br />
    <div id="cz"><img src="images/nvzhuang.png" width="168" height="168" /></div><br />
    <div id="pdm">
      <div class="chaozhi" id="chaozhi">
        <span class="cz">超值试用</span><br />
        <span class="jia">下单价：</span><span class="dan">¥69.00</span><br />
        <span class="jia">超值价：</span><span class="dan">¥10.00</span></div>
      <div class="shou" id="shou"><img src="images/shou.png" width="65" height="15" />
      <input name="goumai" type="button" value="抢购" /></div>
      </div>
    </div>
  <div id="nuojiya">Nokia/诺基亚107 1070双卡双待<br />
    <div id="njy"><img src="images/nuojiya.png" width="167" height="168" /></div><br />
    <div id="pdm">
      <div class="chaozhi" id="chaozhi">
        <span class="cz">超值试用</span><br />
        <span class="jia">下单价：</span><span class="dan">¥69.00</span><br />
        <span class="jia">超值价：</span><span class="dan">¥10.00</span></div>
      <div class="shou" id="shou"><img src="images/shou.png" width="65" height="15" />
      <input name="goumai" type="button" value="抢购" /></div>
      </div>
    </div>
  <div id="changjia">厂家直销促销款家里厨房用天然气<br />
    <div id="cj"><img src="images/tianran.png" width="168" height="168" /></div><br />
    <div id="pdm">
      <div class="chaozhi" id="chaozhi">
        <span class="cz">超值试用</span><br />
        <span class="jia">下单价：</span><span class="dan">¥69.00</span><br />
        <span class="jia">超值价：</span><span class="dan">¥10.00</span></div>
      <div class="shou" id="shou"><img src="images/shou.png" width="65" height="15" />
      <input name="goumai" type="button" value="抢购" /></div>
      </div>
    </div>
    <div style="clear:both;"></div>
</div>
<div id="shouyi">
  <div id="shouyibang"><span class="bang">收益榜</span><br />
    <hr class="shuipingxian" />
    <br />
    <table width="200">
      <tr>
        <td width="15%" class="top">Top1</td>
        <td width="30%">vioal**</td>
        <td width="25%">总收益</td>
        <td class="top">¥1997.99</td>
      </tr>
      <tr>
        <td width="15%" class="top">Top2</td>
        <td width="30%">jgkib%</td>
        <td width="25%">总收益</td>
        <td class="top">¥1997.99</td>
      </tr>
      <tr>
        <td width="15%" class="top">Top3</td>
        <td width="30%">vioal**</td>
        <td width="25%">总收益</td>
        <td class="top">¥1997.99</td>
      </tr>
      <tr>
        <td width="15%" class="top">Top4</td>
        <td width="30%">jgkib%</td>
        <td width="25%">总收益</td>
        <td class="top">¥1997.99</td>
      </tr>
      <tr>
        <td width="15%" class="top">Top5</td>
        <td width="30%">vioal**</td>
        <td width="25%">总收益</td>
        <td class="top">¥1997.99</td>
      </tr>
      <tr>
        <td width="15%" class="top">Top6</td>
        <td width="30%">jgkib%</td>
        <td width="25%">总收益</td>
        <td class="top">¥1997.99</td>
        </tr>
      <tr>
        <td width="15%" class="top">Top7</td>
        <td width="30%">vioal**</td>
        <td width="25%">总收益</td>
        <td class="top">¥1997.99</td>
        </tr>
      <tr>
        <td width="15%" class="top">Top8</td>
        <td width="30%">jgkib%</td>
        <td width="25%">总收益</td>
        <td class="top">¥1997.99</td>
        </tr>
      <tr>
        <td width="15%" class="top">Top9</td>
        <td width="30%">vioal**</td>
        <td width="25%">总收益</td>
        <td class="top">¥1997.99</td>
        </tr>
      <tr>
        <td width="15%" class="top">Top10</td>
        <td width="30%">jgkib%</td>
        <td width="25%">总收益</td>
        <td class="top">¥1997.99</td>
        </tr>
    </table>
  </div>
  <div id="chufa"><span class="bang">处罚信息列表</span><br />
    <hr class="shuipingxian" />
    <br />
    <table width="209" border="0">
      <tr>
        <td width="220"><span class="jiangsu">江苏宁宁</span><span class="xiahuaxian">被不返佣金并扣回淘客爹2014运动休闲天鹅绒套（手机下单）</span><br />          <br /></td>
      </tr>
      <tr>
        <td><span class="jiangsu">江苏宁宁</span><span class="xiahuaxian">被不返佣金并扣回淘客爹2014运动休闲天鹅绒套（手机下单）<br />          
        </span><br /></td>
      </tr>
      <tr>
        <td><span class="jiangsu">江苏宁宁</span><span class="xiahuaxian">被不返佣金并扣回淘客爹2014运动休闲天鹅绒套（手机下单）<br />          
        </span><br /></td>
      </tr>
      <tr>
        <td><span class="jiangsu">江苏宁宁</span><span class="xiahuaxian">被不返佣金并扣回淘客爹2014运动休闲天鹅绒套（手机下单）<br />          
        </span><br /></td>
      </tr>
    </table>
  </div>
  <div id="jinggao"><span class="bang">警告信息列表</span><br />
    <hr class="shuipingxian" />
    <br />
    <table width="200">
      <tr>
        <td><span class="jiangsu">江苏宁宁</span> 被警告一次<span class="xiahuaxian">（未评价）</span><br />
          <br />
          <br /></td>
      </tr>
      <tr>
        <td><span class="jiangsu">江苏宁宁</span> 被警告一次<span class="xiahuaxian">（未评价）</span><br />
          <br />
          <br /></td>
      </tr>
      <tr>
        <td><span class="jiangsu">江苏宁宁</span> 被警告一次<span class="xiahuaxian">（未评价）</span><br />
          <br />
          <br /></td>
      </tr>
      <tr>
        <td><span class="jiangsu">江苏宁宁</span> 被警告一次<span class="xiahuaxian">（现在都是薄的，你评价很厚，让我怎么卖？）</span><br />
          <br /></td>
      </tr>
    </table>
  </div>
  <div style="clear:both;"></div>
</div>
<div id="banner">banner</div>
<div id="weibu">
  <div id="bangzhu">
      帮助中心<br />
      关于我们<br />
      试用模式介绍<br />
      免费是如何实现的<br />
      手机认证
  </div>
  <div id="changjian">
    
     常见问题<br />
     访客的宗旨<br />
     试客行为规则<br />
     试客申诉维权
  </div>
  <div id="guanzhu">关注我们<br />
    <img src="images/qq.png" width="19" height="20" />加入qq群<br />
    <img src="images/weibo.png" width="23" height="20" />微博关注</div>
  <div id="lianxi">联系我们<br />
  </div>
  <div style="clear:both;"></div>
</div>

</div>
</body>
</html>



实现视图：