移动Web开发
文章平均质量分 65
饮尽杯中月
这个作者很懒,什么都没留下…
展开
-
移动端特效
总结案例1.轮播图需求:1.可以自动播放图片2.手指可以拖动播放轮播图实现:小圆点跟随变化:①小圆点跟随变化效果②把ol里面li带有current类名的选出来去掉类名 remove③让当前索引号 的小li 加上 current add④但是,是等着过渡结束之后变化,所以这个写到 transitionend 事件里面手指滑动轮播图:①手指滑动轮播图②本质就是ul跟随手指移动,简单说就是移动端拖动元素③触摸元素 touchstart: 获取手指初始坐标④移动手指 touchm原创 2021-01-03 20:00:49 · 179 阅读 · 0 评论 -
移动端web总结
1.流式布局(百分比布局)1.流式布局,就是百分比布局,也称非固定像素布局。2.通过盒子的宽度设置为百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。2.flex布局1.flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。2.当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。伸缩布局 = 弹性布局 = 伸缩盒布局 =原创 2020-12-03 11:10:17 · 254 阅读 · 0 评论 -
响应式布局
阿里百秀案例1.width:100%;1.1 box-sizing为content-box时width:100%;表示width=父级的width父级的width不包括其内边距和边框值1.2 box-sizing为border-box时width:100%;表示width=父级的width父级的width包括其内边距和边框值1.3实践3处的空白间隔:1号盒子padding-right:10px 2号盒子width:100%,此处为默认的content-box所以width:100原创 2020-12-02 15:16:57 · 947 阅读 · 0 评论 -
rem布局
苏宁1.body的设置1.1 less + 媒体查询 + remmax-width: 750px;可以省略因为给了width:15rem;写死了body { min-width: 320px; /*给了width:15rem;写死了*/ width: 15rem; margin: 0 auto; line-height: 1.5; font-family: Arial,Helvetica; background: #F2F2F2;}1.2 f原创 2020-12-01 12:40:42 · 138 阅读 · 0 评论 -
flex布局
1.CSS3中行高=高时,文字没有垂直居中原因:设置box-sizing:border-box后设置的盒子的高,包含padding和border,所以此时想文字垂直居中,需要行高=高-padding-border才行。原创 2020-11-28 12:23:22 · 634 阅读 · 0 评论 -
流式布局
1.精灵二倍图原因:精灵图缩放后位置发生了变化二倍精灵图做法:1.在firework里面将精灵图缩放为原来的一半2.根据大小 测量坐标3.注意代码里面background-size也要写:原来精灵图的一半注意:因为虽然在firework里面将缩放为一半后测量的,但是实际导入背景的精灵图没有缩放 */.sou { /* 精灵图缩放后位置发生了变化 */ /* 二倍精灵图做法: */ /* 1.在firework里面将精灵图缩放为原来的一半 */ /* 2.根据大原创 2020-11-26 09:45:52 · 118 阅读 · 1 评论