为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/Html5

/HTML5+CSS3实现春节贺卡

在手机浏览器预览出现了样式错误问题，这是怎么回事？

http://img1.sycdn.imooc.com//5927d2100001a44207201280.jpg

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
		<meta name="viewport" content="initial-scale=1.0, minimum-scale=1,maximum-scale=1.0, user-scalable=no, width=device-width" />
		<meta name="format-detection" content="telephone=no">
		<title>新年贺卡</title>
		<link rel="stylesheet" type="text/css" href="main.css">
		<script src="js/main.js";type="text/javascript";charset="UTF-8"></script>
	</head>
	<body>
	<div class="music">
		<img src="img/music_pointer.png" />
		<img class="play"  id="music" src="img/music_disc.png" />
	</div>
	<div class="page" id="page1">
		<div class="bg"></div>
		<div class="p1_lantern">
			<p>点击屏幕</br>开启好运2017</div></p>
		<div class="p1_imocc"></div>
		<div class="p1_words">2016年慕课网新年特献</div>
	</div>
	<div class="page" id="page2">
		<div class="bg"></div>
		<div class="p2_circle"></div>
		<div class="p2_2016"></div>
	</div>
	<div class="page" id="page3">
		<div class="bg"></div>
		<div class="p3_logo"></div>
		<div class="p3_title"></div>
		<div class="p3_couplet_first"></div>
		<div class="p3_couplet_second"></div>
		<div class="p3_blessing"></div>
	</div>
	<audio src="audio/汪苏泷 - 一笑倾城1.mp3" class="bg_music" type="audio/mpeg" autoplay="true">
	</audio>
	</body>
</html>
* {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 1.5625vw;
}

html {
	height: 100%;
}

body {
	height: 100%;
}

.page {
	position: absolute;
	height: 100%;
	width: 100%;
}

.music {
	position: fixed;
	border: 4px solid #ef1639;
	width: 15vw;
	height: 15vw;
	top: 3vh;
	right: 4vw;
	z-index: 5;
	border-radius: 100%;
	background-color:white ;
}

.music> img:first-of-type {
	position: absolute;
	top: 24%;
	right: 2.5%;
	width: 28.421%;
	z-index: 4
}

.music> img:last-of-type {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 79%;
}

.music > img.play{
	-webkit-animation: music_disc 4s linear infinite;
}
@-webkit-keyframes music_disc{
	from{-webkit-transform: rotate(0deg);}
	to{-webkit-transform: rotate(360deg);}
}

.page> .bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}


/*p1/*/

#page1 {
	display: block;
}

#page1> .bg {
	background: url(img/p1_bg.jpg) no-repeat;
	background-size: 100%;
}
#page1 p{font-size:  3.506rem;margin: 0 auto;}
#page1>.p1_lantern {
	position: absolute;
	background: url(img/p1_lantern.png) no-repeat center bottom;
	top: -3.4%;
	background-size: 100%;
	width: 45vw;
	height: 71.2vh;
	font-size: 3.506rem;
	color: white;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	padding-top: 31vh;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#page1> .p1_lantern:before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	width: 30vw;
	height: 30vw;
	background: #d60b3b;
	opacity: .5;
	border-radius: 50%;
	box-shadow: 0 0 10vw 10vw #d60b3b;
	-webkit-box-shadow: 0 0 10vw 10vw #d60b3b;
	z-index: -1;
	animation: flash .5s infinite alternate;
}
@keyframes flash {
	from{opacity: .8
			transform:scale(.8 .8);}
	to{opacity: 1}
}

#page1>.p1_imocc {
	background: url(img/p1_imooc.png) no-repeat center;
	background-size: 100%;
	width: 27.656vw;
	height: 18.63vh;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9vh;
	margin: auto;
}

#page1>.p1_words {
	position: absolute;
	font-size: 2.134rem;
	right: 0;
	bottom: 43px;
	left: 0;
	text-align: center;
}


/*p2*/
#page2 {
	display: none;
}

#page2> .bg {
	background: url(img/p2_bg.jpg) no-repeat;
	background-size: 100%;
}

#page2> .p2_circle {
	background: url(img/p2_circle_outer.png) no-repeat center;
	background-size: 100%;
	position: absolute;
	width: 59.375vw;
	height: 59.375vw;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	animation: circle_outer 2s linear infinite;
}
@keyframes circle_outer{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}

#page2> .p2_circle:before {
	background: url(img/p2_circle_middle.png) no-repeat center;
	background-size: 100%;
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 45.625vw;
	height: 45.625vw;
	/*animation: circle_middle 2s linear infinite；*/
}
/*@keyframes circle_middle{
	from{transform: rotate(0deg);}
	to{transform: rotate(720deg);}
}*/

#page2> .p2_circle:after {
	background: url(img/p2_circle_inner.png) no-repeat center;
	background-size: 100%;
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 39.9375vw;
	height: 39.9375vh;
	margin: auto;
	-webkit-animation: circle_inner 2s linear  1s infinite；
}
@-webkit-keyframes circle_inner{
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(-1080deg);}
}


#page2> .p2_2016 {
	background: url(img/p2_2016.png) no-repeat center;
	background-size: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 27.5vw;
	height: 6.24vh;
}


/*p3*/

#page3 {
	display: none;
}

#page3> .bg {
	background: url(img/p3_bg.jpg) no-repeat center;
	background-size: 100%;
}

#page3> .p3_logo {
	position: absolute;
	top: 7.82vh;
	left: 0;
	right: 0;
	width: 34.6875vw;
	height: 6.327vh;
	background: url(img/p3_logo.png) no-repeat center;
	background-size: 100%;
	margin: auto;
}

#page3> .p3_title {
	background: url(img/p3_title.png) no-repeat center;
	background-size: 100%;
	top: 21vh;
	left: 0;
	right: 0;
	margin: auto;
	width: 48.125vw;
	height: 50vh;
	position: absolute;
}

#page3> .p3_couplet_second {
	position: absolute;
	background: url(img/p3_couplet_second.png) no-repeat center;
	background-size: 100%;
	top: 25.48vh;
	left: 3.75vw;
	width: 22.8125vw;
	height: 41.652vh;
}

#page3> .p3_couplet_first {
	position: absolute;
	background: url(img/p3_couplet_first.png) no-repeat center;
	background-size: 100%;
	top: 25.48vh;
	right: 3.75vw;
	width: 22.8125vw;
	height: 41.652vh;
}

#page3> .p3_blessing {
	position: absolute;
	background: url(img/p3_blessing.png) no-repeat center;
	background-size: 100%;
	width: 32vw;
	height: 32vw;
	bottom: 10vh;
	left: 0;
	right: 0;
	margin: auto;
	border-radius: 50%;
}


simon_wyk

2017-05-26

源自：HTML5+CSS3实现春节贺卡  3-13

关注问题 我要回答
2411
操作
收起

正在回答

1 回答

爱米 回答被采纳 +3 积分
2017-06-01

top用的是%为单位，有时候会被手机的自带工具顶下来，有时候不会，，可以试试用vw做单位。

0 回复 有任何疑惑可以回复我~
收起回答
#1

simon_wyk 提问者

好的，谢谢！
2017-06-15 回复 有任何疑惑可以回复我~
#2

爱米 回复 simon_wyk 提问者

不客气啦，，
2017-07-22 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
HTML5+CSS3实现春节贺卡
  • 参与学习       110097    人
  • 解答问题       450    个

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

进入课程

本课相似问答

1 回答浏览器

3 回答在编辑软件上编辑代码，在浏览器中预览，并不能像老师演示的那样呀？这是为什么？

1 回答这个用火狐浏览器运行的结果是怎么样的？？

2 回答浏览器前缀

1 回答浏览器滑动
搜索更多本课相关问答

在手机浏览器预览出现了样式错误问题，这是怎么回事？

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信