-mark- 微信端网页通用样式

wechat_Reset.css

+html,
+body,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+form,
+input,
+label,
+textarea,
+p {
+	margin: 0;
+	padding: 0;
+	-webkit-text-size-adjust: none
+}
+
+article,
+aside,
+details,
+footer,
+header,
+nav,
+section {
+	display: block
+}
+
+em,
+i {
+	font-style: normal
+}
+
+img {
+	border: 0;
+	vertical-align: middle
+}
+
+ol,
+ul {
+	list-style: none
+}
+
+input[type=text],
+input[type=password],
+input[type=number],
+input[type=email],
+input[type=search],
+input[type=tel],
+input[type=radio],
+input[type=checkbox] {
+	vertical-align: middle;
+	outline: 0;
+	-webkit-appearance: none;
+	-webkit-user-select: text
+}
+
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+	color: #ccc
+}
+
+select,
+textarea {
+	outline: 0;
+	-webkit-appearance: none
+}
+
+textarea {
+	-webkit-user-select: text
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0
+}
+
+* {
+	-webkit-user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	-webkit-touch-callout: none;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box
+}
+
+*:before,
+*:after {
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box
+}
+
+a {
+	text-decoration: none
+}
+
+
+.clearfix:after {
+	display: block;
+	content: '';
+	clear: both;
+	visibility: hidden;
+}
+
+body {
+	max-width: 750px;
+	margin: 0 auto;
+	min-height: 100%;
+	min-width: 320px;
+	font-family: Arial, Helvetica, sans-serif;
+	line-height: 1.3;
+	-webkit-text-size-adjust: none;
+}
+
+.winPop {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	z-index: 9999;
+	background-color: rgba(0, 0, 0, .8);
+	color: white;
+	padding: 0.24rem;
+	font-size: 0.32rem;
+	line-height: 0.4rem;
+	border-radius: 0.2rem;
+	transform: translate(-50%, -50%);
+	-webkit-transform: translate(-50%, -50%);
+	white-space: nowrap;
+}
+
+::-webkit-scrollbar {
+	display: none;
+}
+
+.cssload-spin-box {
+	position: absolute;
+	margin: auto;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	width: 0.3rem;
+	height: 0.3rem;
+	border-radius: 100%;
+	box-shadow: 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223);
+	-o-box-shadow: 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223);
+	-ms-box-shadow: 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223);
+	-webkit-box-shadow: 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223);
+	-moz-box-shadow: 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223);
+	animation: cssload-spin ease infinite 4.6s;
+	-o-animation: cssload-spin ease infinite 4.6s;
+	-ms-animation: cssload-spin ease infinite 4.6s;
+	-webkit-animation: cssload-spin ease infinite 4.6s;
+	-moz-animation: cssload-spin ease infinite 4.6s;
+}
+
+
+
+@keyframes cssload-spin {
+
+	0%,
+	100% {
+		box-shadow: 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223);
+	}
+
+	25% {
+		box-shadow: -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223), 0.3rem 0.3rem rgb(79, 77, 73);
+	}
+
+	50% {
+		box-shadow: -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223), 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223);
+	}
+
+	75% {
+		box-shadow: 0.3rem -0.3rem #dfdfdf, 0.3rem 0.3rem #4f4d49, -0.3rem 0.3rem #dfdfdf, -0.3rem -0.3rem #4f4d49;
+	}
+}
+
+@-o-keyframes cssload-spin {
+
+	0%,
+	100% {
+		box-shadow: 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223);
+	}
+
+	25% {
+		box-shadow: -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223), 0.3rem 0.3rem rgb(79, 77, 73);
+	}
+
+	50% {
+		box-shadow: -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223), 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223);
+	}
+
+	75% {
+		box-shadow: 0.3rem -0.3rem #dfdfdf, 0.3rem 0.3rem #4f4d49, -0.3rem 0.3rem #dfdfdf, -0.3rem -0.3rem #4f4d49;
+	}
+}
+
+@-ms-keyframes cssload-spin {
+
+	0%,
+	100% {
+		box-shadow: 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223);
+	}
+
+	25% {
+		box-shadow: -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223), 0.3rem 0.3rem rgb(79, 77, 73);
+	}
+
+	50% {
+		box-shadow: -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223), 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223);
+	}
+
+	75% {
+		box-shadow: 0.3rem -0.3rem #dfdfdf, 0.3rem 0.3rem #4f4d49, -0.3rem 0.3rem #dfdfdf, -0.3rem -0.3rem #4f4d49;
+	}
+}
+
+@-webkit-keyframes cssload-spin {
+
+	0%,
+	100% {
+		box-shadow: 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223);
+	}
+
+	25% {
+		box-shadow: -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223), 0.3rem 0.3rem rgb(79, 77, 73);
+	}
+
+	50% {
+		box-shadow: -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223), 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223);
+	}
+
+	75% {
+		box-shadow: 0.3rem -0.3rem #dfdfdf, 0.3rem 0.3rem #4f4d49, -0.3rem 0.3rem #dfdfdf, -0.3rem -0.3rem #4f4d49;
+	}
+}
+
+@-moz-keyframes cssload-spin {
+
+	0%,
+	100% {
+		box-shadow: 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223);
+	}
+
+	25% {
+		box-shadow: -0.3rem 0.3rem rgb(223, 223, 223), -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223), 0.3rem 0.3rem rgb(79, 77, 73);
+	}
+
+	50% {
+		box-shadow: -0.3rem -0.3rem rgb(79, 77, 73), 0.3rem -0.3rem rgb(223, 223, 223), 0.3rem 0.3rem rgb(79, 77, 73), -0.3rem 0.3rem rgb(223, 223, 223);
+	}
+
+	75% {
+		box-shadow: 0.3rem -0.3rem #dfdfdf, 0.3rem 0.3rem #4f4d49, -0.3rem 0.3rem #dfdfdf, -0.3rem -0.3rem #4f4d49;
+	}
+}
+
+.mod {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 999999;
+}
+
+@keyframes fadeIn {
+	0% {
+		opacity: 0
+	}
+
+	100% {
+		opacity: 1
+	}
+}
+
+@-webkit-keyframes fadeIn {
+	0% {
+		opacity: 0
+	}
+
+	100% {
+		opacity: 1
+	}
+}
+
+@-moz-keyframes fadeIn {
+	0% {
+		opacity: 0
+	}
+
+	100% {
+		opacity: 1
+	}
+}
+
+@-o-keyframes fadeIn {
+	0% {
+		opacity: 0
+	}
+
+	100% {
+		opacity: 1
+	}
+}
+
+@-ms-keyframes fadeIn {
+	0% {
+		opacity: 0
+	}
+
+	100% {
+		opacity: 1
+	}
+}
+
+@keyframes fadeOut {
+	0% {
+		opacity: 1
+	}
+
+	100% {
+		opacity: 0
+	}
+}
+
+@-webkit-keyframes fadeOut {
+	0% {
+		opacity: 1
+	}
+
+	100% {
+		opacity: 0
+	}
+}
+
+@-moz-keyframes fadeOut {
+	0% {
+		opacity: 1
+	}
+
+	100% {
+		opacity: 0
+	}
+}
+
+@-o-keyframes fadeOut {
+	0% {
+		opacity: 1
+	}
+
+	100% {
+		opacity: 0
+	}
+}
+
+@-ms-keyframes fadeOut {
+	0% {
+		opacity: 1
+	}
+
+	100% {
+		opacity: 0
+	}
+}
+
+.web-toast {
+	position: fixed;
+	background: rgba(0, 0, 0, 0.7);
+	color: #fff;
+	font-size: 0.5rem;
+	line-height: 0.5rem;
+	padding: 0.3rem;
+	border-radius: 0.1rem;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	-webkit-transform: translate(-50%, -50%);
+	-moz-transform: translate(-50%, -50%);
+	-o-transform: translate(-50%, -50%);
+	-ms-transform: translate(-50%, -50%);
+	z-index: 9999;
+	white-space: nowrap;
+}
+
+.fadeOut {
+	animation: fadeOut .5s;
+}
+
+.fadeIn {
+	animation: fadeIn .5s;
+}
+
+.content_mod {
+	position: fixed;
+	z-index: 10;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, .3);
+	display: none;
+}