一阶段项目首页

zoukankan html css js c++ java

一阶段项目首页

　　　第一阶段项目做完了，是一个关于猫的网站！

　　　先来看看首页代码：

<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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/grid-accordion.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="layer/layer.js"></script>
<style>
* {
margin:0px;
padding:0px;

}
div {

}
a:link,a:visited{
color:black;
}
#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;
font-size:16px;

}
.top2 {
300px;
height:35px;
/*border:1px solid black;*/
margin-left:1050px;
text-align:center;
line-height:35px;
float:left;
font-size:16px;
margin-top:-34px;

}
#denglu{
50px;
height:35px;
/*border:1px solid black;*/
margin-left:410px;
text-align:center;
line-height:35px;
float:left;
font-size:16px;
color:black;
}
#denglu:hover {
cursor: pointer;
color: red;
}
.top1 a:hover {
cursor: pointer;
color:red;
}
.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:3px;
margin-left:55px;
float:left;
}
.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;
position:relative;
z-index:200;

}
.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;
}

.tupian {
92%;
height:500px;
border:1px solid black;
float:left;
margin:0px 20px 0px 55px;

}
.pinpai {
1243px;
height:87px;
/*border:1px solid black;*/
float:left;
line-height:70px;
border-bottom:0.3px solid #DBDBDB;
margin-top:60px;
margin-bottom:30px;
}
.pinpai-limian {
200px;
height:150px;
/*border:1px solid black;*/
float:left;
position:absolute;
margin-top:-165px;
margin-left:562px;

}
.pinpai a:hover {
cursor: pointer;
color:red;
}
.pinpaitupian {
1243px;
height:360px;
/*border:1px solid black;*/
float:left;
margin-top:5px;
}
.pinzhong {
1243px;
height:77px;
/*border:1px solid black;*/
float:left;
margin-left:55px;
margin-top:20px;
background-color:#CC9933;
}
.pinzhong1 {
289px;
height:77px;
/*border:1px solid black;*/
float:left;
margin-left:475px;
}
.pinzhong2 {
127px;
height:26px;
/*border:1px solid black;*/
float:left;
margin-left:348px;
margin-top:50px;
text-align:right;
line-height:26px;
}
.pinzhong2:hover {
cursor:pointer;
color:red;
}
.pinpaitupian1 {
172px;
height:360px;
/*border:1px solid black;*/
float:left;
margin-right:5px;
margin-left:2px;
}

.pinpaitupian2 {
172px;
height:360px;
/*border:1px solid black;*/
float:left;
margin-right:5px;
}
.pinpaitupian3 {
173px;
height:360px;
/*border:1px solid black;*/
float:left;
margin-right:5px;
}
.pinpaitupian4 {
173px;
height:360px;
/*border:1px solid black;*/
float:left;
margin-right:5px;
}
.pinpaitupian5{
173px;
height:360px;
/*border:1px solid black;*/
float:left;
margin-right:5px;
}
.pinpaitupian6{
173px;
height:360px;
/*border:1px solid black;*/
float:left;
margin-right:5px;
}
.pinpaitupian7{
173px;
height:360px;
/*border:1px solid black;*/
float:left;
}
.pinpaitupian1 img, .pinpaitupian2 img, .pinpaitupian3 img, .pinpaitupian4 img, .pinpaitupian5 img, .pinpaitupian6 img, .pinpaitupian7 img {
cursor:pointer;
transition:all 0.3s;

}
.pinpaitupian1 img:hover, .pinpaitupian2 img:hover, .pinpaitupian3 img:hover, .pinpaitupian4 img:hover, .pinpaitupian5 img:hover, .pinpaitupian6 img:hover, .pinpaitupian7 img:hover {
transform: scale(1.1);
}
.pinpaitupian1-1 {
171px;
height: 40px;
/*border: 1px solid black;
float: left;*/
margin-top:-5px;
text-align:center;
line-height:40px;

}
.pinpaitupian1-1:hover {
cursor:pointer;
color:red;

}

.pinpaitupian2-1 {
171px;
height: 40px;
/*border: 1px solid black;*/
float: left;
margin-top:-5px;
text-align:center;
line-height:40px;
}
.pinpaitupian3-1 {
171px;
height: 40px;
/*border: 1px solid black;*/
float: left;
margin-top:-5px;
text-align:center;
line-height:40px;
}
.pinpaitupian4-1 {
171px;
height: 40px;
/*border: 1px solid black;*/
float: left;
margin-top:-5px;
text-align:center;
line-height:40px;
}
.pinpaitupian5-1 {
171px;
height: 40px;
/*border: 1px solid black;*/
float: left;
margin-top:-5px;
text-align:center;
line-height:40px;
}
.pinpaitupian6-1 {
171px;
height: 40px;
/*border: 1px solid black;*/
float: left;
margin-top:-5px;
text-align:center;
line-height:40px;
}
.pinpaitupian7-1 {
171px;
height: 40px;
/*border: 1px solid black;*/
float: left;
margin-top:-5px;
text-align:center;
line-height:40px;
}
.pinpaitupian1-1:hover a{
cursor: pointer;
color:red;
}
.pinpaitupian2-1:hover a{
cursor: pointer;
color:red;
}
.pinpaitupian3-1:hover a{
cursor: pointer;
color:red;
}
.pinpaitupian4-1:hover a{
cursor: pointer;
color:red;
}
.pinpaitupian5-1:hover a{
cursor: pointer;
color:red;
}
.pinpaitupian6-1:hover a{
cursor: pointer;
color:red;
}
.pinpaitupian7-1:hover a{
cursor: pointer;
color:red;

}
.yingyang{
1243px;
height:77px;
/*border:1px solid black;*/
float:left;
margin-left:55px;
margin-top:35px;
background-color:#CC9933;
}

.liangshi {
289px;
height:77px;
/*border:1px solid black;*/
float:left;
margin-left:490px;

}
.liangshi2 {
127px;
height:26px;
/*border:1px solid black;*/
float:left;
margin-left:333px;
margin-top:50px;
text-align:right;
line-height:26px;
}
.hongbeijing {
1243px;
height:1020px;
/*border:1px solid black;*/
float:left;
margin-left:55px;
margin-top:20px;
background-image:url(img/brand_bg.jpg);
}
.huangjia {
664px;
height:93px;
/*border:1px solid black;*/
float:left;
margin-left:285px;
margin-top:40px;
text-align:center;
line-height:93px;
color:white;
}
.huangjia2 {
1167px;
height:373px;
/*border:1px solid black;*/
float:left;
margin-left:33px;
margin-top:10px;
}
.huangjia3 {
1167px;
height:246px;
/*border:1px solid black;*/
float:left;
margin-left:33px;
}
.huangjia3-1 {
278px;
height:246px;
/*border:1px solid black;*/
float:left;
margin-right:27px;

}
.huangjia3-2{
278px;
height:246px;
/*border:1px solid black;*/
float:left;
margin-right:27px;

}
.huangjia3-3 {
278px;
height:246px;
/*border:1px solid black;*/
float:left;
margin-right:35px;
}
.huangjia3-4{
243px;
height:246px;
/*border:1px solid black;*/
float:left;
}
.huangjia4 {
1165px;
height: 248px;
/*border: 1px solid black;*/
float: left;
margin-left:32px;
}

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

}
.yuefen {
1243px;
height:130px;
/*border:1px solid black;*/
float:left;
margin-left:55px;
margin-top:35px;
} .yuefen1{
173px;
height:66px;
/*border:1px solid black;*/
float:left;
margin-left:30px;
margin-top:30px;

} .yuefen2{
171px;
height:66px;
/*border:1px solid black;*/
float:left;
margin-left:328px;
margin-top:30px;

} .yuefen3{
178px;
height:62px;
/*border:1px solid black;*/
float:left;
margin-left:328px;
margin-top:30px;

}
.liangpinpai {
1243px;
height:320px;
/*border:1px solid black;*/
float:left;
margin-left:55px;
background-color:#CC99FF;

}
.liangpinpai1 {
184px;
height:302px;
/*border:1px solid black;*/
float:left;
margin-left:25px;
}
.liangpinpai2 {
185px;
height:295px;
/*border:1px solid black;*/
float:left;
margin-left:315px;
}
.liangpinpai3 {
212px;
height:308px;
/*border:1px solid black;*/
float:left;
margin-left:310px;
}
.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;
font-weight: 500;
}
.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;
}
.huangjia3-1 img {
cursor: pointer;
transition: all 0.3s;
}
.huangjia3-1 img:hover {
transform: scale(1.1);
}
.huangjia3-2 img {
cursor: pointer;
transition: all 0.3s;
}
.huangjia3-2 img:hover {
transform: scale(1.1);
}
.huangjia3-3 img {
cursor: pointer;
transition: all 0.3s;
}
.huangjia3-3 img:hover {
transform: scale(1.1);
}
.huangjia3-4 img {
cursor: pointer;
transition: all 0.3s;
}
.huangjia3-4 img:hover {
transform: scale(1.1);
}
.yuefen1 img {
cursor: pointer;
transition: all 0.3s;
}
.yuefen1 img:hover {
transform: scale(1.1);
}
.yuefen2 img {
cursor: pointer;
transition: all 0.3s;
}
.yuefen2 img:hover {
transform: scale(1.1);
}
.yuefen3 img {
cursor: pointer;
transition: all 0.3s;
}
.yuefen3 img:hover {
transform: scale(1.1);
}
.liangpinpai1 img {
cursor: pointer;
transition: all 0.3s;
}
.liangpinpai1 img:hover {
transform: scale(1.1);
}
.liangpinpai2 img {
cursor: pointer;
transition: all 0.3s;
}
.liangpinpai2 img:hover {
transform: scale(1.1);
}
.liangpinpai3 img {
cursor: pointer;
transition: all 0.3s;
}
.liangpinpai3 img:hover {
transform: scale(1.1);
}
.youhui {
text-align:center;
margin-top:-15px;

}
.dhh2, .dhh3, .dhh5,.dhh7 {
overflow:hidden;
}
.xiala1 {
margin-top:8px;
list-style:none;
background-color:#FF3030;
opacity:1;
color:white;

}
.dhh2:hover ,.dhh3:hover, .dhh5:hover,.dhh7:hover{
height:248px;
transition:1s;

}
.dhh5:hover {
height:150px;
}
.xiala2 {

}
.xiala3 {
margin-top:7px;

background-color:white;
opacity:1;
color:red;
-100px;
height:200px;
text-align:center;
line-height:200px;
}
.gaiyanse:hover {
cursor:pointer;
color:gray;
}
.xiala1 a:visited {
color:white;

}
.xiala1 a:hover {
color:black;
}

.top5 span a{
color:#999;
}

.top5 span a:hover {
color:red;
}
.pinzhong2 a:hover {
color:red;
}
.liangshi2 a:hover {
color:red;
}

</style>

</head>

<body>
<div id="top1">
<div class="top1">
<a href="一阶段项目spx.html" style="text-decoration: none;" target="_blank" >ฅ'ω'ฅ ฅ'ω'ฅ 网   </a>
<a href="喵星人.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 id="denglu">登录</div>
<div class="top2">

<a href="http://localhost:4713/%E4%B8%80%E9%98%B6%E6%AE%B5%E9%A1%B9%E7%9B%AE%E6%B3%A8%E5%86%8C%E9%A1%B5.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/logo.jpg.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 class="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="http://localhost:4713/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5%E9%A1%B9%E7%9B%AE%EF%BC%8C%E5%93%81%E7%A7%8D.html" style="text-decoration: none;color: #FFF "target="_blank">种类</a>
<ul class="xiala1">
<li class="xiala2"><a href="一阶段阿比西尼亚猫.html" target="_blank" style="text-decoration: none;" >阿比西尼亚猫</a></li>
<li class="xiala2"><a href="一阶段阿比西尼亚猫.html" target="_blank" style="text-decoration: none;" >埃及猫</a></li>
<li class="xiala2"><a href="一阶段阿比西尼亚猫.html" target="_blank" style="text-decoration: none;" >巴厘猫</a></li>
<li class="xiala2"><a href="第一阶段项目品种.html" target="_blank" style="text-decoration: none;" >《更多》</a></li>
</ul>
</div>
<div class="dhh3"><a href="喵星人.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ商城</a>
<ul class ="xiala1">
<li class="xiala2"><a href="喵星人.html" target="_blank" style="text-decoration: none;" >粮食专区</a></li>
<li class="xiala2"><a href="喵星人.html" target="_blank" style="text-decoration: none;" >医疗保健</a></li>
<li class="xiala2"><a href="喵星人.html" target="_blank" style="text-decoration: none;" >生活品质</a></li>
<li class="xiala2"><a href="喵星人.html" target="_blank" style="text-decoration: none;" >清洁卫生</a></li>
</ul>
</div>

<div class="dhh4"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ医生</a></div>
<div class="dhh5"><a href="ฅ'ω'ฅ天下.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ天下</a>
<ul class ="xiala1">
<li class="xiala2"><a href="ฅ'ω'ฅ天下.html" target="_blank" style="text-decoration: none;" >喵百科</a></li>
<li class="xiala2"><a href="ฅ'ω'ฅ天下.html" target="_blank" style="text-decoration: none;" >养喵知识</a></li>

</ul>
</div>
<div class="dhh6"><a href="流浪猫.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>

<ul class ="xiala3">
<li class="xiala2">空空如也</li>

</ul>
</div>
</div>

<div class="tupian">
<ul class="accordion">
<li>
<img src="img/img.1.jpg"/>

</li>
<li>
<img src="img/img361419910475.jpg" alt=""/>
</li>
<li>
<img src="img/lunbo1.jpg" alt=""/>
</li>
<li>
<img src="img/730.481.jpg" alt=""/>
</li>
<li>
<img src="img/img.88.jpg" alt=""/>
</li>
<li>
<img src="img/img.77.jpg" alt=""/>
</li>
<li>
<img src="img/img.33.jpg" alt=""/>
</li>
<li>
<img src="img/img.44.jpg" alt=""/>

</li>
<li>
<img src="img/img.55.jpg" alt=""/>
</li>

<li>
<img src="img/img.66.jpg" alt=""/>
</li>

</ul>
</div>

<div class="pinpai"><img src="img/1350.87.jpg" />
<div class="pinpai-limian" >
<img src="img/QQ图片20061123001539.png" />
</div>
</div>
<div class="pinzhong">
<div class="pinzhong1"><img src="img/289.77.jpg" /></div>
<div class="pinzhong2"><a href="第一阶段项目品种1.html" style="text-decoration: none;" target="_blank" >《查看更多》</a></div>
</div>
<div class="pinpaitupian" style="margin-left:55px;">
<div class="pinpaitupian1" >
<img src="img/172.227.jpg" />
<div class="pinpaitupian1-1"><a href="一阶段阿比西尼亚猫.html" style="text-decoration:none; " target="_blank">阿比西尼亚猫</a></div>
<div class="pinpaitupian1-1-1"><label style="font-size:13px;">阿比西尼亚猫又称埃塞俄比亚猫、又因步态优美被誉为芭蕾舞猫...</label></div>
</div>
<div class="pinpaitupian2">
<img src="img/QQ截图20170530160640.jpg" />
<div class="pinpaitupian2-1"><a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank">埃及猫</a></div>
<div class="pinpaitupian2-1-1"><label style="font-size:13px;">原产于埃及，又称埃及神猫,是世界上最早出现的家猫...</label></div>
</div>
<div class="pinpaitupian3">
<img src="img/173.227.jpg" />
<div class="pinpaitupian3-1"><a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank">巴厘猫</a></div>
<div class="pinpaitupian3-1-1"><label style="font-size:13px;">巴厘猫是著名的长毛猫，由美国育成，为暹罗猫的长毛突变种...</label></div>
</div>
<div class="pinpaitupian4">
<img src="img/173.225.jpg" />
<div class="pinpaitupian4-1"><a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank">布偶猫</a></div>
<div class="pinpaitupian4-1-1"><label style="font-size:13px;">布偶猫的确切来由可追搠到60年代，有位住在加州的妇女安贝可(Ann Baker)开始经营布偶猫种的培育...</label></div>
</div>
<div class="pinpaitupian5">
<img src="img/173.226.jpg" />
<div class="pinpaitupian5-1"><a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank">金吉拉</a></div>
<div class="pinpaitupian5-1-1"><label style="font-size:13px;">英文名chinchilla，原意其实是一种绒鼠的名称。金吉拉是最早纯人工育种...</label></div>
</div>
<div class="pinpaitupian6">
<img src="img/173.228.jpg" />
<div class="pinpaitupian6-1"><a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank">美国短尾猫</a></div>
<div class="pinpaitupian6-1-1"><label style="font-size:13px;">此美国血统的猫在美国境外极为罕见。1964年左右，一对姓桑德斯的夫妇在亚里桑那一个印度渡假村渡假...</label></div>
</div>
<div class="pinpaitupian7"> <img src="img/173.229.jpg" />
<div class="pinpaitupian7-1"><a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank">俄罗斯蓝猫</a></div>
<div class="pinpaitupian7-1-1"><label style="font-size:13px;">俄罗斯蓝猫，英文名Russian Blue。历史上曾被称做阿契安吉蓝猫...</label></div>

</div>
</div>

<div class="yingyang">
<div class="liangshi" ><img src="img/99999.jpg" /></div>
<div class="liangshi2"><a href="一阶段项目spx.html" style="text-decoration: none;" target="_blank" >《查看更多》</a></div>
</div>
<div class="yuefen">
<div class="yuefen1"><img src="img/173.66.jpg" /></div>
<div class="yuefen2"><img src="img/171.66.jpg" /></div>
<div class="yuefen3"><img src="img/178.62.jpg" /></div>
</div>
<div class="liangpinpai">
<div class="liangpinpai1"><a href="喵星人皇家.html" target="_blank"><img src="img/184.302.jpg" /></a></div>
<div class="liangpinpai2"><img src="img/185.295.jpg" /></div>
<div class="liangpinpai3"><img src="img/212.308.jpg" /></div>
</div>
<div class="hongbeijing">
<div class="huangjia">
<label style="font-size:60px;">皇家品牌  匠心为猫</label>
</div>
<div class="huangjia2" ><img src="img/1166.372.jpg" /></div>
<div class="huangjia3" >
<div class="huangjia3-1" ><img src="img/278.246.jpg" /></div>
<div class="huangjia3-2"><img src="img/280.248.jpg" /></div>
<div class="huangjia3-3"><img src="img/281.248.jpg" /></div>
<div class="huangjia3-4"><img src="img/243.244.jpg" /></div>
</div>

<div class="huangjia4" ><img src="img/1169.248.jpg" /></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>
</body>

</html>
<script>
var d1 = document.getElementById("d1");
d1.placeholder="中华田园猫";

</script>
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.gridAccordion.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.accordion').gridAccordion({1243,
height:500,
columns:5,
distance:3,
closedPanelWidth:10,
closedPanelHeight:10,
alignType:'centerCenter',
slideshow:true,
panelProperties:{
0:{captionWidth:200, captionHeight:35, captionTop:50, captionLeft:30},
4:{captionWidth:150, captionHeight:100, captionTop:30, captionLeft:650},
7:{captionWidth:310, captionHeight:35, captionTop:350, captionLeft:40},
8:{captionWidth:300, captionHeight:40, captionTop:150, captionLeft:35},
11:{captionWidth:150, captionHeight:120, captionTop:300, captionLeft:30},
14:{captionWidth:300, captionHeight:40, captionTop:30, captionLeft:50},
16:{captionWidth:150, SScaptionHeight:120, captionTop:150, captionLeft:10},
18:{captionWidth:300, captionHeight:40, captionTop:130, captionLeft:50}
}});
});

$('#denglu').on('click', function () {
//打开弹出层
layer.open({
type: 2,
//弹出层标题
title: '宠喵club登录',
//弹出层是否最大化，默认最大化 true
maxmin: true,
shadeClose: true, //点击遮罩关闭层
//弹出层大小
area: ['400px', '300px'],
//弹出层页面
content: '/登录界面.html',
});
});

</script>

查看全文

相关阅读:
软考收获
 寻找她（指令寻址）——（软考六）
算法探究——（软考四）
Shell排序——软考（五）
Java String类源码
 Java 抽象类详解
 Spring IOC Container
Tomcat的架构
 Spring与Web框架（例如Spring MVC）漫谈——关于Spring对于多个Web框架的支持
 HTML form表单中action的正确写法

原文地址：https://www.cnblogs.com/qwer123666/p/6952230.html

一阶段项目 首页

一阶段项目首页