Html
    Css
    Js

    
                        
html {
	font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%
}
html,body {
	-webkit-user-select:none;
	user-select:none;
	width:100%
}
html,body,p,object,,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video,progress {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline
}
a {
	text-decoration:none;
	-webkit-touch-callout:none;
	background-color:transparent
}
li {
	list-style:none
}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
	display:block
}
audio,canvas,progress,video {
	display:inline-block
}
audio:not([controls]) {
	display:none;
	height:0
}
[hidden],template {
	display:none
}
a:active,a:hover {
	outline:0
}
abbr[title] {
	border-bottom:1px dotted
}
b,strong {
	font-weight:bold
}
dfn {
	font-style:italic
}
h1 {
	font-size:2em;
	margin:.67em 0
}
small {
	font-size:80%
}
sub,sup {
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline
}
sup {
	top:-0.5em
}
sub {
	bottom:-0.25em
}
img {
	border:0;
	-webkit-touch-callout:none;
}
svg:not(:root) {
	overflow:hidden
}
figure {
	margin:1em 40px
}
hr {
	-moz-box-sizing:content-box;
	box-sizing:content-box;
	height:0
}
pre {
	overflow:auto
}
code,kbd,pre,samp {
	font-family:monospace,monospace;
	font-size:1em
}
a,button,input,optgroup,select,textarea {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
button,input,optgroup,select,textarea {
	color:inherit;
	font:inherit;
	margin:0;
	-webkit-appearance:none;
	outline:none;
	line-height:normal
}
button {
	overflow:visible
}
button,select {
	text-transform:none
}
button,html input[type="button"],input[type="reset"],input[type="submit"] {
	-webkit-appearance:button;
	cursor:pointer
}
button[disabled],html input[disabled] {
	cursor:default
}
button::-moz-focus-inner,input::-moz-focus-inner {
	border:0;
	padding:0
}
input,textarea {
	outline:none;
	border:none;
}
input {
	line-height:normal
}
input[type="checkbox"],input[type="radio"] {
	box-sizing:border-box;
	padding:0
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
	height:auto
}
input[type="search"] {
	-webkit-appearance:textfield;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	box-sizing:content-box
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
	-webkit-appearance:none
}
fieldset {
	border:1px solid silver;
	margin:0 2px;
	padding:.35em .625em .75em
}
legend {
	border:0;
	padding:0
}
textarea {
	overflow:auto
}
optgroup {
	font-weight:bold
}
table {
	border-collapse:collapse;
	border-spacing:0
}
td,th {
	padding:0
}
/*轮播块*/

.Banner {
	width:100%;
	position:relative;
}
.Banner .B-img {
	width:100%;
	overflow:hidden;
}
.Banner .B-img ul {
	width:1000%;
}
.Banner .B-img ul li {
	float:left;
}
.Banner .B-img ul li img {
	width:10rem;
	height:6.65625rem;
}
.Banner .B-dir {
	width:100%;
	height:0.625rem;
	position:absolute;
	bottom:0.3125rem;
	z-index:10;
}
.Banner .B-dir ul {
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	height:0.625rem;
}
.Banner .B-dir ul li {
	margin-left:0.3125rem;
	width:0.375rem;
	height:0.375rem;
	background-color:white;
	border-radius:50%;
}
.Banner .B-dir ul li.on {
	background-color:#00A0EA;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

移动端轮播图

利用rem特性,用js做适配.. 移动端轮播

0