qq音乐（css部分）

kkisnow

已于 2024-06-26 18:22:31 修改

阅读量1.3k

点赞数 33

文章标签：前端 css

于 2024-06-26 18:22:00 首次发布

本文链接：https://blog.csdn.net/2301_80009066/article/details/139995877

版权

*{
   margin: 0;
   padding: 0;
}
ul,li{
   list-style: none;
}
a{
   text-decoration: none;
}
.head-all{
   width: 100%;
   height: 142px;
   background-color: #fff;
}

.top{
   width: 1200px;
   height: 90px;
   margin:0 auto;
   border-bottom: 1px solid #ccc;
}
.top .logo{
   float: left;
   padding: 0 20px;
   margin-top: 19px;

}
.top .head-r{
   float: left;

}
.top .head-r .list{
   float: left;
}
.top .head-r .list li{
   height: 90px;
   line-height: 90px;
   text-align: center;
   float: left;
   padding: 0 20px;
}
.top .head-r .list li a{
   color: #000;
   font-size: 18px;/* 字体大小 */
   font-family: "微软雅黑";
}
.top .head-r .list .active{
   background-color:#31c27c ;
}
.top .head-r .list .active a,
.top .head-r .list .active a:hover/* 不改变音乐馆的颜色 */
{
   color: white;
}
.top .head-r .list a:hover{
   color: #31c27c;
}
.mark{
   position: absolute;
   top: 18px;
   height: 14px;
   width: 37px;
   left: 630px;
}
.searh{
   float: left;
   width: 220px;
   height: 38px;
   margin-top: 26px;
   border: 1px solid #ccc;
   border-radius: 2px;
   margin-right: 25px;
}
.login{
   float: left;
}
.searh .searh-1{
   width: 174px;
   height: 36px;
   line-height: 36px;
   font-size: 14px;
   border: none;
   margin-left: 11px;
   outline: none;
   color: #000;

}
.searh .searh-2{
   width: 16px;
   height: 16px;
   margin-bottom: -3px;
   background-image: url("../img/icon_sprite.630b3e60.png");
   background-position-x: 0px;
   background-position-y:-39px ;
   /* background-image: url(../img/icon_sprite.630b3e60.png);
   background-image: -webkit-image-set(url(../img/icon_sprite.630b3e60.png) 1x,
   url(../img/icon_sprite.630b3e60.png) 2x); */
   border: none;
   background-color:white;

}

.login li{
   float:left;
   text-align: center;
   margin-right: 10px;
}
.login .active-login a:hover{
   color: #31c27c;
}

.login .active-login{
   display: block;
   height: 90px;
   line-height: 90px;
   color: #000;
}
.login-vip{
   display: block;
   width: 115px;
   height: 40px;
   line-height: 40px;
   border-radius: 2px;
   margin-top: 25px;
   background-color: #31c27c;
   border-color: #31c27c;
   color: #fff;
   transition: all 1s linear;
}
.login-vip::after{
   position: absolute;
   content: "";
   right: 285px;
   top: 43px;
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 6px solid;

}
/* .login-vip:hover{
   background-color: aqua;
   transform: translate(100px, 200px);
} */
.login-recharge{
   display: block;
   width: 80px;
   height: 40px;
   line-height: 40px;
   border-radius: 2px;
   margin-top: 25px;
   border: 1px solid #ccc;
   color: #000;
}
.select__box {
display: none;
position: absolute;
width: 100%;
left: 0;
top: 38px;
z-index: 10;

}
.select__item {
position: relative;
line-height: 40px;
cursor: pointer;
text-align: center;
white-space: nowrap;
background-color: #fff;
border: 1px solid #c9c9c9;
border-top: none;
}
.select__box:hover {
   background-color: #ff557f;

}
/* .head-bo{
   width: 1250px;
   height: 52px;

} */
.head-b{
width: 900px;
margin: 0 auto;
margin-top: 10px;
}
.head-b :hover {
color: #31C37C;
}

.head-b span{
display: block;
   float: left;
   margin: 0 auto;
margin-left: 35px;
   margin-right: 10px;
   text-align: center;
   line-height: 52px;
}
.bigbox{
   position: relative;
   width: 1580px;
   height: 550px;
   background-color: #f1f1f1;
}
.mod{
   width: 1200px;
   height: 38px;
   text-align: center;
   margin:20px auto;

}
.div7 {
width: 1200px;
margin-top: 80px;
   margin: auto;
text-align: center;
font-size: 30px;
font-weight: bold;
   line-height: 40px;
   padding-top: 4.16667%;
   padding-bottom: 2%;
}

.bigbox .div8 {
width: 1580px;
height: 40px;
background: #f1f1f1;
}

.div8_1 {
width: 1200px;
   height: 50px;
margin: 25px auto;
margin-top: 10px;
   text-align: center;

}

.div8_1 :hover {
color: #31C37C;
}

.div8_1 span {
float: left;
margin-left: 100px;
margin-top: 5px;
   text-align: center;
}
/* .ny{
   width: 220px;
   height: 220px;

}
.ny .ny-1{
   width: 56px;
   height: 56px;
}
.ny .ny-1 i{
   background-image: url(/ryqq/static/media/cover_play.56974e6f.png?max_age=2592000);
   background-image: -webkit-image-set(url(/ryqq/static/media/cover_play.56974e6f.png?max_age=2592000) 1x,
   url(/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000) 2x);
} */
.div8-2 {
width: 1400px;
height: 224px;
margin-top: 20px;
margin-left: 100px;
display: inline-block;
}

.div8-2 .img1 {
margin-left: 84px;
}

.div8-2 img {
width: 224px;
height:224px;
float: left;
margin-left: 20px;
}
.bigbox:hover .span1{
   transform: translate(60px, 0px);
}
.bigbox:hover .span2{
    transform: translate(-60px, 0px);
}
.div8-2 .span1 {
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 2px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
   position: absolute;
   left: -66px;
   background-color: #EAECEA;
   transition: all .3s linear;
}
.div8-2 .span2 {
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 0px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
   position: absolute;
   left: 1540px;
   background-color: #EAECEA;
   transition: all .3s linear;
}
.mod-0{
   width: 245px;
   height: 20px;
   margin: auto;
}
.mod .mod-1{
   display: block;
   float: left;
   width: 10px;
   height: 10px;
   border-radius: 5px;
   background-color: #ccc;
   margin-left: 25px;
}
.div8-3 {
width: 1220px;
height: 70px;
margin-left: 150px;
margin-top: 2px;
   margin: auto;
}

.div8-3 span {
width: 220px;
height: 70px;
display: inline-block;
margin-left: 5px;
   text-align: center;
}
.div8-3 a {
color: #000;
cursor: pointer;
   font-size: 14px;
}

.div8-3 .p1 {
color: #B3B3B3;
}

.div8-3 .p2 {
font-size: 15px;
}

.div8-3 .p3 {
font-size: 14px;
}
.div-9{
   width: 1580px;
   height: 580px;
   background-color: #F9F9F9;
}
.div9-3z .span1 {
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 2px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
   position: absolute;
   left: -300px;
   background-color: #EAECEA;
   transition: all .3s linear;
}
.div9-3z .span2{
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 0px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
   position: absolute;
   top: 2px;
   left: 1390px;
   background-color: #EAECEA;
   transition: all .3s linear;
}
.div-9:hover .span1{
    transform: translate(100px, 0px);
}
.div-9:hover .span2{
   transform: translate(-100px, 0px);
}
.div9-1{
   width: 1580px;
   height: 114px;
   margin:20px auto;
   background-color: #F9F9F9;

}
.div9-1 .h-1{
   text-align: center;
   display: block;
   margin: 0 auto;
   width: 196px;
   height: 40px;
   font-size: 30px;
   font-weight: bold;
   line-height: 40px;
   padding-top: 4.16667%;
   padding-bottom: 2%;

}
.div9-2{
   width: 1200px;
   height: 50px;
   margin: auto;
   background-color: #F9F9F9;
}
.div9-2-active {
width: 100px;
height: 30px;
display: block;
text-align: center;
line-height: 30px;
border: 1px solid #808080;
   float: left;
}
.div-9 .div-9-2-mid{
   width: 600px;
   height: 100%;
   margin: auto;

}
.div-9 .div-9-2-mid a:hover{
   color: #31C37C;
}
.div-9 .div-9-2-mid a{
   margin-left: 30px;
   display: inline-block;
   font-size: 15px;
   margin: 0 24px;
   color: #333;
}
.div9-3z{
   position: relative;
   width: 1200px;
   height:375px;
   margin: auto;
   background-color: #F9F9F9;
}
.div9z-1 {
   position: relative;
width: 1200px;
height: 102px;
margin-top: 20px;
}

.div9z-1 img {
width: 86px;
height: 86px;
}

.div9z-1 a {
   position: relative;
width: 390px;
height: 102px;
background: #F9F9F9;
display: inline-block
}

.div9z-1 .a-2 {
float: right;
}
.div9z-1 .s1-1 {
position: relative;
top: -60px;
}

.div9z-1 .s1-2 {
position: absolute;
top: 35px;
left: 90px;
color: #B3B3B3;
}

.div9z-1 .s1-3 {
position:absolute;
top: 30px;
   left:330px;
color: #B3B3B3;
}
.div10{
   width:1580px;
   height: 418px;
   background-color: #f1f1f1;
}
.div10-2{
   width: 1200px;
   height:236px;
   margin: 20px auto;
}
.div10-2 .span1 {
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 2px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
   position: absolute;
   left: -300px;
   background-color: #EAECEA;
   transition: all .3s linear;
}
.div10-2 .span2{
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 0px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
   position: absolute;
   top: 1450px;
   left: 1579px;
   background-color: #EAECEA;
   transition: all .3s linear;
}
.div10:hover .span1{
    transform: translate(300px, 0px);
}
.div10:hover .span2{
   transform: translate(-100px, 0px);
}
.div10-2 .div10-2-l{
   width: 590px;
   height: 100%;
   float: right;
}
.div10-2 .div10-2-r{
   width: 610px;
   height: 100%;
   float: left;
}
.div10-2 img{
   width: 590px;
   height: 230px;
}
.div11{
   width: 1580px;
   height: 808px;
   background-color: #F9F9F9;

}
.div11 .div-9-2-mid{
   width: 1200px;
   height: 20px;
   margin: auto;
   text-align: center;

}
.div11 .div-9-2-mid a:hover{
   color: #31C37C;
}
.div11 .div-9-2-mid a{
   margin-left: 30px;
   display: inline-block;
   font-size: 15px;

   color: #333;
}
.more-1{
   display: block;
   float: right;
}
.div11-z{
   width: 1200px;
   height: 616px;
   margin: 25px auto;
   background-color: #F9F9F9;
}
.div11-z .span1 {
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 2px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
   position: absolute;
   top: 2092px;
   left: -100px;
   background-color: #EAECEA;
   transition: all .3s linear;
}
.div11-z .span2{
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 0px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
   position: absolute;
   top: 2083px;
   left: 1579px;
   background-color: #EAECEA;
   transition: all .3s linear;
}
.div11:hover .span1{
    transform: translate(100px, 0px);
}
.div11:hover .span2{
   transform: translate(-100px, 0px);
}
.div11-z .div11-z-s{
   width:100%;
   height: 308px;
   background-color: #F9F9F9;
}
.div11-z .div11-z-x{
   width:100%;
   height: 308px;
}
.div11-z .s-1{
   display: block;
   width: 224px;
   height: 283px;
   float: left;
   margin-right: 16px;
}
.div11-z img{
   width: 224px;
   height: 224px;
}
.div11-z p{
   color: #000;
}
.div11-z span{
   color: #999999;
}
.div12{
   width: 1580px;
   height: 675px;
   color: #F9F9F9;
}
.div12 .div12-1{
   width: 1200px;
   height: 50px;
   margin: 25px auto;
}
.div12 .div12-1 a{
   color: #000;
}
.div12-1 a:hover{
   color: #31C37C;
}
.div12-1 h1{
   text-align: center;
   display: block;
   margin: 0 auto;
   width: 196px;
   height: 40px;
   font-size: 30px;
   font-weight: bold;
   line-height: 40px;
   padding-bottom: 2%;
   color: #000;

}
.div12-1 .g{
   display: block;
   float: right;
   margin-top: -55px;
}
.div12 .div12-2{
   width: 1200px;
   height: 500px;
   margin: 0 auto;
   background-color:white;

}
.div12 .div12-2 ul{
   width: 1200px;
   height: 500px;
   margin: 0 auto;
}
.div12 .div12-2 ul li{
   width: 224px;
   height: 500px;
   float: left;
   margin-left: 16px;
   position: relative;
}
.div-color{
left: 0;
right: 0;
height: 500px;
background-position-x: 0px;
background-position-y:-39px ;
   background-image: url("../img/bg_index_top.png");
}
.div-color-3{
left: 0;
right: 0;
height: 500px;
background-position-x: 449px;
   background-image: url("../img/bg_index_top.png");
}
.div-color-4{
left: 0;
right: 0;
height: 500px;
background-position-x: 672px;
   background-image: url("../img/bg_index_top.png");
}
.div-color-5{
left: 0;
right: 0;
height: 500px;
background-position-x: 224px;
   background-image: url("../img/bg_index_top.png");
}
.div12-2 .div12-z{
   position: absolute;
   right: 10px;
   top: 60px;
   width: 200px;
   height: 57px;

}
.div12-z h3{
   text-align: center;
   color: #FFFFFF;
   font-weight: 300;
}
.text{
   float: none;
   height: 36px;
   font-size: 26px;
   color: #fff;
   font-weight: 400;
}
/* .div-i{
   width: 50px;
   height: 50px;
   margin: 0 auto;
   position: absolute;
   top: 30px;
} */
.icon{
   position: absolute;
   left: 50%;
   top: 100px;
   margin-left: -18px;
   width: 36px;
   height: 2px;
   background: #fff;
}
.div12-2 .div12-x ul{
   position: absolute;
   top: 200px;
   left: 30px;
   width: 164px;
   height: 222px;

}
.div12-2 .div12-x ul li{
   width: 164px;
   height: 68px;
}
.div-m{
   width: 149px;
   height: 21px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.div12-x a{
   display: block;
   width: 150px;
   color: #fff;
   font-size: 14px;
}
.h-0{
   position: absolute;
top: 188px;
left: 30px;
right: 30px;
white-space: nowrap;
}
.div-num{
   position: absolute;
   top: 0;
   left:-15px;
   color: #FFFFFF;
}
.div-color-2{
   width: 224px;
   height: 500px;
   background-image: url("../img/bg_index_top.png");
   background-position-x: -224px;
}
.div-13{
   width: 1580px;
   height: 700px;
   background-color: #f9f9f9;
}
.div-13 .div-9-2-mid{
   width: 1200px;
   height: 20px;
   margin: auto;
   text-align: center;
}
.div-13 .div-9-2-mid a:hover{
   color: #31C37C;
}
.div-13 .div-9-2-mid a{
   margin-left: 30px;
   display: inline-block;
   font-size: 15px;
   color: #333;
}
.div13-z{
   width: 1200px;
   height: 464px;
   margin: 25px auto;
   background-color: #F9F9F9;
}
.div13-z .span1 {
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 2px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
   position: absolute;
   top:3540px;
   left: -100px;
   background-color: #EAECEA;
   transition: all .3s linear;
}
.div13-z .span2{
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 0px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
   position: absolute;
   top:3540px;
   left: 1579px;
   background-color: #EAECEA;
   transition: all .3s linear;
}
.div-13:hover .span1{
    transform: translate(100px, 0px);
}
.div-13:hover .span2{
   transform: translate(-100px, 0px);
}
.div13-z .div13-z-s{
   width:100%;
   height: 232px;
   background-color: #F9F9F9;
}
.div13-z .div13-z-x{
   width:100%;
   height: 232px;
}
.div13-z .s-1{
   display: block;
   width: 224px;
   height: 207px;
   float: left;
   margin-right: 16px;
}
.div13-z img{
   width: 224px;
   height: 127px;
}
.div13-z p{
   color: #000;
}
.div13-z span{
   color: #999999;
}
.div-14{
   width: 1580px;
   height: 710px;
   background-color: #333333;
}
.div-14 a{
   color: #999;
}
.div14-z{
   position: relative;
   width: 1200px;
   height: 710px;
   margin: 0 auto;
}
.div14-z .div14-z-s{
   width: 100%;
   height: 533px;
   overflow: hidden;
   position: relative;
   padding-bottom: 45px;
}
.div14-z .div14-z-x{
   height: 84px;
   text-align: center;
   line-height: 28px;
   padding: 24px 0;
}
.div14-z-s .div-14s-1{
   width: 357px;
   height: 213.5px;
   position: absolute;
   top: 0;
   left: 10px;
}
.footer_tit {
font-size: 15px;
font-weight: 400;
padding: 80px 0 30px;
   color: #999;
}
.div-14s-1 .li-a{
   float: left;
   text-align: center;
   position: relativse;
   margin-left: -30px;
   font-size: 14px;
}
.div-14s-1 .a-3{
   display: block;
}
.pc-1{
   width: 37px;
   background-position: -2px 0;
   display: block;
margin: 0 29px 12px;
width: 48px;
height: 48px;
   background-image: -webkit-image-set(url(../img/footer@2x.39e8338d.png) 1x,
   url(../img/footer@2x.39e8338d.png) 2x);
}
.pc-2{
   width: 37px;
   background-position: -2px 0;
   display: block;
margin: 0 29px 12px;
width: 48px;
height: 48px;
   background-image: -webkit-image-set(url(../img/footer@2x.39e8338d.png) 1x,
   url(../img/footer@2x.39e8338d.png) 2x);
}
.pc-3{
   width: 37px;
   background-position: -2px 0;
   display: block;
margin: 0 29px 12px;
width: 48px;
height: 48px;
   background-image: -webkit-image-set(url(../img/footer@2x.39e8338d.png) 1x,
   url(../img/footer@2x.39e8338d.png) 2x);
}
.pc-4{
   width: 37px;
   background-position: -2px 0;
   display: block;
margin: 0 29px 12px;
width: 48px;
height: 48px;
   background-image: -webkit-image-set(url(../img/footer@2x.39e8338d.png) 1x,
   url(../img/footer@2x.39e8338d.png) 2x);
}
.pc1{
   width: 37px;
   background-position: -2px 0;
   display: block;
margin: 0 29px 12px;
width: 48px;
height: 48px;
   background-image: -webkit-image-set(url(../img/footer@2x.39e8338d.png) 1x,
   url(../img/footer@2x.39e8338d.png) 2x);
}
.pc2{
   width: 37px;
   background-position: -2px 0;
   display: block;
margin: 0 29px 12px;
width: 48px;
height: 48px;
   background-image: -webkit-image-set(url(../img/footer@2x.39e8338d.png) 1x,
   url(../img/footer@2x.39e8338d.png) 2x);
}
.pc3{
   width: 37px;
   background-position: -2px 0;
   display: block;
margin: 0 29px 12px;
width: 48px;
height: 48px;
   background-image: -webkit-image-set(url(../img/footer@2x.39e8338d.png) 1x,
   url(../img/footer@2x.39e8338d.png) 2x);
}
.pc4{
   width: 37px;
   background-position: -2px 0;
   display: block;
margin: 0 29px 12px;
width: 48px;
height: 48px;
   background-image: -webkit-image-set(url(../img/footer@2x.39e8338d.png) 1x,
   url(../img/footer@2x.39e8338d.png) 2x);
}
.pc2{
   background-position: -92px 0;
}
.pc3{
   background-position: -190px 0;
}
.pc4{
   background-position: -279px 0;
}
.pc-1{
   background-position: -370px 0;
}
.pc-2{
   background-position: -463px 0;
}
.pc-3{
   background-position: -563px 0;
}
.pc-4{
   background-position: -650px 0;

}
.div-14s-2 {
position: absolute;
top: 0;
left: 450px;
width: 360px;
   height: 270.5px;
}
.div-14s-2 .li-a{
   float: left;
   text-align: center;
   position: relative;
   margin-left: -30px;
   font-size: 14px;
}
.div-14s-2 .a-3{
   display: block;
}
.li-b{
   display: inline-block;
   margin-bottom: -10px;
   margin-right: 5px;
   vertical-align: bottom;
   font-size: 14px;
}
.footer_platform a{
   font-size: 14px;
}
.footer_group {
position: absolute;
top: 300px;
left: 476px;
width: 304px;
   height: 165.5px;
}
.footer_link {
float: right;
width: 300px;
padding-bottom: 57px;
   height: 297.5px;
}
.footer_link li{
   width: 100px;
   float: left;
   font-size: 14px;
   line-height: 30px;
}
.footer_platform li{
   float: left;
   margin: 0 5px 12px 0;
   text-indent: 25px;
}
.footer_platform {
width: 400px;
margin: 300px 0 0 10px;
   height: 132.5px;

}
.item{
   float: left;
min-width: 100px;
margin: 0 5px 12px 0;
text-indent: 25px;
}
.div14-ul{
   height: 150px;
   margin-left: -25px;
}
.div14-z-x{
   text-align: center;
   line-height: 28px;
   padding: 24px 0;
   font-size: 12px;
}
.div14-z a:hover{
   color: #31c27c;

}
.t{
   color: #999999;
}
.div-position{
   position: fixed;
   top:570px;
   left: 1450px;
   width: 40px;
   height: 166px;
   background:transparent;
}
.div-position .p-1::before {
content: "";
display: block;
width: 18px;
height: 10px;
margin: 14px 10px;
background-position: -160px 0;

}
.div-position .p1{
   width: 40px;
   height: 40px;
   border: 1px solid #c9c9c9;
   background-color: #fff;
}
.div-position .p-1{
   display: block;
   margin: 13px auto;
   width: 20px;
   height: 13px;
   border: 1px solid white;
background-color: #fff;
   background-image: url(../img/icon_sprite.630b3e60.png);
   background-image: -webkit-image-set(url(../img/icon_sprite.630b3e60.png) 1x,
   url(../img/icon_sprite.630b3e60.png) 2x);
   background-position-x:40px;
   background-position-y:337px ;
}
.div-position .p-2{
   display: block;
   width: 40px;
   height: 40px;
background-color: #fff;
   margin-top: 3px;
   margin-bottom: 3px;
   border: 1px solid #c9c9c9;
}
.div-position .p-2 p{
   margin: 10px auto;
}
.div-position .p-3{
   display: block;
   width: 40px;
   height: 40px;
background-color: #fff;
   margin-bottom: 3px;
   border: 1px solid #c9c9c9;
}
.div-position .p-3 p{
   margin: 10px auto;
}
.div-position .p-4{
   display: block;
   margin: 10px auto;
   width: 20px;
   height: 19px;
   border: 1px solid white;
background-color: #fff;
   background-image: url(../img/icon_sprite.630b3e60.png);
   background-image: -webkit-image-set(url(../img/icon_sprite.630b3e60.png) 1x,
   url(../img/icon_sprite.630b3e60.png) 2x);
   background-position-x:20px;
   background-position-y:337px ;
}
.div-position a{
   color: #000000;
   text-align: center;
}