css
_六月
先放着行不
展开
-
swiper插件自定义切换箭头按钮
不知道大家在使用swiper时有没有遇到这样一种需求把左右切换的箭头移到容器的外面,自定义箭头的样式。 给swiper容器再加一个父容器,两个容器之间留下间隙,箭头定位到间隙之间就ok了。 箭头默认是绝对定位的,给父容器一个相对定位,就能够调整箭头位置。此外箭头用的是背景图,改变箭头大小的同时记得改变背景图大小原创 2017-11-01 16:52:37 · 19444 阅读 · 1 评论 -
使用swiper写的m站横向滑动效果
先看效果 常规实现方案是设置overflow-x:scroll;并隐藏滚动条,效果并不会这么流畅,有惯性,从用户的角度说就是丑。 swiper自带的freemode其实就已经实现这种效果了,有兴趣的同学可以去官网api文档查看它的freemode介绍,我们要做的只是将其限制在我们想要它展现的区域范围内。 其实很简单,只需要给其外容器和其本身都加上overflow:hidden便可实现原创 2017-11-24 10:19:30 · 2494 阅读 · 0 评论 -
阻止拖拽滑动哪些事(主要是移动端)
也就是所谓的移动端滚动穿透问题 一、body{ overflow:hidden }。一般PC端这样就行了,但在移动端可就不行了,因为他有touchmove。 二、可以阻止弹层的touchmove事件,但如果你的弹层内的内容需要滑动,这种方法pass 三、后来找到一个比较简单粗暴的方法body,html { overflow: hidden; // 适用PC端模拟时的鼠标滚轮,...原创 2018-04-11 14:52:07 · 2385 阅读 · 0 评论 -
那些用起来特爽的css
虽然爽,但IE和低版本的浏览器估计都不支持吧。。。 一、遮罩mask:url(..);mask-image:..; 用起来和background几乎差不多。能通过background-color改透明背景图、图标的颜色,写导航的小图标比较爽。 二、粘性定位position: sticky;(这玩意在谷歌里面支持,在同是webkit内核里的360居然不支持,是我版本太低了吗。。。) 在一定区...原创 2018-04-12 10:30:25 · 146 阅读 · 0 评论 -
兼容性的一些处理,未完待续
一、IE7不支持position:fixed.ie{ position: fixed; //其他支持的用法 _position: absolute; //不支持的用法 _clear: both; _top:expression(eval(document.compatMode && ...原创 2018-04-22 22:04:20 · 129 阅读 · 0 评论 -
web技术夯实基础篇(三)—— css
一、选择器:id,class,元素名,属性,伪类(:hover,:nth-child),伪元素(:before),*,选择器组 一些有趣的伪元素 ::first-letter:块级元素第一行第一个字。 ::first-line: 块级元素第一行 ::selection:被用户选中高亮的部分 选择器组: A + B:B是A后面紧跟的元素 A ~ B:B是A后面任意元素二、单位 绝...原创 2018-06-26 14:53:58 · 153 阅读 · 0 评论