generator-minxing/app/templates/hotview/styles/index.css

generator for creating minxing web app.

*{
	padding: 0px;
	margin: 0px;
	border:0px;
	outline: 0px;
}
body{
  color: #ffffff;
  font-family: "Microsoft YaHei";
  height: 100%;
	width: 100%;
	background: url("../images/bg.png") left top repeat;
}
.pane, .view{
	background: none;
}
a{
	text-decoration: none;
	color: #ffffff;
}
ol{
	list-style: none;
	margin:22px 17px;
	border-radius: 9px;
	padding-left: 7px;
	padding-right: 10px
  background-clip:padding-box;
}
.head{
	width: 100%;
	height: 30%;
  margin-top: 10px;
}
.head a{
  padding-left: 10px;
  font-size: 16px;
  color: #fff;
}
.head a:hover{
  color: #4585e5;
}
.head-img{
	margin:0 auto;
	display: block;
}
.wrapper{
	height:auto;
	width: 92%;
	margin: 0 auto;
	margin-top: 5px;
	background-color: #ffffff;
  border: 5px solid #062242;
  border-radius: 30px;
  background-clip:padding-box;
}
li{
	width: 100%;
	height:38px;
	position: relative;
	background-color: #9a7c55;
	margin: 20px 0 0 5px;
	border:2px solid #a79868;
	border-radius: 5px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.7) inset;
  background-clip:padding-box;
}
.rank{
	position: absolute;
  left: -19px;
  top: -9px;
	width: 50px;
  height: 50px;
}
li a{
	display: block;
	line-height: 38px;
	text-align: center;
	margin-left:64px;
	padding:0 10px;
	font-size: 14px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	width:calc(100% - 92px);
}
li:nth-child(1){
	background-image: url("../images/no1.png");
	background-repeat: no-repeat;
	background-position: 35px 0px;
	background-size: 31px 33px;
}
li:nth-child(2){
	background-image: url("../images/no2.png");
	background-repeat: no-repeat;
	background-position: 35px 0px;
	background-size: 31px 33px;
}
li:nth-child(3){
	background-image: url("../images/no3.png");
	background-repeat: no-repeat;
	background-position: 35px 0px;
	background-size: 31px 33px;
}
li:nth-child(4)::before{
	content: "4th";
	position: absolute;
	left: 40px;
  top: 10px;
  color: #523513;
  font-weight: bold;
}
li:nth-child(5)::before{
	content: "5th";
	position: absolute;
	left: 40px;
  top: 10px;
  color: #523513;
  font-weight: bold;

}
li:nth-child(6)::before{
	content: "6th";
	position: absolute;
	left: 40px;
  top: 10px;
  color: #523513;
  font-weight: bold;
}
li:nth-child(7)::before{
	content: "7th";
	position: absolute;
	left: 40px;
  top: 10px;
  color: #523513;
  font-weight: bold;
}
li:nth-child(8)::before{
	content: "8th";
	position: absolute;
	left: 40px;
  top: 10px;
  color: #523513;
  font-weight: bold;

}
li:nth-child(9)::before{
	content: "9th";
	position: absolute;
	left: 40px;
  top: 10px;
  color: #523513;
  font-weight: bold;
}
li:nth-child(10)::before{
	content: "10th";
	position: absolute;
	left: 40px;
  top: 10px;
  color: #523513;
  font-weight: bold;
}
li img{
	width: 100%;
	height:100%;
	border-radius:50%;
	overflow: hidden;
	border: 2px solid #9c7b53;
	border-right:none;
  background-clip:padding-box;
}
 li span:nth-child(n){
	position: absolute;
	top: 0px;
	left: 0px;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	display: block;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.7) inset;
	text-indent: -9999px;
  background-clip:padding-box;
}
.emptyImg{
	display: block;
	width: 100%;
	height: 108px;
	margin-top: 23px;
	background: url("../images/text-empty.png") center center no-repeat;
	border-radius: 5px;
	color: #44566a;
	font-weight: 600;
	font-family: "Tahoma";
	text-indent: -9999px;
	-webkit-transform: scale(0.5);
	moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-o-transform: scale(0.5);
  background-clip:padding-box;
}
/**针对Ios样式**/
.ios .head{
  width: 100%;
  height: 30%;
  margin-top: 20px;
}