前端
关注
分享
扫一扫
结合前端涉及的html、css、jquery、vue、bookstrap等的动画效果或者布局说明
镇杰。
这个作者很懒，什么都没留下…
展开
-
js获取屏幕高度、宽度
网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全文高：document.body.scrollHeight网页被卷去的高：document.body.scrollTop原创 2021-02-04 13:57:49 · 1465 阅读 · 0 评论 -
wangeditor 取消自动获取焦点
使用wangeditor 富文本编辑器的时候， 输入内容会被聚焦到页面wangeditor 便签中在node_module 中 找到wangeditor/release/wangeditor.js 或 wangeditor/dist/wangeditor.js将以下代码注释掉，this.selection.createRangeByElem($last, false, true);this.selection.restoreSelection();...原创 2021-01-18 14:17:39 · 1670 阅读 · 0 评论 -
web页面静态化
public function index(){ $index_module_file = "static/html/module/index.html"; //静态页面模板文件路径 $index_file = "static/html/index.html"; //生成静态页面文件路径 $express_time = 3600*24*10; //设置静态文件10天过期 if(file_exists($index_file)){ .原创 2021-01-13 09:47:59 · 345 阅读 · 0 评论 -
浏览器缓存详解:expires,cache-control,last-modified,etag详细说明
最近在对CDN进行优化，对浏览器缓存深入研究了一下，记录一下，方便后来者画了一个草图：每个状态的详细说明如下：1、Last-Modified在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记(HttpReponse Header)此文件在服务期端最后被修改的时间，格式类似这样：Last-Modified:Tue, 24 Feb 2009 08:01:04 GMT客户端第二次请求此URL时...原创 2020-11-30 10:24:05 · 871 阅读 · 0 评论 -
Web常见的安全问题及预防
1，SQL注入定义：SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，在管理员不知情的情况下实现非法操作，以此来实现欺骗数据库服务器执行非授权的任意查询，从而进一步得到相应的数据信息。防御：不要使用动态SQL：避免将用户提供的输入直接放入SQL语句中；最好使用准备好的语句和参数化查询...原创 2020-02-22 14:52:01 · 440 阅读 · 0 评论 -
对齐方式vertical-align、text-align、align-items、justity-content区别
（1）text-align 实现水平居中，比如我们要实现块状元素(block)内，子元素的水平居中;比如我们要实现div2元素在父元素div1内的居中;<style> .div1{ text-align:center } .div2{ display:inline-block }</style><div class="div1"> <div class="div2"></div>.原创 2020-07-21 17:13:31 · 4867 阅读 · 0 评论 -
css动画效果网站集合
http://www.animate.net.cn/ Animate中文网 http://ianlunn.github.io/Hover/ Hover.css https://two.js.org/examples/ Two.js https://www.swiper.com.cn/demo/index.html Swiper中文网 http://www.100sucai.com/tag/75/ 100素材网...原创 2020-07-09 14:01:27 · 11048 阅读 · 1 评论 -
HTML5鼠标9个事件
click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。从技术上说，这个事件并不是DOM2级事件规范中规定的，但鉴于它得到了广泛支持，所以DOM3 级事件将其纳入了标准。mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触原创 2020-07-03 10:21:16 · 1986 阅读 · 0 评论 -
HTML5触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，P转载 2020-07-03 09:59:15 · 384 阅读 · 0 评论 -
鼠标三种触发事件mousedown、mouseup、click关系及执行顺序
三个事件的触发时机mousedown当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生mousedown事件。与click事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生。mouseup当在元素上松开鼠标按键（左、右键均可）时，会发生mouseup事件。与click事件不同，mouseup事件仅需要松开按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。click当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，...原创 2020-07-02 14:35:10 · 10776 阅读 · 1 评论 -
html去除a标签点击时下划线
html代码:<a href="#">这里是A标签</a>CSS样式：a:link{text-decoration:none; } /* 指正常的未被访问过的链接*/a:visited{text-decoration:none; }/*指已经访问过的链接*/a:hover{text-decoration:none;}/*指鼠标在链接*/}a:active{text-decoration:none;}/* 指正在点的链接*/ ...原创 2020-07-02 14:20:41 · 2110 阅读 · 0 评论 -
CSS3中如何解决子元素继承父元素的opacity属性
问题css3中的opacity属性是用来设置 div 元素的不透明级别的，但是我们往往会遇到因为父级元素设定opacity后，子元素也跟着透明了，但是有时候我们只是想让背景是透明的，这该如何解决呢？错误的示例我们常常想到的方法是直接给子元素的opacity设定为1，如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>opacity</title&g转载 2020-07-01 15:11:54 · 1288 阅读 · 0 评论 -
解决前端样式IE兼容问题
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版转载 2020-06-04 17:23:50 · 530 阅读 · 0 评论 -
html超长图片、div向左固定移动效果
<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style> .big-big-div{ width: 100%;...原创 2020-04-30 16:57:45 · 1576 阅读 · 0 评论 -
html压缩图、多图片加载
首先下载 timthumb.php 文件（可到本人博客资源下载） 把 timthumb.php 文件放到项目中可直接通过链接访问到的位置，以TP5框架为例说明下，之前用ThinkPHP5框架踩坑过来的，一般框架都有一些自带的路由访问的规则，所以可以选择放在静态资源的路径下，然后就可以通过链接：localhost_name/static/timthumb.php访问，TP5静态资源设置可查看（h...原创 2020-04-30 16:05:47 · 414 阅读 · 0 评论 -
div向左、向右移动的动画效果
1.先把需要移动div定位到动画开始前的位置<head> <style> .box1{ position:relative; width: 50%; height: 10%; background-color: yellow; } ...原创 2020-04-05 23:04:46 · 8408 阅读 · 0 评论