一、sass/scss
ruby语言
1.scss变量
$w:300px;$h:235px;
.mm{width:$w;height:$h;}
2.sass的嵌套写法:
.header{ height:200px;
h1{font-size:18px}
}
二、swiper.js
轮播
1.在页面加载swiper.min.css样式文件
2.加载swiper.min.js文件
3.写html结构
<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">分页器</div>
<div class="swiper-button-prev">后进</div>
<div class="swiper-button-next">前进</div>
<div class="swiper-scrollbar"></div>
</div>
4.写javascript脚本
var mswiper=new Swiper("#mm",{
direction:"vertical", //垂直方向 默认水平 (不需要垂直注释即可)
autoplay:2000, //自动播放
loop:true, //循环
speed:1000, //展示速度
pagination:".swiper-pagination", //分页器
prevButton:".swiper-button-prev", //后退
nextButton:".swiper-button-next" //前进
})
三、iScroll.js:
加载iscroll.js文件
1.html结构
<div class="box" style="height:3rem">
<div class="content" style="padding:50px 0" >
滚动内容
</div>
</div>
注:设置css样式时box的高度必须小于content高度
2.js结构:
//禁用浏览自带默认touchmove事件
document.addEventListener("touchmove",function(ev){
ev.preventDefault()
},{
passive:false}
)
var mscroll=new IScroll(".box",{
scrollX:true, //水平滑动
scrollY:true, //垂直滑动
});
四、ajax:
1 $.ajax({
url:"http://www.abc.com/reg.php?uname=李宝裤&usex=先生",
type:"get/post",
success:function(msg){
//msg为返回的数据
}
})
2 $.get(url,{},function(){},"json")
http://www.abc.com/reg.php?uname=李宝裤&usex=先生
$.get("http://www.abc.com/reg.php",{uname:"李宝裤",usex:"先生"}
,function(msg){
//msg为返回的数据
}
,"json")
3 $.post(url,{},function(){},"json")//与get一样
五、rem: 一般默认1rem =16px;
动态设置rem
function rem(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+"px";
}
rem();
//事件 onresize当屏幕的尺寸发生改变的时候会触发该事件
window.rem;
六、弹性盒子:
diplay:flex; //定义弹性盒子
flex-direction: row | row-reverse | column | column-reverse; //指定了弹性子元素在父容器中的位置。
flex-wrap:wrap //超出换行
align-items: flex-start | flex-end | center | baseline | stretch //设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around //内容对齐
flex-grow:0 //定义弹性盒子元素的扩展比率。
flex-shrink:1 //定义弹性盒子元素的收缩比率。
order: 数字;(自定义) //弹性子元素排序