运行效果图：

<!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><h1style="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><!-- 哈士奇简介 --><h1style="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"><h1style="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: 隶书;
}

2020大二HTML5期末课业相关推荐

  1. 大数据：大二上期期末感悟及总结

    学期期末总结 一.期末感悟 1.个人感悟 2.知识积累 3.谦卑心理 4.利用好碎片时间 5.为学历添砖加瓦 6.寒假计划 二.比赛经历及所获荣誉 1.全国高校计算机挑战赛office赛项 2.蓝桥杯 ...

  2. HTML+CSS大作业HTML5期末大作业 旅游酒店网站设计——旅游酒店服务预订(1页) web网页设计—— 出游

    HTML5期末大作业:旅游酒店网站设计--旅游酒店服务预订(1页) web网页设计-- 出游 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒 ...

  3. HTML+CSS大作业HTML5期末大作业`生活类购物商城网站设计——生活类购物商城模板(2页)

    HTML5期末大作业 文章目录 HTML5期末大作业 一.作品展示 二.文件目录 三.代码实现 一.作品展示 二.文件目录 三.代码实现 <!DOCTYPE html> <html& ...

  4. 2020大二下期学期计划

    已经步入大二下期,即将面临实习工作,所以在最关键时候布置自己的学期计划,内容为检讨.计划,执行步骤. 检讨: 1.经过自己的检讨,在学习方面有明显怠慢,最关键的时期,在专业学习这方面有明显的不上心,没 ...

  5. 大二web期末大作业——动漫海贼王（可以很好的应付老师的作业）

    HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

  6. 北邮大二大物期末_北京邮电大学2015大学物理期末考试试题.pdf

    北京邮电大学2015大学物理期末考试试题 北京邮电大学2015--2016学年第 一 学期 <大学物理B (下)>期末考试试题 考 一.学生参加考试须带学生证或学院证明,未带者不准进入考场 ...

  7. 北邮大二大物期末_洛阳理工学院大学物理学(北京邮电大学版)期末考试题1

    一.选择题 (每小题2分,共20分) 1．在电场中的导体内部:( ) A ．电场和电势均为零: B ．电势和表面电势相等: C ．电场不为零,电势均为零: D ．电势低于表面电势. 2．如图1-1所示 ...

  8. 【数据库】北邮国际学院大二下期末复习

    期末背诵 1 Data: facts and statistics collected together for reference or analysis. 数据:收集起来供参考或分析的事实和统计数 ...

  9. 2017大二上期末总结

    今天给学弟学妹们监考,本想补昨晚比赛的题,但是限制了外网,我就做一下期末总结吧. 回想一下这一学期,突然觉得好快,真的感觉还没有学到什么东西就过完了,看着学弟学妹们现在高昂的比赛劲头,突然感觉明天的比 ...

最新文章

  1. mv命令（移动和重命名）
  2. 09.20类类型random
  3. 创建型设计模式（单例模式）
  4. 比较有意思的比较内表的小函数
  5. jax-rs jax-ws_在JAX-RS中使用@Context [第1部分]
  6. linux touch权限不够,Linux下的Access、Modify、Change ， touch的使用以及权限问题
  7. 腾讯、网易、新浪新闻网站爬虫编写记录及评论格式分析
  8. 【修订版】C#/ASP.Net 面试题及答案（1）
  9. word文档在线预览解决方案
  10. 深度学习一(PyTorch物体检测实战)
  11. 宝利通视频会议常见故障
  12. 几行代码教你轻松瓜分双十一20亿红包
  13. linewidth方法html,HTML canvas lineWidth用法及代码示例
  14. 不错的javascript极品日历
  15. NLM_B-A non-local algorithm for image denoising分享
  16. 历史性一刻，中国航天器首次登上火星！！！
  17. 被final修饰的变量到底能不能被修改
  18. 有时候来不及去菜场，我就会给多头绒泡菌叫外卖，它真的很喜欢吃平菇 | 曳尾菌 一席第719位讲者...
  19. 谴责那些没有良知的人
  20. python画函数图像网格_如何基于Python Matplotlib实现网格动画

热门文章

  1. html css animate,animate.css的使用方法
  2. 金色新版萝卜影视系统源码+影视系统APP源码
  3. C++ 计算多边形的面积，计算IOU
  4. GraphicsMagick实现云服务商基础图片处理
  5. 手机算不算计算机系统,现在的手机是不是和电脑一样是组装机
  6. 小度计算机笔记,“一场无速记发布会”，小度真无线智能耳机革新语音笔记功能...
  7. 苹果电脑重置登录密码
  8. kubernetes-StorageClass介绍
  9. 极客评论：使用Screamer广播播放和录制网络广播
  10. Java知识点串讲之面向对象简述