CSS - 随笔分类 - 青瑟少年

wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）

摘要：CSS3的出现给网站页面增加了活力，网站增色不少，有这么小小的一款插件就能做出很多动画效果。最重要的是它：简单易用、轻量级、无需 jQuery......他就是wow.js 地址：https://daneden.github.io/animate.css/ 也可以在这个地方看各种演示下面就让我们阅读全文

posted @ 2019-04-11 16:24 青瑟少年阅读(2881) 评论(0) 推荐(0)

CSS 外边距(margin)重叠及防止方法

摘要：边距重叠解决方案(BFC) 首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文” 两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边阅读全文

posted @ 2019-04-02 16:05 青瑟少年阅读(12677) 评论(2) 推荐(1)

浅谈CSS3 box-sizing 属性有趣的盒模型

摘要：盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有两种标准的，一个是标准模型，一个是IE模型。从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型的宽高是内容(content)+填充(paddi 阅读全文

posted @ 2019-04-02 15:23 青瑟少年阅读(560) 评论(0) 推荐(0)

移动端上拉刷新，下拉加载效果

摘要：前言在移动端H5网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如iscroll，pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。实现原理下拉刷新实现下拉刷新主要分为三步：监听原生touchstart事件，记录其初始阅读全文

posted @ 2019-03-26 14:24 青瑟少年阅读(3244) 评论(0) 推荐(1)

如何让div中的table水平居中

摘要：有时候在div中加上 <div style="text-align:center"></div>里面的table是不会居中的我们可以在table中加上 margin:auto 解决此问题。阅读全文

posted @ 2019-03-01 15:33 青瑟少年阅读(10881) 评论(0) 推荐(0)

倒计时5S秒自动关闭弹窗

摘要：弹窗文字内容 x 倒计时s自动关闭阅读全文

posted @ 2019-01-16 14:40 青瑟少年阅读(1171) 评论(0) 推荐(0)

多行文字内容溢出显示点点点（...）省略号

摘要：1、常规css方法——使Firefox以外主流浏览器文字溢出省略号表示下图为此常用方法在各个浏览器下的表现： IE6浏览器下 IE6浏览器下 IE7浏览器下 IE7浏览器下 chrome谷歌浏览器下 chrome谷歌浏览器下 Safari浏览器下 Safari浏览器下 opera浏览器下 oper 阅读全文

posted @ 2019-01-14 18:08 青瑟少年阅读(4580) 评论(0) 推荐(1)

解决IE6-IE7下li上下间距变大问题

摘要：在IE6/7下li会向下产生大约2px的外边距解决方法：li{vertical-align:top;}或者 li{vertical-align:bottom;} 解决问题！阅读全文

posted @ 2019-01-03 11:37 青瑟少年阅读(308) 评论(0) 推荐(0)

CSS3制作上下跳动动画箭头效果

摘要：动画效果如下：代码如下：阅读全文

posted @ 2018-11-08 17:50 青瑟少年阅读(10030) 评论(0) 推荐(0)

视频文件列表hover添加视频播放按钮

摘要：默认效果图：鼠标hover效果：代码如下：阅读全文

posted @ 2018-10-18 18:15 青瑟少年阅读(878) 评论(0) 推荐(0)

PPT在HTML网页上播放方法

摘要：项目中遇到一个需求：要求PPT在HTML网页上播放，而且要像电脑一样播放PPT，大家能想到的是什么方法？印象中我好像有在网上见到过PPT模板网站上的PPT可以播放，赶紧百度搜了下发现都是用第三方软件转的视频播放，显然不符合我的项目需求。后来网上找到一个方法： 1、先把PPT上传到服务器上（HTT 阅读全文

posted @ 2018-10-16 17:43 青瑟少年阅读(15626) 评论(1) 推荐(0)

PC端移动端不同屏幕大小下响应式布局

摘要：先上效果图： PC端效果：移动端效果：代码如下： pc.css 样式代码： mobile.css 样式代码：我设置的临界点是699px,实际项目中大家可根据项目需求来设置更为精准的不同屏幕下的css,一般考虑PC端，Pad，手机端三种就可以了！阅读全文

posted @ 2018-09-29 10:39 青瑟少年阅读(1756) 评论(0) 推荐(0)

原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

摘要：项目要求页面兼容IE6,7,8等浏览器，我们可能会遇到这个轮播效果，轮播板块要求：无限循环、自动轮播和手动切换功能，每一次滚动一小格，网上有很多这类插件，例如:swiper等！但是很多都是不兼容IE6,7,8这些低级浏览器的，没有办法，只能自己写一个类似的轮播插件废话不多说，直接上代码希望这篇阅读全文

posted @ 2018-09-28 10:58 青瑟少年阅读(955) 评论(0) 推荐(0)

ajax点击加载更多数据图片（预加载）

摘要：本地测试dataNews.json文件: 点击更多图片，加载2条数据，当数据加载完了，就显示 “没有更多了” 欢迎大家留言评论阅读全文

posted @ 2018-09-28 10:37 青瑟少年阅读(1799) 评论(0) 推荐(0)

如何使用纯CSS制作特效导航条？

摘要：先上张图，如何使用纯 CSS 制作如下效果？在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦阅读全文

posted @ 2018-04-06 16:39 青瑟少年阅读(8207) 评论(0) 推荐(0)

页面内容不够高footer始终位于页面的最底部

摘要：相信很多前端工程师在开发页面时会遇到这个情况：当整个页面高度不足以占满显示屏一屏，页脚不是在页面最底部，用户视觉上会有点不好看，想让页脚始终在页面最底部，我们可能会想到用： 1.min-height来控制content中间内容区高度来让页面高度能够占满显示屏一屏，但是大型网站页面比较多的情况下foo 阅读全文

posted @ 2018-04-06 16:05 青瑟少年阅读(4861) 评论(0) 推荐(0)

CSS3字体发光效果

摘要：博客页面左上角的“猿来是王者”文字已制作发光效果，分享方法如下: text-shadow 该属性为文本添加阴影效果 h-shadow: 水平阴影的位置(阴影水平偏移量)，可为负值，必需 v-shadow: 垂直阴影的位置(阴影垂直偏移量)，可为负值，必需 blur: 阴影模糊的距离(默认为0)，可选阅读全文

posted @ 2018-03-19 10:12 青瑟少年阅读(21053) 评论(15) 推荐(0)

猿来是你三十而立，砥砺前行，不忘初心，勇闯猿类

随笔分类 - CSS