宠喵club商城 - 走看看

zoukankan html css js c++ java

宠喵club商城

我们一阶段学习完成，现在小组开始做项目，我们做的是宠物猫的网站，包括品种，商城，流浪猫等内容，我负责的是商城这方面，历经几天终于把页面做了出来，页面包括轮播和图片放大等特效，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="img/www.ico.la_65e2dbdc4ba7689767c152dc98d4c1a8_16X16.ico" type="image/x-icon"/>
<link rel="icon" href="img/www.ico.la_65e2dbdc4ba7689767c152dc98d4c1a8_16X16.ico" type="image/x-icon"/>

<title>宠喵club 商城</title>
<style>

* {
margin:0px;
padding:0px;

}

#top1 {
100%;
height:35px;
/*border:1px solid black;*/
border-bottom:0.1px solid #9E9E9E;
}
.top1 {
600px;
height:35px;
/*border:1px solid black;*/
margin-left:10px;
text-align:center;
line-height:35px;
float:left;

}
.top2 {
300px;
height:35px;
/*border:1px solid black;*/
margin-left:410px;
text-align:center;
line-height:35px;
float:left;

}

.top1 a:hover {
cursor: pointer;
color:red;
}
a:link {
color:black;
}

.top2 a:hover{
cursor: pointer;
color:red;
}
.top3 {
100%;
height:130px;
/*border:1px solid black;*/
float:left;

}
.top4 {
260px;
height:100px;
/*border:1px solid black;*/
margin-top:0px;
margin-left:55px;
float:left;
margin-top:3px;
}
.tx {
498px;
height:40px;
border:1px solid red;
float:left;
margin-top:55px;
margin-left:50px;

}
.wenben {
background: #f65;
height: 43px;
92px;
cursor: pointer;
float: left;
font: 18px/34px "Microsoft YaHei";
color: #fff;
border: none;
margin-top:55px;
}
.top5 {
450px;
height:35px;
/*border:1px solid black;*/
margin-top:95px;
margin-left:364px;
line-height:35px;
font-family: SimSun;
font-size: 14px;
color:#999;
text-decoration: none;
}
.top5-right {
180px;
height:40px;
/*border:1px solid black;*/
float: left;
margin-left:1113px;
margin-top:-80px;
}
.dhh {
100%;
height:50px;
/*border:1px solid black;*/
float: left;
background-color:#EE3B3B;
}
.dhh1, .dhh2, .dhh3, .dhh4, .dhh5, .dhh6 {
130px;
height:50px;
/*border:1px solid black;*/
float:left;
text-align:center;
line-height:50px;

border-right:0.3px solid #9E9E9E;
color: #FFF;
font: 18px/44px "Microsoft YaHei";

}
.dhh1:hover, .dhh2:hover, .dhh3:hover, .dhh4:hover, .dhh5:hover, .dhh6:hover {
cursor: pointer;
background-color:#EE0000;
}
.dhh1 {
margin-left:50px;
}
.dhh7 {
140px;
height:50px;
/*border:1px solid black;*/
float:left;
margin-left:310px;
text-align:center;
line-height:50px;
color:white;
font: 18px/44px "Microsoft YaHei";

}
.dhh7:hover {
cursor: pointer;
background-color:#EE0000;
}
.center1 {
100%;
height:540px;

}
.center1-1 {
margin:0px auto;
60%;
height:540px;

}
.centerout {
100%;
height:2200px;

}
.c2 {
1243px;
height:40px;

margin:0px auto;
}
.c22 {
200px;
height:30px;
margin:6px 0px 0px 0px;
color:red;
font-size:20px;
}
.c3 {
1243px;
height:425px;
border:1px solid #DCDCDC;
margin:0px auto;
border-top-color:orange;
}
.c31 {
188px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:orange;
}
.c32 {
849px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:orange;

}
.c33 {
200px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:orange;
}
.c311 {
188px;
height:70px;

}
.c312 {
188px;
height:138px;
border:1px solid #DCDCDC;
line-height:138px;
text-align:center;
font-size:18px;
background-color:#F5F5F5;
}
.c313 {
188px;
height:131px;
border:1px solid #DCDCDC;
line-height:131px;
text-align:center;
font-size:18px;
background-color:#F5F5F5;
}
.c314 {
188px;
height:79px;
border:1px solid #DCDCDC;
line-height:85px;
text-align:center;
background-color:#F5F5F5;
}
.c312:hover {
cursor:pointer;
background-color:white;
}
.c313:hover {
cursor:pointer;
background-color:white;
}
.c314:hover {
cursor:pointer;
background-color:white;
}
.c321 {
849px;
height:210px;
border:1px solid #DCDCDC;
border-bottom:none;

}
.c322 {
849px;
height:210px;
border:1px solid #DCDCDC;
border-top:none;
border-bottom:none;
}
.c3211, .c3212, .c3213, .c3214 {
210px;
height:210px;
border:0.5px solid #DCDCDC;
float:left;
font-size:13px;
text-align:center;
border:none;

}
.c3221, .c3222, .c3223, .c3224 {
210px;
height:210px;
border:0.5px solid #DCDCDC;
float:left;
font-size:13px;
text-align:center;
border:none;
}
.c331 {
190px;
height:140px;

margin-left:10px;
margin-top:8px;
}
.c332 {
190px;
height:270px;

margin-left:10px;
margin-top:7px;
}
.c4 {
1243px;
height:425px;
border:1px solid #DCDCDC;
margin:0px auto;
border-top-color:#008B8B;
margin-top:40px;
}

.c41 {
188px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:#008B8B;
}
.c42 {
849px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:#008B8B;

}
.c43 {
200px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:#008B8B;
}
.c411 {
188px;
height:70px;

}
.c412 {
188px;
height:138px;
border:1px solid #DCDCDC;
line-height:138px;
text-align:center;
font-size:18px;
background-color:#F5F5F5;
}
.c413 {
188px;
height:131px;
border:1px solid #DCDCDC;
line-height:131px;
text-align:center;
font-size:18px;
background-color:#F5F5F5;
}
.c414 {
188px;
height:79px;
border:1px solid #DCDCDC;
line-height:85px;
text-align:center;
background-color:#F5F5F5;
}
.c412:hover, .c413:hover, .c414:hover {
cursor:pointer;
background-color:white;
}
.c421 {
849px;
height:210px;
border:1px solid #DCDCDC;
border-bottom:none;

}
.c422 {
849px;
height:210px;
border:1px solid #DCDCDC;
border-top:none;
border-bottom:none;
}
.c4211, .c4212, .c4213, .c4214 {
210px;
height:210px;
border:0.5px solid #DCDCDC;
float:left;
font-size:13px;
text-align:center;
border:none;
}
.c4221, .c4222, .c4223, .c4224 {
210px;
height:210px;
border:0.5px solid #DCDCDC;
float:left;
font-size:13px;
text-align:center;
border:none;
}
.c431 {
190px;
height:140px;

margin-left:10px;
margin-top:8px;
}
.c432 {
190px;
height:270px;

margin-left:10px;
margin-top:7px;
}
.c5 {
1243px;
height:425px;
border:1px solid #DCDCDC;
margin:0px auto;
border-top-color:red;
margin-top:40px;
}

.c51 {
188px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:red;
}
.c52 {
849px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:red;

}
.c53 {
200px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:red;
}
.c511 {
188px;
height:70px;

}
.c512 {
188px;
height:138px;
border:1px solid #DCDCDC;
line-height:138px;
text-align:center;
font-size:18px;
background-color:#F5F5F5;
}
.c513 {
188px;
height:131px;
border:1px solid #DCDCDC;
line-height:131px;
text-align:center;
font-size:18px;
background-color:#F5F5F5;
}
.c514 {
188px;
height:79px;
border:1px solid #DCDCDC;
line-height:85px;
text-align:center;
background-color:#F5F5F5;
}
.c512:hover, .c513:hover, .c514:hover {
cursor:pointer;
background-color:white;
}
.c521 {
849px;
height:210px;
border:1px solid #DCDCDC;
border-bottom:none;

}
.c522 {
849px;
height:210px;
border:1px solid #DCDCDC;
border-top:none;
border-bottom:none;
}
.c5211, .c5212, .c5213, .c5214 {
210px;
height:210px;
border:0.5px solid #DCDCDC;
float:left;
font-size:13px;
text-align:center;
border:none;
}
.c5221, .c5222, .c5223, .c5224 {
210px;
height:210px;
border:0.5px solid #DCDCDC;
float:left;
font-size:13px;
text-align:center;
border:none;
}
.c531 {
190px;
height:140px;

margin-left:10px;
margin-top:8px;
}
.c532 {
190px;
height:270px;

margin-left:10px;
margin-top:7px;
}
.c6 {
1243px;
height:425px;
border:1px solid #DCDCDC;
margin:0px auto;
border-top-color:blue;
margin-top:40px;
}

.c61 {
188px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:blue;
}
.c62 {
849px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:blue;

}
.c63 {
200px;
height:424px;
border:1px solid #DCDCDC;
float:left;
border-top-color:blue;
}
.c611 {
188px;
height:70px;

}
.c612 {
188px;
height:138px;
border:1px solid #DCDCDC;
line-height:138px;
text-align:center;
font-size:18px;
background-color:#F5F5F5;
}
.c613 {
188px;
height:131px;
border:1px solid #DCDCDC;
line-height:131px;
text-align:center;
font-size:18px;
background-color:#F5F5F5;
}
.c614 {
188px;
height:79px;
border:1px solid #DCDCDC;
line-height:85px;
text-align:center;
background-color:#F5F5F5;
}
.c612:hover, .c613:hover, .c614:hover {
cursor:pointer;
background-color:white;

}
.c621 {
849px;
height:210px;
border:1px solid #DCDCDC;
border-bottom:none;

}
.c622 {
849px;
height:210px;
border:1px solid #DCDCDC;
border-top:none;
border-bottom:none;
}
.c6211, .c6212, .c6213, .c6214 {
210px;
height:210px;
border:0.5px solid #DCDCDC;
float:left;
font-size:13px;
text-align:center;
border:none;
}
.c6221, .c6222, .c6223, .c6224 {
210px;
height:210px;
border:0.5px solid #DCDCDC;
float:left;
font-size:13px;
text-align:center;
border:none;
}
.c631 {
190px;
height:140px;

margin-left:10px;
margin-top:8px;
}
.c632 {
190px;
height:270px;

margin-left:10px;
margin-top:7px;
}
.bottomdhh {
100%;
height:121px;
border:1px solid black;
float:left;
margin-top:30px;

}
a {
text-decoration: none;
color:black;
}
a:hover {
color:red;
}
.c3211 img,.c3212 img,.c3213 img,.c3214 img{
cursor: pointer;
transition: all 0.3s;

}
.c3211 img:hover,.c3212 img:hover,.c3213 img:hover,.c3214 img:hover{
transform: scale(1.1);
}
.c322 img {
cursor: pointer;
transition: all 0.3s;
}
.c322 img:hover {
transform: scale(1.1);
}
.c421 img {
cursor: pointer;
transition: all 0.3s;
}
.c421 img:hover {
transform: scale(1.1);
}
.c422 img {
cursor: pointer;
transition: all 0.3s;
}
.c422 img:hover {
transform: scale(1.1);
}
.c521 img {
cursor: pointer;
transition: all 0.3s;
}
.c521 img:hover {
transform: scale(1.1);
}
.c522 img {
cursor: pointer;
transition: all 0.3s;
}
.c522 img:hover {
transform: scale(1.1);
}
.c621 img {
cursor: pointer;
transition: all 0.3s;
}
.c621 img:hover {
transform: scale(1.1);
}
.c622 img {
cursor: pointer;
transition: all 0.3s;
}
.c622 img:hover {
transform: scale(1.1);
}
.c33 img,.c43 img,.c53 img,.c63 img {
cursor: pointer;
transition: all 0.3s;
}
.c33 img:hover,.c43 img:hover,.c53 img:hover,.c63 img:hover {
transform: scale(1.1);
}
.top5 span a {
color:#999;
}
.top5 span a:hover {
color:red;
}
.biao {
1243px;
height:170px;
/*border:1px solid black;*/
float:left;
margin-left:55px;
border-bottom:0.5px solid gray;
}
.biao1{
345px;
height:143px;
/*border:1px solid black;*/
float:left;
margin-top:15px;

}
.biao2{
140px;
height:154px;
/*border:1px solid black;*/
float:left;
margin-left:420px;
margin-top:-160px;

font-size:15px; font-weight:500
}
ul {
list-style:none;
}
.li {
text-align:center;
padding-top:5px;
}
.biao5 {
140px;
height: 154px;
/*border: 1px solid black;*/
float: left;
margin-left: 560px;
margin-top: -160px;
font-size: 15px;
font-weight: 500;
}
.biao6 {
140px;
height: 154px;
/*border: 1px solid black;*/
float: left;
margin-left: 700px;
margin-top: -160px;
font-size: 15px;
font-weight: 500;
}
.biao7 {
140px;
height: 154px;
/*border: 1px solid black;*/
float: left;
margin-left: 840px;
margin-top: -160px;
font-size: 15px;
font-weight: 500;
}
.biao8 {
140px;
height: 154px;
/*border: 1px solid black;*/
float: left;
margin-left: 1000px;
margin-top: -160px;
font-size: 15px;
font-weight: 500;
}
.biao9 {
140px;
height: 154px;
/*border: 1px solid black;*/
float: left;
margin-left: 1140px;
margin-top: -160px;
font-size: 15px;
}
.youhui {
text-align:center;
margin-top:-15px;

}
.biao3 {
844px;
height:50px;
/*border:1px solid black;*/
float:left;
border-bottom:0.5px solid gray;
margin-top:10px;
margin-left:250px;
}
.biao4 {
844px;
height:50px;
/*border:1px solid black;*/
float:left;
margin-left:450px;
}
.pj-Carousel { 800px; height: 400px; margin:0px auto; overflow: hidden; position: relative; } /*相框宽度，位置*/
.pj-Carousel-box { height: 500px; position: absolute; top: 0; left: 0; }
.pj-Carousel-item { float: left; height: 300px; background-color: #E3E3E3; text-align: center; line-height: 300px; font-family: "Arial Black"; color: #979797; font-size: 40px; }
.pj-Carousel-active { position: absolute; bottom: 40px; margin: auto auto; z-index: 5; }
.pj-Carousel-color { background-color: #A2A2A2; 14px; height: 14px; border-radius: 50%; float: left; margin: 0px 5px; }
.pj-Carousel .active { background-color: #272727; }

</style>

</head>
<body>
<div id="top1">
<div class="top1">
<a href="一阶段项目spx.html" style="text-decoration: none;" target="_blank" >ฅ'ω'ฅ ฅ'ω'ฅ 网   </a>
<a href="一阶段项目spx.html" style="text-decoration: none;"target="_blank" > ฅ'ω'ฅ 商城   </a>
<a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank" > ฅ'ω'ฅ 服务   </a>
<a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank"> ฅ'ω'ฅ 论坛   </a>
<a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank"> ฅ'ω'ฅ 百科   </a>
</div>
<div class="top2">
<a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank" > 登录   </a>
<a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank">注册   </a>
<a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank" >微博   </a>
<a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank">微信   </a>
<a href="一阶段项目spx.html" style="text-decoration: none;" target="_blank">手机版   </a>
</div>

</div>
<div class="top3">
<div class="top4">
<img src="img/catlogo1.jpg"/> </div>
<input type="text" class="tx" id="d1" name="text"/>
<input type="submit" class="wenben" id="button" name="button" value="搜索"/>
<div class="top5">
热门搜索：
<span><a href="http://" target="_blank" style="text-decoration: none;"> ฅ'ω'ฅ粮</a>
<a href="http://" target="_blank" style="text-decoration: none;"> ฅ'ω'ฅ商城</a>
<a href="http://" target="_blank" style="text-decoration: none;">金猫</a>
<a href="http://" target="_blank" style="text-decoration: none;">金吉拉</a></span>
</div>
<div class="top5-right">
<img src="img/ad2.gif"/>
</div>
</div>
<div class="dhh">
<div class="dhh1" style="margin-left:55px;"><a href="一阶段项目spx.html" style="text-decoration: none; color: #FFF;">首页</a></div>
<div class="dhh2"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">种类</a></div>
<div class="dhh3"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ商城</a></div>
<div class="dhh4"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ医生</a></div>
<div class="dhh5"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ天下</a></div>
<div class="dhh6"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF"target="_blank">流浪ฅ'ω'ฅ</a></div>
<div class="dhh7"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">购物车</a></div>
</div>
<div class="center1">
<div class="center1-1">
<div id="pj-lunbo3">

<div class="pj-Carousel">
<div class="pj-Carousel-box">
<div class="pj-Carousel-item">
<img src="http://localhost:4713/img/lunbo1.jpg" /></div>
<div class="pj-Carousel-item">
<img src="http://localhost:4713/img/lunbo2.jpg" /></div>

<div class="pj-Carousel-item">
<img src="http://localhost:4713/img/lunbo3.jpg" />
</div>
<div class="pj-Carousel-item">
<img src="http://localhost:4713/img/lunbo25.jpg" />
</div>

</div>

<div class="pj-Carousel-active"> </div>
</div>
</div>
</div>
</div>
<div class="centerout">
<div class="c2"><div class="c22">
猫猫商城
</div>
</div>
<div class="c3">
<div class="c31">
<div class="c311"><img src="img/cat1f.png" /></div>
<div class="c312">进口猫粮</div>
<div class="c313">猫罐头/妙鲜包</div>
<div class="c314">幼猫粮成猫粮 </div>
</div>
<div class="c32">
<div class="c321">
<div class="c3211">
<a href="喵星人2222.html" target="_blank"><img src="img/jinkou.jpg" /></a><br />
<a href="遮罩层.html"> 荒野盛宴特选风味烤鹿肉荒野盛宴</a><br />
<label style="color:red;"> ¥ 350.00</label>
</div>
<div class="c3212">
<img src="img/catj1.jpg" /><br />
素力高Solid Gold 无谷物抗敏<br />
<label style="color:red;"> ¥ 440.00</label>
</div>
<div class="c3213">
<img src="img/catj2.jpg" /><br />
牛油果Avoderm 成猫粮鸡<br />
<label style="color:red;"> ¥ 293.00</label>
</div>
<div class="c3214">
<img src="img/catj3.jpg" /><br />
冠能室内成猫配方猫粮3kg<br />
<label style="color:red;"> ¥ 230.00</label>
</div>
</div>
<div class="c322">
<div class="c3221">
<img src="img/niurou.jpg" /><br />
Wanpy happy100牛肉慕斯猫罐头<br />
<label style="color:red;"> ¥ 4.50</label>
</div>
<div class="c3222">
<img src="img/catm2.jpg" /><br />
珍味金枪鱼+鸡肉猫罐头17<br />
<label style="color:red;"> ¥ 43.00</label>
</div>
<div class="c3223">
<img src="img/catm3.jpg" /><br />
伟嘉成猫精选金枪鱼味妙鲜<br />
<label style="color:red;">¥ 3.91</label>
</div>
<div class="c3224">
<img src="img/catm1.jpg" /><br />
伊纳宝猫用金枪鱼、鸡小胸<br />
<label style="color:red;"> ¥ 2.20</label>
</div>
</div>
</div>
<div class="c33">
<div class="c331"><img src="img/catshop2.jpg" /></div>
<div class="c332"><img src="img/catshop1.jpg" /></div>
</div>
</div>
<div class="c4">
<div class="c41">
<div class="c411"><img src="img/2f.png" /></div>
<div class="c412">跳蚤蛔虫</div>
<div class="c413">感冒腹泻/缺钙脱毛</div>
<div class="c414">美毛护肤综合营养 </div>
</div>
<div class="c42">
<div class="c421">
<div class="c4211">
<img src="img/tz1.jpg" /><br />
湃特安琪儿肠虫宁体内驱虫药<br />
<label style="color:red;"> ¥ 28.00</label>
</div>
<div class="c4212">
<img src="img/tz2.jpg" /><br />
福来恩猫用增效灭虱滴剂<br />
<label style="color:red;"> ¥ 42.00</label>
</div>
<div class="c4213">
<img src="img/tz3.jpg" /><br />
小宠EHD 猫蚤清60ml 预防治<br />
<label style="color:red;"> ¥ 36.00</label>
</div>
<div class="c4214">
<img src="img/tz4.jpg" /><br />
魔金猫用天然除跳蚤项圈<br />
<label style="color:red;">¥ 18.20</label>
</div>
</div>
<div class="c422">
<div class="c4221">
<img src="img/gm1.jpg" /><br />
谷登猫用六种菌3g*8包猫<br />
<label style="color:red;"> ¥ 59.00</label>
</div>
<div class="c4222">
<img src="img/gm2.jpg" /><br />
小宠EHD 猫咪专用益生菌5g<br />
<label style="color:red;">¥ 46.00</label>
</div>
<div class="c4223">
<img src="img/qg1.jpg" /><br />
麦德氏inplus 猫用护毛超浓<br />
<label style="color:red;">¥ 85.00</label>
</div>
<div class="c4224">
<img src="img/qg2.jpg" /><br />
英国MAG 猫用超浓缩冰岛三<br />
<label style="color:red;">¥ 168.00</label>
</div>
</div>
</div>
<div class="c43">
<div class="c431"><img src="img/catys1.jpg" /></div>
<div class="c432"><img src="img/catys2.jpg" /></div>
</div>
</div>
<div class="c5">
<div class="c51">
<div class="c511"><img src="img/3f.png" /></div>
<div class="c512">冬季窝笼</div>
<div class="c513">喂食器皿/猫咪玩具</div>
<div class="c514">猫抓板逗猫棒 </div>
</div>
<div class="c52">
<div class="c521">
<div class="c5211">
<img src="img/mw1.jpg" /><br />
怡亲多可特可爱竖耳朵猫窝<br />
<label style="color:red;"> ¥ 55.00</label>
</div>
<div class="c5212">
<img src="img/mw2.jpg" /><br />
田田猫瓦楞纸组合房子独立<br />
<label style="color:red;"> ¥ 66.00</label>
</div>
<div class="c5213">
<img src="img/mw3.jpg" /><br />
怡亲宠物猫笼猫屋三层猫别<br />
<label style="color:red;"> ¥ 469.00</label>
</div>
<div class="c5214">
<img src="img/mw4.jpg" /><br />
田田猫蛋糕造型瓦楞纸猫抓<br />
<label style="color:red;">¥ 26.20</label>
</div>
</div>
<div class="c522">
<div class="c5221">
<img src="img/ws1.jpg" /><br />
田田猫椭圆形卡通猫碗<br />
<label style="color:red;"> ¥ 26.00</label>
</div>
<div class="c5222">
<img src="img/ws2.jpg" /><br />
AFP 猫咪专用活氧饮水机活<br />
<label style="color:red;">¥ 109.00</label>
</div>
<div class="c5223">
<img src="img/wj1.jpg" /><br />
斑卓猫爬架BT-18023 宠物用<br />
<label style="color:red;">¥ 166.00</label>
</div>
<div class="c5224">
<img src="img/wj2.jpg" /><br />
怡亲多可特小型猫爬架TPCF<br />
<label style="color:red;">¥ 79.00</label>
</div>
</div>
</div>
<div class="c53">
<div class="c531"><img src="img/ttm.jpg" /></div>
<div class="c532"><img src="img/ttm2.gif" /></div>
</div>
</div>
<div class="c6">
<div class="c61">
<div class="c611"><img src="img/4f.png" /></div>
<div class="c612">猫砂</div>
<div class="c613">猫砂盆/消毒除臭</div>
<div class="c614">水晶猫砂猫用香水 </div>
</div>
<div class="c62">
<div class="c621">
<div class="c6211">
<img src="img/ms1.jpg" /><br />
埃尔西博士雅乐多膨润土猫砂<br />
<label style="color:red;"> ¥ 258.00</label>
</div>
<div class="c6212">
<img src="img/ms2.jpg" /><br />
怡亲柠檬香型膨润土猫砂5L（<br />
<label style="color:red;"> ¥ 15.00</label>
</div>
<div class="c6213">
<img src="img/ms3.jpg" /><br />
法国娜朵Nullodor 彩色颗粒<br />
<label style="color:red;"> ¥ 88.00</label>
</div>
<div class="c6214">
<img src="img/ms4.jpg" /><br />
美国进口蓝钻抗菌低过敏猫<br />
<label style="color:red;">¥ 198.00</label>
</div>
</div>
<div class="c622">
<div class="c6221">
<img src="img/mp1.jpg" /><br />
怡亲多可特半封闭式经济型<br />
<label style="color:red;"> ¥ 24.00</label>
</div>
<div class="c6222">
<img src="img/mp2.jpg" /><br />
佳乐滋双层猫砂盆套装（半封)<br />
<label style="color:red;">¥ 384.00</label>
</div>
<div class="c6223">
<img src="img/xd1.jpg" /><br />
小宠EHD 猫除臭消毒液400ml <br />
<label style="color:red;">¥ 36.00</label>
</div>
<div class="c6224">
<img src="img/xd2.jpg" /><br />
Neo 猫砂除臭粉100g<br />
<label style="color:red;">¥ 7.00</label>
</div>
</div>
</div>
<div class="c63">
<div class="c631"><img src="img/sh1.jpg" /></div>
<div class="c632"><img src="img/sh2.jpg" /></div>
</div>
</div>

<div class="bottomdhh"><img src="img/1347.121.jpg" /></div>

<div class="biao">
<div class="biao1">
<img src="img/345.143.jpg" /></div>

</div>
<div class="biao2">

<ul>
<li class="li"><h4>支付方式</h4><br /></li>
<li class="li"> 货到付款<br /></li>
<li class="li">余额支付<br /></li>
<li class="li">在线支付<br /></li>

</ul>

</div>
<div class="biao5">
<ul>
<li class="li"><h4>配送方式</h4><br /></li>
<li class="li"> 宠喵快递<br /></li>
<li class="li">外包快递<br /></li>
<li class="li">物流运输<br /></li>
<li class="li">公司地址<br /></li>

</ul>

</div>
<div class="biao6">
<ul>
<li class="li"><h4>购物指南</h4><br /></li>
<li class="li"> 退换货政策<br /></li>
<li class="li">时代杂志<br /></li>
<li class="li">常见问题<br /></li>
<li class="li">宠物知识<br /></li>
</ul>

</div>
<div class="biao7">
<ul>
<li class="li"><h4>关于我们</h4><br /></li>
<li class="li"> 关于我们<br /></li>
<li class="li">仓储中心<br /></li>
<li class="li">联系我们<br /></li>
<li class="li">人才招聘<br /></li>
</ul>

</div>
<div class="biao8">
<ul>
<li class="li"><h4>扫描下载APP</h4><br /></li>
<li class="youhui">下单更优惠<br /></li>
</ul>
<br />
<img src="img/91.89.jpg" style="margin-left:27px;margin-top:-5px;"/>
</div>
<div class="biao9">
<ul>
<li class="li"><h4>扫描关注宠喵</h4><br /></li>
<li class="youhui">商城微信<br /></li>
</ul>
<br />
<img src="img/90.91.jpg" style="margin-left:27px;margin-top:-5px;" />
</div>
<div class="biao3"><img src="img/biao1.jpg.jpg" /></div>
<div class="biao4"><img src="img/biao.888.jpg.jpg" /></div>

</div>

</body>
</html>

<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.pj.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {

$("#pj-lunbo3").Carousel({
'play': 'true', //是否循环播放
'prevButton': '#prev', //左按钮
'nextButton': '#next', //右按钮
'fade': 'true',
'playTimer': '2000',
'eventClick': 'true'
});

})
</script>

查看全文

相关阅读:
JS高级---沙箱小案例
 JS高级---沙箱
 JS高级---闭包案例，点赞
 JS高级---闭包案例，产生多个相同的随机数
 JS高级---闭包小案例
 JS高级---闭包
 JS高级---作用域，作用域链和预解析
 JS高级---函数作为返回值使用拓展，排序
 JS高级---函数作为参数使用
 c# 格式化字符串

原文地址：https://www.cnblogs.com/yujiamin123/p/6952482.html