谁能来帮我拯救一下这个:为什么灯笼不能置顶,文字不能放在灯笼中间??还有,我想把底下的小鸡放大怎么办?

来源:3-7 移动端项目开发——表示层(page3)

6HaHa

2017-01-25 15:22

*{

margin: 0;

padding: 0;

border: none;

font-size: 1.5625vw;

font-family: "Microsoft Yahei";

}


/* music */

#music{

position: fixed;

top: 3vh;

right: 4vw;

z-index: 5;

width: 15vw;

height: 15vw;

margin: auto;

border: 4px solid #ef1639;

border-radius: 50%;

background: #fff;

}

#music > img:first-of-type {

position: absolute;

top: 24%;

right: 2.5%

width:28.421%;

margin: auto;

}

#music > img:last-of-type {

position: absolute;

z-index: -1;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}


/* page bg*/

.page {

position: absolute;

width: 100%;

height: 100%;

}

.page > .bg {

position: absolute;

z-index: -1;

width: 100%;

height: 100%;

}


/* page1 */

#page1 {

display: block;

}

#page1 > .bg {

background: url("H:/小小移动端/image/p1_bg.jpg") no-repeat center center;

background-size: 100%;

}

#page1 > .p1_lantern {

position: absolute;

top: -10%;

right: 0;

left: 0;

margin: auto;

background: url("H:/小小移动端/image/p1_lantern.png") no-repeat center bottom;

width: 45vw;

height: 71.2vh;

font-size: 3.506rem;

padding-top: 31vh;

text-align: center;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

}

#page1 > .p1_lantern:before {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: -1;

content: "";

margin: auto;

width: 30vw;

height: 30vw;

background: #d60b3b;

opacity:  .5;

border-radius: 50%;

-webkit-box-shadow: 0 0 10vw 10vw #d60b3b;

-moz-box-shadow: 0 0 10vw 10vw #d60b3b;

-ms-box-shadow: 0 0 10vw 10vw #d60b3b;

-o-box-shadow: 0 0 10vw 10vw #d60b3b;

box-shadow: 0 0 10vw 10vw #d60b3b;

}

#page1 > .p1_gj {

position: absolute;

right: 0;

bottom: 9vh;

left: 0;

background: url("H:/小小移动端/image/p1_gj.png") no-repeat center center;

background-size: 100px;

width: 27.656vw;

height: 23vh;

margin: auto;

}

#page1 > .p1_words {

font-size: 2.4rem;

position: absolute;

right: 0;

bottom: 48px;

left: 0;

text-align: center;

color: black;

}

http://img.mukewang.com/5888521a00016cd403600663.jpg

写回答 关注

1回答

  • chayin
    2017-03-04 09:13:56

    #page1 > .p1_lantern { top:-3.4% }

HTML5+CSS3实现春节贺卡

又逢新春佳节,春节贺卡搞起来,学会HTML5+CSS3实现春节贺卡

110036 学习 · 450 问题

查看课程

相似问题