运行效果图：
<!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: 隶书;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
