随笔分类 - CSS
摘要：这是一款超酷css3 loading预加载动画特效。该loading特效共有4种不同的效果，分别通过不同的css3 keyframes帧动画来完成。 html结构 4种loading预加载动画的html结构分别如下： <!-- 效果一 --> <div class="spinner-box"> <d
阅读全文
摘要：Pom文件引入以下依赖 注意,创建SpringBoot整合jsP,一定要为war类型,否则会找不到页面 不要把jsp页面存放在Resources目录下,resources目录是给springboot打jar包读取配置文件用的,产生的jsp会被别人访问到,这是存放资源目录的文件 1.创建War类型的s
阅读全文
摘要：当使用文本编辑的时候，首先会使用 textarea ,但是，这个里面不能加入其它标签，也就是不能富文本化。 于是可以使用 contenteditable 就是给 div 加上该属性。就变得丰富起来。使用的时候，发现有两个问题。 1、placeholder 无法正常使用，解决办法，是加上一段css：
阅读全文
摘要：属性值 对部分生僻的input属性值解释： type="reset"： 可以一键清空form表单里面所有的数据 <form> <input type="text" name=""> <input type="password" name=""> <input type="email" name=""
阅读全文
摘要：这里的波浪只是侧面的，利用几个平面一部分弧旋转得到。 代码解读 定义 dom，容器中包含一行文本和3条做海浪特效的 <span>： <div class="sea"> <p class="title">the sea</p> <span class="wave"></span> <span clas
阅读全文
摘要：用margin还是用padding这个问题是每个学习css进阶时的必经之路。 css边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界(margin)：元素周围生成额外的空白区。“空白区”通
阅读全文
摘要：需求如下图，hover的时候改变图标颜色，图标为引入的svg img 一般的解决办法有：1.字体图标改变css的color属性；2.js在hover事件中切换图片；3.老一点的方案是hover切换背景？ 但是为了更小的开销，一般css为更好的解决方案，svg的颜色是在标签内通过fill属性写死的，所
阅读全文
摘要：性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加载卡顿、网页加载速度慢等问题，这篇文章将会将我以往对图片的处理做个总结。 不同格式图片优劣对比 有人可能会问说好的图片优化呢？怎么说到图片格式
阅读全文
摘要：BFC已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 什么是BFC 在解释 BFC 是什么之前，需要先介绍 Box Formatting Context的概念。BFC这个东西说常见的话你可能不觉得
阅读全文
摘要：线性渐变基本语法： background: linear-gradient(direction, color-stop1, color-stop2, ...); 为了创建一个线性渐变，必须至少定义两种颜色结点。同时，也可以设置一个起点和一个方向（或一个角度）。 参数：其共有三个参数 第一个参数表示线
阅读全文
摘要：一、前言 工作上遇到一个这样的需求，一个H5页面在APP端，如果勾选已读状态，则下次打开该链接，会跳过此页面。用到了html5 的本地存储 API 中的 localStorage作为解决方案，回顾了下Web缓存的知识，感觉自己了解得不够多，所以想整理下，加深理解。 Web缓存是指一个Web资源（如h
阅读全文
摘要：如何使用webpack构建多页面应用，这是一个我一直在想和解决的问题。网上也给出了很多的例子，很多想法。猛一看，觉得有那么点儿意思，但仔细看也就那样。 使用webpack这个构建工具，可以使我们少考虑很多的问题。 我们常见的单页面应用只有一个页面，它考虑问题，解决问题围绕着中心化去解决，因此很多麻烦
阅读全文
摘要：transition是css最简单的动画。 通常当一个div属性变化时，我们会立即看的变化，从旧样式到新样式是一瞬间的，嗖嗖嗖！！！但是，如果我希望是慢慢的从一种状态，转变成另外一种状态，怎么办？ transition可以做到。 第一问：哪些属性值变化会触发这个transition呢？ 一般常见的有
阅读全文
摘要：什么是属性前缀? 为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。例如： transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -we
阅读全文
摘要：使用html+css+js实现简易计算器，效果图如下： html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
阅读全文
摘要：css3属性中关于制作动画的三个属性：Transform,Transition,Animation。 1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 div{ tra
阅读全文
摘要：最近在写一个小程序，项目中遇到一个需求：页面滚动到tab切换菜单时，菜单fixed到页面顶部； 实现方法： 使用小程序的onPageScroll事件，滚动到指定位置添加fixed样式； bug1：获取指定位置错误，因为上面都是图片，在图片未加载出来时获取高度，高度值不对，解决办法就是在imgae上加
阅读全文
摘要：SPA简介： 单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 html 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 html 、 J
阅读全文
摘要：当自己的网站应用流畅运行之后，下一步您就需要让它看起来更美观生动。本文列举了21种实用的JavaScript和css库，可帮助您实现更加酷炫的效果。 1. Algolia 如果您想在自己的网站上添加具有自动完成功能的表单，那么您肯定会用到这个库。由于其精准和快捷的特点，我非常喜欢它带有的地图功能。这
阅读全文
摘要：本文主要收集一些移动web开发中常见的问题和解决办法，在日常的工作中遇到新的问题会不定时更新到文章中。 屏蔽阴影： -webkit-appearance:none 亲测，可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认还是带有圆角
阅读全文