amazeui/bootstrap框架及前端相关的知识概要!

最新推荐文章于 2024-06-21 09:42:35 发布

guiying1

最新推荐文章于 2024-06-21 09:42:35 发布

阅读量1.5k

点赞数

分类专栏： web前端文章标签：前端 html css amazeui bootstrap

本文链接：https://blog.csdn.net/guiying1/article/details/52035099

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

框架
amazeui
bootstrap
插件
iscroll
jquery.lazyload.min
jquery.marquee.min
日历插件
jquery.pin.min
placeholder
slide
常用
1、浮动 am-cf(清除浮动)、am-fl(左浮动)、am-fr(右浮动)
clearfix(清除浮动)、pull-left(左浮动)、pull-right(右浮动)
2、文字的换行、截断
text-overflow:ellipsis;//省略号显示
overflow:hidden;//隐藏
white-space:nowrap;//不换行
针对谷歌display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; // 这里修改为要显示的行数
3、图片轮播(基于slide)
amazeui:
<div class="am-slider am-slider-default" data-am-flexslider id="demo-slider-0">//样式可以自定义
<ul class="am-slides">
<li><img src="..." /></li>
<li><img src="..." /></li>
</ul>
</div>
bootstrap:
<div id="myCarousel" class="carousel slide">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>

<div class="carousel-inner">
<div class="active item"><img src=""></div>
<div class="item"><img src=""></div>
<div class="item"><img src=""></div>
</div>

<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
slide
js自定义
4、阿里矢量图
iconfont: <i class='iconfont'></i>//自定义的适量图需要上传SVG
5、锚点、滚动监测、 jquery.pin.min、自定义
锚点
<div class="nav">
<li id="id1"></li>
<li id="id2"></li>
</div>
滚动监测

<body data-spy="scroll" data-target=".navbar">...</body>

<nav class="scrollspy-nav" data-am-scrollspynav="{offsetTop: 45}" data-am-sticky>
<ul>
<li><a href="#about">关于棉花糖</a></li>
<li><a href="#team">成员介绍</a></li>
<li><a href="#ep">首张 EP</a></li>
</ul>
</nav>

$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>100){

}else{

}
}
});
6、iscroll(左右、上下滑动)//js能否实现？
<div id="wrapper">
<ul class="scroll">
<li>...</li>
<li>...</li>
</ul>
</div>

var IScroll = $.AMUI.iScroll;
var myScroll = new IScroll('#wrapper');

var myScroll = new IScroll('#wrapper', {
click: true
});

7、阴影
box-shadow：2px(左右) 2px(上下) #ccc(颜色);

8、定位(position)、fixed、relative、absolute
position:
1.改变行内元素的呈现方式，display被置为block；
2.让元素脱离普通流，不占据空间；
3.默认会覆盖到非定位元素上
fixed:对于浏览器定位，'根元素'为浏览器，相对与浏览器位置不变
relative:相对定位，'根元素'为自身静态位置，top、bottom、right、left
absolute:绝对定位
父元素没有relative定位时，'根元素'为浏览器左顶点
父元素存在relative定位时，'根元素'为父元素

9、css弹性方框布局(flex、相关属性)
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:-moz-box;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

10、html5 web存储(localStorage 、sessionStorage 、session、cookie)
localStorage:没有时间限制
localStorage.lastname="Smith";
document.write(localStorage.lastname);
sessionStorage:当用户关闭浏览器窗口后，数据会被删除
if(window.sessionStorage){
if(!sessionStorage.lastname){
sessionStorage.lastname='black';
setTimeout(function(){
$('.zzc').show();
$('.zzc-box').addClass('bounceInDown');
},1000);
}
}
session:存储在服务器上
cookie:存储在客户端

11、css3动画(过度、转换)
.demo{
left: 100%;
animation: endfirst 0.8s;/*动画名称和时长*/
-moz-animation: endfirst 0.8s; /* Firefox */
-webkit-animation: endfirst 0.8s; /* Safari 和 Chrome */
-o-animation: endfirst 0.8s; /* Opera */
}

@keyframes endfirst
{
0% {left: 0%;}
100% {left: 100%;}
}
@-moz-keyframes endfirst /* Firefox */
{
0% {left: 0%;}
100% {left: 100%;}
}
@-webkit-keyframes endfirst /* Safari 和 Chrome */
{
0% {left: 0%;}
100% {left: 100%;}
}
@-o-keyframes endfirst /* Opera */
{
0% {left: 0%;}
100% {left: 100%;}
}

12、placeholder问题
html5属性placeholder(ie6、7、8不支持)
在使用placeholder时会自动加一个外层

13、CSS Sprites(雪碧图)
ps相关

14、css3制作各种图形(常用三角形)
width: 0;
height: 0;
border-bottom: 140px solid #fcf921;
border-left: 70px solid transparent;
border-right: 70px solid transparent;

15、js返回上一级
<a href="javascript:history.go(-1)"></a>

16、JQuery选择
上级、下级、同级

17、js冒泡、跨域
$('.demo').on('click','i',function(event){
event.stopPropagation();//防止冒泡
});

18、line-height：兼容

19、遮罩层

20、其他
react、ECMAScript6/5(es6)、webpack、gulp、css3\html5、ajax等