I. sass/scss
ruby language

1.scss variable
	$w:300px;$h:235px;
	.mm{width:$w;height:$h;}
2.sass Nested writing of:
	.header{ height:200px;
	    h1{font-size:18px}
	}

II. swiper.js
Wheel planting
1. Load the swiper.min.css style file on the page
2. Load the file swiper.min.js
3. Write html structure

<div class="swiper-container baaner">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/img1.jpg" ></div>
				<div class="swiper-slide"><img src="img/img2.jpg" ></div>
				<div class="swiper-slide"><img src="img/img3.jpg" ></div>
				<div class="swiper-slide"><img src="img/img4.jpg" ></div>
				<div class="swiper-slide"><img src="img/img5.jpg" ></div>
			</div>
			<div class="swiper-pagination">Paging device</div>
			<div class="swiper-button-prev">Backward</div>
			<div class="swiper-button-next">Forward</div>
			<div class="swiper-scrollbar"></div>
		</div>
4.write javascript Script
	var mswiper=new Swiper("#mm",{
		direction:"vertical",   //Vertical default horizontal (no vertical annotation required)
		autoplay:2000,	  //Auto play
		loop:true,	  //loop
		speed:1000,	  //Display speed
		pagination:".swiper-pagination",	//Paging device
		prevButton:".swiper-button-prev",	//Back off
		nextButton:".swiper-button-next"	//Forward
	})

3. iScroll.js:
Load iscroll.js file
1.html structure

<div class="box" style="height:3rem">
			<div class="content" style="padding:50px 0" >
				//Rolling content
			</div>
		</div>
 //Note: when setting css style, the height of box must be less than content height
2.js Structure:
	//Disable browsing with default touchmove event
	document.addEventListener("touchmove",function(ev){
		ev.preventDefault()
	},{
	 passive:false}
	)
     var mscroll=new IScroll(".box",{
		scrollX: true,		//Horizontal sliding
		scrollY: true，   //Vertical sliding
	});

Four, ajax:

 1   $.ajax({
		url:"http://www.abc.com/reg.php?uname = Li Baoku & usex = Mr. ",
		type:"get/post",
		success:function(msg){
			//msg is the returned data
		}
	})


2  $.get(url,{},function(){},"json")	
http://www.abc.com/reg.php?uname = Li Baoku & usex = Mr
$.get("http://www.abc.com/reg.php",{uname:" Li Baoku ", usex:" Mr. "}
	,function(msg){
		//msg is the returned data
		}
     ,"json")

  3   $.post(url,{},function(){},"json")//Like get

5. REM: generally, 1rem =16px by default;
Dynamic setting rem

function  rem(){
	document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+"px";
 }
  rem();
//Event onresize triggers when the size of the screen changes
window.rem;

Vi. elastic box:

diplay:flex; / / define elastic box
Flex direction: row | row reverse | column | column reverse; / / specifies the position of the elastic child element in the parent container.
Flex Wrap: Wrap / / line break exceeded
Align items: Flex start | flex end | center | baseline | stretch / / sets or retrieves the alignment of the elastic box element in the side (vertical) direction.
Justify content: Flex start | flex end | center | space between | space around / / content alignment
Flex growth: 0 / / defines the expansion ratio of elastic box elements.
Flex shrink: 1 / / defines the shrinkage ratio of the elastic box element.
order: number; (custom) / / elastic child element sorting