运行效果图：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>萌宠之家</title><link rel="icon" type="image/x-icon" href="img/weblogo.ico"/><link rel="stylesheet" type="text/css" href="css/center.css"/>
</head>
<body><header><!-- 网页logo --><a href="index.html" class="logo"><img src="img/logo.png" alt="logo"><p>萌宠之家</p></a><!-- 头部菜单 --><div class="tcd"><ul><li><a href="#">热点宠物</a><ul><li><a href="#">中华田园猫</a></li><li><a href="#">哈士奇</a></li><li><a href="#">英国短尾猫</a></li><li><a href="#">拉布拉多</a></li></ul></li><li><a href="#">宠物用品</a><ul><li><a href="#">宠物粮</a></li><li><a href="#">宠物玩具</a></li><li><a href="#">宠物砂</a></li><li><a href="#">宠物窝</a></li></ul></li><li><a href="#">宠物知识</a><ul><li><a href="#">猫的习性</a></li><li><a href="#">日常养护</a></li><li><a href="#">养猫注意事项</a></li><li><a href="#">猫各类病特征</a></li></ul></li><li><a href="#">服务</a><ul><li><a href="#">养猫培训</a></li><li><a href="#">宠物疫苗</a></li><li><a href="#">宠物寄养</a></li><li><a href="#">宠物丧葬</a></li></ul></li><li><a href="#">联系</a></li><li><a href="#"><img src="img/header/gwc.png" alt="购物车" style="vertical-align:middle"></a></li></ul></div><script type="text/javascript" src="js/jquery-3.5.1.min.js"></script><script type="text/javascript" src="js/carousel.js"></script><!-- 名言轮播 --><div class="quotation"><ul class="quotation_list"><li><h2>There is no better gift than the love and care of a cat.</h2><h4>——— Charles Dickens</h4></li><li><h1>Dogs are the only creatures that love you more than you love yourself</h1><h4>——— Winlu, German writer</h4></li> <li><h1>Money may buy a fine dog, but not the wag of its tail.</h1><h4>——— Henry Wheeler Shaw</h4></li> </ul><!-- 左右箭头 --><a href="#" class="leftBtn"></a><a href="#" class="rightBtn"></a></div><!-- 猫爪下拉 --><div class="mz"><a href="#center"><img src="img/header/mz.png" alt="猫爪"/></a></div></header><article id="center"><!-- 热点宠物 --><div class="HotPet"><h1>热点宠物</h1> <!-- 中华田园猫 --><div class="RuralCat"><img src="img/zytd/1-1.jpg"/><!-- 三角形 --><div class="sjx"></div><!-- 中华田园猫简介 --><div class="nr"><!-- 幕布 --><div><a href="#" class="CurtainFont">更多详情</a></div><h1 style="text-align: left;">中华田园猫</h1><a href="#">中华田园猫也被称为本地猫，中国的花园猫非常依赖和忠诚于它们的主人，如果它们从小就被养大，它们没有很强的领土意识，可以和其他宠物混合在一起。</a></div></div><!-- 哈士奇 --><div class="husky"><img src="img/zytd/1-2.jpg"/><!-- 三角形 --><div class="sjx"></div><div class="nr"><!-- 幕布 --><div><a href="#" class="CurtainFont">更多详情</a></div><!-- 哈士奇简介 --><h1 style="text-align: right;">哈士奇</h1><a href="#">西伯利亚雪橇犬，常见别名哈士奇，俗名为二哈。是一种中型犬，西伯利亚雪橇犬是原始的古老犬种，哈士奇名字的由来，是源自其独特的嘶哑声。哈士奇性格多变，有的极端胆小，也有的极端暴力，进入大陆和家庭的哈士奇，都已经没有了这种极端的性格，比较温顺。与金毛犬、拉布拉多并列为三大无攻击性犬类。</a></div></div></div><div class="team"><h1>专业团队</h1><div><img src="img/zytd/2-1.jpg"/ alt="英国短尾猫"><!-- 三角形 --><div class="sjx"></div><!-- 成员介绍 --><div><!-- 幕布 --><div><a href="#" class="CurtainFont">更多详情</a></div><!-- 简介 --><h1>张四丰</h1><p>张四丰吴当宠物大学毕业，20年以上从业经验，有业界标杆之称的男人，培养过无数优秀的宠物</p></div></div><div><img src="img/zytd/2-2.jpg"/ alt="金毛"><!-- 三角形 --><div class="sjx"></div><!-- 成员介绍 --><div><!-- 幕布 --><div><a href="#" class="CurtainFont">更多详情</a></div><!-- 简介 --><h1>黄小蓉</h1><p>黄小蓉桃花岛宠物大学毕业，18年以上从业经验，有业界标杆之称，培养过无数优秀的宠物</p></div></div><div><img src="img/zytd/2-3.jpg" alt="猫"/><!-- 三角形 --><div class="sjx"></div><!-- 成员介绍 --><div><!-- 幕布 --><div><a href="#" class="CurtainFont">更多详情</a></div><!-- 简介 --><h1>林巢英</h1><p>林巢英古墓宠物大学毕业，20年以上从业经验，有业界标杆之称，培养过无数优秀的宠物</p></div></div><div><img src="img/zytd/2-4.jpg" alt="狗"/><!-- 三角形 --><div class="sjx"></div><!-- 成员介绍 --><div><!-- 幕布 --><div><a href="#" class="CurtainFont">更多详情</a></div><!-- 简介 --><h1>唉因斯坦</h1><p>唉因斯坦苏离事大学毕业，80年以上从业经验，被誉为业界扛把子，培养过无数优秀的宠物</p></div></div></div><!-- 宠物用品 --><div class="petSupplies" id="b"><!-- 显示栏目名称 --><h1>宠物用品</h1><!-- 左边长图 --><a href="#"><img src="img/zytd/001.jpg" alt="001" /></a><!-- 量贩装模块 --><div><div><a href="#">量贩装</a><a href="#"><p><i></i>宠物主粮食</br><span>第二件0元</span></p><img src="img/zytd/002.jpg" alt="002" /> </a></div></div><div><a href="#"><img src="img/zytd/003.jpg"/><p>品尼高狗粮40斤装20kg拉布拉多金毛泰迪等小中大型犬成犬幼犬通用型<br><span>￥59.9</span></p></a></div><div><a href="#"><img src="img/zytd/004.jpg"/><p>伟嘉 成猫猫粮 10kg海洋鱼味 布偶蓝猫橘猫加菲英短猫咪全价粮<br><span>￥198.8</span></p></a></div><div><a href="#"><img src="img/zytd/005.jpg"/><p>HELLOJOY狗厕所蓝色大号大型犬自动泰迪狗狗用品尿盆便盆<br><span>￥38.8</span></p></a></div><div><a href="#"><img src="img/zytd/006.jpg"/><p>猫狗梳子猫毛清理器猫毛梳猫刷子脱毛梳梳毛器狗毛梳子<br><span>￥18.8</span></p></a></div><div><a href="#"><img src="img/zytd/007.jpg"/><p>【柔软舒适】狗窝猫窝 秋冬季加绒加厚保暖窝让宠物温暖秋冬<br><span>￥98.8</span></p></a></div><div><a href="#"><img src="img/zytd/008.jpg"/><p>派乐特 猫碗猫盆宠物猫咪狗狗碗狗盆喝水饮水小猫小狗泰迪饭食盆 爱心碗<br><span>￥28.8</span></p></a></div> </div><!-- 宠物相册 --><div class="PetPhotoAlbum"><h1 style="border-bottom: 1px solid #000000;">宠物相册</h1><div><img src="img/zytd/01.jpg" alt="01"><img src="img/zytd/02.jpg" alt="02"><img src="img/zytd/03.jpg" alt="03"><img src="img/zytd/04.jpg" alt="04"><img src="img/zytd/05.jpg" alt="05"><img src="img/zytd/06.jpg" alt="06"><img src="img/zytd/07.jpg" alt="07"><img src="img/zytd/08.jpg" alt="08"></div><audio controls="controls"><source src="小潘潘%20-%20学猫叫.mp3"></source><source src="小潘潘%20-%20学猫叫%20.ogg"></source>浏览器不支持</audio></div></article><footer><div><!-- 快速联系 --><div class="menu"><form><h1>快速联系</h1><input value="姓名" onfocus="this.value='';" onblur="if(this.value == '') {this.value = '姓名';}"/><input value="电子邮箱" onfocus="this.value='';" onblur="if(this.value == '') {this.value = '电子邮箱';}"/><textarea cols="77" rows="6" onfocus="this.value='';" onblur="if(this.value == '') {this.value = '信息';}"/>信息</textarea><input type="submit" value="发信息"/></form></div><!-- 宠物领养 --><div class="PetAdoption"><h1><a href="#">宠物领养</a></h1><div><a href="#"><h6>哈士奇</h6><ul><li></li><li></li><li></li><li></li><li></li></ul><p><span>$3200.0</span>$2900</p></a><a href="#"><img src="img/footer/01.jpg"></a></div><div><a href="#"><h6>中华田园猫</h6><ul><li></li><li></li><li></li><li></li><li></li></ul><p><span>$3200.0</span>$2900</p></a><a href="#"><img src="img/footer/02.jpg"></a></div><div><a href="#"><h6>玄凤鹦鹉</h6><ul><li></li><li></li><li></li><li></li><li></li></ul><p><span>$3200.0</span>$2900</p></a><a href="#"><img src="img/footer/03.jpg"></a></div></div><!-- 网页介绍 --><div class="WebProfile"><a href="#"><img src="img/logo.png" alt="logo"/></a><p><span>宠物之家</span><br/>一家专门提供宠物从出生到安葬的网站</p><p>门店位置：广州市增城区朱村大道XXX</p><p><i></i>+123456789</p><p><i></i>语言主题</p><p><a href="#"><i></i>zzw@Pets.com</a></p><p><a href="#"><i></i>https://Pets.com</a></p></div></div><!-- 版权信息 --><div><h4>@该网页不做任何商业行为，本网站出现任何图片都与本人无关，版权归原作者所有</h4></div></footer>
</body>
</html>
*{margin: 0;padding: 0;text-decoration: none;
}/* 头部样式 */
body>header{box-sizing: border-box;width: 1518px;height: 720px;background-color: #fcfff3;position: relative;z-index: 1;background-image: url(../img/header/bj.jpg); background-repeat: no-repeat;background-size:100%;
}/* 网页loog样式 */
header>.logo{margin: 25px 55px;display: inline-block;
}
.logo>img{width: 130px;border-radius: 50%;
}
/* 自定义字体 */
@font-face {font-family: FZJZJW;src: url(../font/FZJZJW.ttf);
}.logo>p{text-align: center;color: #000000;font-family: FZJZJW;font-size: 30px;
}/* 头部菜单 */
.tcd{position: absolute;top: 40px;right: 65px;
}.tcd>ul>li{padding: 5px 20px;display: inline-block;font-family: FZJZJW;display: inline-block;text-align: center;border: 0px solid #000000;
}.tcd>ul>li:hover{position: relative;background-color: #278DF2;transition: all;border-radius: 10px;transition-duration: 1s;box-shadow: 5px 5px 6px #848484;padding: 5px 20px;
}.tcd>ul>li>a{display: inline-block;color: #edff20;font-size: 23px;font-weight: 700;text-shadow: 3px 3px 3px #cecece;
}/* 头部二级菜单样式 */
.tcd>ul>li>ul{position: absolute;left: 0;top: 35px;overflow: hidden;opacity: 0;visibility: hidden;
}.tcd>ul>li:hover ul{background-color: rgba(255, 255, 127, 0.5);border-radius: 10px;transition: all;opacity: 1;visibility: visible;transition-duration: 1s;
}.tcd>ul>li>ul>li{list-style: none;width: 200px;
}.tcd>ul>li>ul>li>a{display: inline-block;color: #ffcb0f;font-size: 17px;padding: 3px;padding-left: 20px;text-align: left;width: 100%
}.tcd>ul>li>ul>li:nth-last-of-type(1n+2){border-bottom: 1px solid salmon;}.tcd>ul>li>ul>li>a:hover{background-color: #fffae1;border-radius: 10px;transition-duration: 2s;
}
/* 名言样式 */
.quotation{width: 680px;height: 155px;/* border: 1px solid #000000; */margin: 20px auto;
}
.quotation_list{position: relative; /* overflow: hidden */;}
.quotation_list>li{list-style: none;position: absolute;left: 0;top: 0;color: #ffffff;font-family: "blackadder itc";font-size: 30px;text-align: center;display: none;
}
.quotation_list>li:nth-child(1){display: block;}
.quotation_list>li>h4{text-align: right;}/* 左右箭头样式 */
.leftBtn{position: absolute;top: 45%;left: 20px;opacity: 0.7;width: 58px;height: 60px;background: url(../img/zytd/slid.png) no-repeat -8px -4px;
}
.rightBtn{position: absolute;top: 45%;right: 20px;opacity: 0.7;width: 58px;height: 60px;background: transparent url(../img/zytd/slid.png) no-repeat -83px -4px;
}
.rightBtn:hover,.leftBtn:hover{background-color: rgb(46, 30, 127);border-radius: 10px;
}
/* 猫爪样式 */
header>.mz{display: inline-block;position: absolute;z-index: 2;left: 45%;bottom: 0;transition: 2s all;-webkit-transition: 2s all;-moz-transition: 2s all;-o-transition: 2s all;-ms-transition: 2s all;
}.mz:hover{border-radius: 50px;background-color: #00BFFF;}.mz>a>img{width: 120px;}/* 内容样式 */
#center{width: 1518px;height: 100%;padding-bottom: 85px;border-bottom: 1px solid #000000;
}/* 热点宠物 */
/* 热点宠物字体样式 */
#center>div>h1{text-align: center;padding: 30px 0;font-size: 40px;
}
/* 中华田园猫样式 */
.HotPet>div{overflow: hidden;margin-left: 8px;margin-bottom: 8px;border: 0px solid #000000;position: relative;
}
/* 热点宠物图片统一样式 */
.HotPet>div>img{width: 500px;height: 400px;
}
/* 中华田园猫图片样式 */
.RuralCat>img{float: left;}
/* 哈士奇图片样式 */
.husky>img{float: right;}/* 热点宠物三角形统一样式 */
.sjx{background:url(../img/zytd/arw1.png) no-repeat 0px 0px;width: 32px;height: 36px;display: block;
}
/* 中华田园猫三角形样式 */
.RuralCat>.sjx{position: absolute;z-index: 3;left: 500px;top: 30px;
}
/* 哈士奇三角形样式 */
.husky>.sjx{position: absolute;z-index: 3;right: 500px;top: 30px;transform: rotate(180deg);
}
/* 热点宠物介绍统一div样式 */
.HotPet>div>.nr{overflow: hidden;position: relative;height: 400px;background-color: #0055A4;
}
/* 幕布样式 */
.nr>div{overflow: hidden;width: 100%;height: 100%;position: absolute;top: 0;left: -64.125rem;background-color: rgb(255, 170, 0,0.7);transition: left;transition-duration: 1s;
}
/* 幕布字体统一样式 */
.CurtainFont{display: block;font-size: 40px;font-weight: 900;color: #ffffff;font-family: FZJZJW;border: 3px solid #ffffff;text-align: center;width: 300px;margin: 171px auto;transition: color,border-radius,border;transition-duration: 1s;
}
/* 鼠标经过幕布字体样式 */
.CurtainFont:hover{color: #000000;border: 3px solid #000000;border-radius: 20px;
}
/* 鼠标经过某个热点宠物简介样式: 拉出幕布 */
.nr:hover div{position: absolute;left: 0;
}/* 简介样式样式 */
.nr>h1{color: #ffffff;font-size: 30px;margin : 35px 80px;}.nr>a{display: inline-block;overflow: hidden;font-size: 30px; text-indent: 2em;line-height: 45px;font-family: 隶书;color: #000000;box-sizing: border-box;height: 295px;margin: 0 20px;
}/* 专业团队模块 */
.team{box-sizing: border-box;width: 1518px;height: 735px;/* border: 1px solid #000000; */
}
.team>div{box-sizing: border-box;width: 758px;height: 300px;margin-bottom: 20px;background-color: #0055A4;position: relative;
}
/* 边框浮动排版 */
.team>div:nth-child(odd){float: right;}
.team>div:nth-child(even){float: left;}
/* 图片样式 */
.team>div>img{box-sizing: border-box;width: 319.74px;height: 100%;
}.team>div>img:nth-of-type(1n + 3){float: right;}
.team>div:nth-of-type(1n + 3)>div:nth-child(3){float: left;}/* 三角形样式 */
.team>div>.sjx{overflow: hidden;position: absolute;top: 30px;left: 319.74px;z-index: 3;
}
.team>div:nth-of-type(1n + 3)>.sjx{transform: rotate(180deg);position: absolute;left: 405px;top: 30px;
}/* 成员介绍样式 */
.team>div>div:nth-child(3){position: relative;overflow: hidden;float: right;width: 438px;height: 100%;
}
/* 幕布样式 */
.team>div>div>div{width: 438px;height: 300px;background-color: rgb(255, 170, 0,0.7);position: absolute;left: -438px;top: 0;transition: left 1s;-webkit-transition: left 1s;-moz-transition: left 1s;-o-transition: left 1s;-ms-transition: left 1s;
}
/* 幕布字体样式 */
.team>div>div>div>a{margin: 123px auto;}
/* 鼠标经过幕布样式： 幕布滑动 */
.team>div>div:nth-child(3):hover div{left: 0;}/* 简介字体样式 */
.team>div>div>h1{text-align: center;margin-top: 55px;font-family: "微软雅黑";
}
.team>div>div>p{margin: 20px auto;font-size: 25px;text-indent: 2em;width: 320px;font-family: 隶书;
}/* 宠物用品模块
* 左边长图
*/
.petSupplies{box-sizing: border-box;width: 1440px;margin: 0 auto;overflow: hidden;margin-bottom: 80px;
}
.petSupplies>a>img{width: 277.6px;height: 700px;float: left;/* margin-right: 13px; */
}
.petSupplies>a>img:hover{opacity: .7;}
/*
* 量贩装模块最外div*/
.petSupplies>div:nth-child(3){overflow: hidden;box-sizing: border-box;width: 568.2px;height: 342.2px;background-color: #ffffff;padding: 10px;
}
.petSupplies>div:nth-child(3):hover img{opacity: .7;}
/* 第二层div */
.petSupplies>div:nth-child(3)>div{position: relative;width: 545.2px;height: 320px;background-color: #fffef0;overflow: hidden;box-shadow: 0 2px 8px 0 rgba(0,0,0,.09);
}
/* 第二层div内量贩装字体样式 */
.petSupplies>div:nth-child(3)>div>a:nth-child(1){display: block;color: #ffffff;background-color: #00b262;width: 274.1px;font-size: 23px;text-align: center;padding: 16px 0;
}
/* 第三层盒子样式 */
.petSupplies>div:nth-child(3)>div>a:nth-child(2){overflow: hidden;display: block;width: 548.2px;height: 100%;background-color: #ffffff;
}
/* 第三层盒子字体样式 */
.petSupplies>div:nth-child(3)>div>a:nth-child(2)>p{width: 400px;height: 96px;margin: 0;color: #00b262;font-size: 23px;font-weight: 900;background: url(../img/zytd/002-2.png) no-repeat;position: absolute;left: 0;bottom: 48px;padding: 10px 0 0 37px;line-height: 35px;background-size: 356px 100px;z-index: 99;
}
/* 第三层盒子字体左边日历图标样式 */
.petSupplies>div:nth-child(3)>div>a:nth-child(2)>p>i{display: inline-block;width: 23px;height: 23px;background: url(../img/zytd/002-3.png) no-repeat;vertical-align: middle;
}
/* 第三层盒子黑色字体样式 */
.petSupplies>div:nth-child(3)>div>a:nth-child(2)>p>span{color: #000000;font-weight: normal;font-size: 20px;
}
/* 第三层盒子图片样式 */
.petSupplies>div:nth-child(3)>div>a:nth-child(2)>img{float: right;padding-top: 23px;padding-right: 37px;
}/* 宠物用品其他各div统一样式 */.petSupplies>div{overflow: hidden;box-sizing: border-box;width: 277.6px;height: 342.2px;margin-left: 13px;float: left;background-color: #ffffff;padding: 10px;border: 1px solid #ffffff;
}.petSupplies>div:nth-of-type(1n + 2):hover{opacity: .7;border: 1px solid red;}/* 第二排div上边距样式 */.petSupplies>div:nth-of-type(1n + 4){margin-top: 15px; }.petSupplies>div>a{color: #000000;}
/* 宠物用品其他各div的图片样式 */.petSupplies>div>a>img{display: block;width: 210px;margin: 0 auto;
}
/* 宠物用品其他各div的字体样式 */
.petSupplies>div>a>p{text-align: center;line-height: 26px;
}
.petSupplies>div>a>p>span{color: #ff0000;font-size: 20px;font-weight: 700;
}/* 宠物相册模块 */
.PetPhotoAlbum{perspective: 800px;height: 530px;width: 1380px;margin: 0 auto;border: 1px solid #000000;border-radius: 27px;
}
.PetPhotoAlbum>div{width: 200px;height: 200px;position: relative;transform-style: preserve-3d;margin: 80px auto;animation: Pet_photo_album 10s infinite linear;-webkit-animation: Pet_photo_album 10s infinite linear;-moz-animation: Pet_photo_album 10s infinite linear;
}
.PetPhotoAlbum>div>img{width: 200px;height: 200px;position: absolute;border-radius: 10px;
}
/* 定位图片位置 */
.PetPhotoAlbum>div>img:nth-child(1){transform: rotateY(360deg) translateZ(-285px);}
.PetPhotoAlbum>div>img:nth-child(2){transform: rotateY(-135deg) translateZ(285px);}
.PetPhotoAlbum>div>img:nth-child(3){transform: rotateY(-90deg) translateZ(285px);}
.PetPhotoAlbum>div>img:nth-child(4){transform: rotateY(-45deg) translateZ(285px);}
.PetPhotoAlbum>div>img:nth-child(5){transform: rotateY(0deg) translateZ(285px);}
.PetPhotoAlbum>div>img:nth-child(6){transform: rotateY(45deg) translateZ(285px);}
.PetPhotoAlbum>div>img:nth-child(7){transform: rotateY(90deg) translateZ(285px);}
.PetPhotoAlbum>div>img:nth-child(8){transform: rotateY(135deg) translateZ(285px);}
/* 旋转动画 */
@keyframes Pet_photo_album
{from{transform: rotateY(0deg)}to{transform: rotateY(360deg)}
}.PetPhotoAlbum>audio{margin-left: 40%;
}/* 页尾模块 */
footer{overflow: hidden;background-color: #ececec;
}
footer>div:nth-child(1){overflow: hidden;box-sizing: border-box;width: 1185px;margin: 0 auto;padding-bottom: 50px;border-bottom: 3px solid #000000;margin-bottom: 50px;
}
/* 页尾表单 */
footer>div>.menu{box-sizing: border-box;width: 380px;float: left;overflow: hidden;margin: 0 auto;
}
/* 表单 */
div>.menu>form{box-sizing: border-box;width: 380px;
}
/* 表单标题 */
.menu>form>h1{text-align: center;margin: 30px 0;border-bottom: 0.0625rem solid #000000;
}
/* 表单栏目样式 */
.menu>form>input,textarea{box-sizing: border-box;width: 380px;font-size: 20px;padding: 10px 8px;margin: 10px 0;color: #dddddd;
}
/* 提交表单按钮样式 */
.menu>form>input:nth-child(5){box-sizing: border-box;height: 46.4px;border: 1px solid #ff0000;background-color: #ff0000;color: #000000;border: none;
}
.menu>form>input:nth-child(5):hover{background-color: #ffffff; border: 1px solid #000000;
}/* 宠物领养模块 */
.PetAdoption{box-sizing: border-box;width: 380px;float: left;overflow: hidden;margin-left: 45px;
}
/* 宠物领养模块标题样式 */
.PetAdoption>h1{border-bottom: 0.0625rem solid #000000; text-align: center;margin: 30px 0;
}
.PetAdoption>h1>a{color: #000000;}/* 字体区 */
.PetAdoption>div{margin-bottom: 10px;}
.PetAdoption>div>a{display: inline-block;vertical-align: middle;margin-left: 10px;
}
.PetAdoption>div>a>h6{color: #000000;font-size: 18px;text-align: center;width: 105px;
}
/* 列表星星样式 */
.PetAdoption>div>a>ul>li{width: 16px;height: 16px;background: url(../img/img-sprite.png) no-repeat -108px -104px;display: inline-block;
}
/* 领养价格样式 */
.PetAdoption>div{overflow: hidden;}
.PetAdoption>div>a>p{font-size: 17px;color: #000000;
}
.PetAdoption>div>a>p>span{text-decoration: line-through;font-size: 13px;color: #b5b5b5;margin-right: 5px;
}/* 宠物图片样式 */
.PetAdoption>div>a:nth-child(2){display: inline-block; margin-left: 160px;
}
.PetAdoption>div>a>img{width: 98px; height: 98.5px;border: 0.0625rem solid #000000;float: right;
}/* 网页简介模块样式 */
.WebProfile{box-sizing: border-box;width: 380px;overflow: hidden;float: left;margin-top: 90px;
}
/* 网页logo行样式 */
.WebProfile>a{display: inline-block;margin-left: 22px;
}/* 网页logo图片样式 */
.WebProfile>a>img{width: 120px;}
/* 网页简介字体样式 */
.WebProfile>p:nth-child(2){width: 160px;text-align: center;line-height: 28px;float: right;margin-top: -5px;margin-right: 35px;font-family: 隶书;
}
/* 萌宠之家字体样式 */
.WebProfile>p>span{font-size: 25px;font-weight: 900;margin-left: 20px;overflow: hidden;line-height: 55px;font-family: 微软雅黑;
}/* 门店地址样式 */
.WebProfile>p:nth-child(3){text-align: center;}
/*设置雪碧图 */
.WebProfile i{display: inline-block;width: 25px;height: 25px;vertical-align: middle;background:url(../img/img-sprite.png) no-repeat;
}
/*雪碧图位置定位 */
.WebProfile>p:nth-child(4)>i{background-position: -148px -105px;}
.WebProfile>p:nth-child(5)>i{background-position: -172px -105px;}
.WebProfile>p:nth-child(6)>a>i{background-position: -199px -105px;}
.WebProfile>p:nth-child(7)>a>i{background-position: -224px -105px;}
.WebProfile>p:nth-of-type(1n + 3){margin-left: 50px;}
.WebProfile>p{line-height: 40px;}
.WebProfile>p:nth-of-type(1n + 5)>a{display: inline-block; width: 100%;}
.WebProfile>p>a{color: #000000;}
.WebProfile>p:nth-of-type(1n + 5)>a:hover{color: red;}footer>div:nth-child(2){text-align: center;font-family: 隶书;
}
