大家好，我是一个闲着没事热衷于重复造轮子的不知名前端，今天给大家带来的是一个代码在线编辑预览工具的实现介绍，目前这类工具使用很广泛，常见于各种文档网站及代码分享场景，相关工具也比较多，如codepen、jsrun、codesandbox、jsbin、plnkr、jsfiddle等，这些工具大体分两类，一类可以自由添加多个文件，比较像我们平常使用的编辑器，另一类固定只能单独编辑html、js、css，第二类比较常见，对于demo场景来说其实已经够用，当然，说的只是表象，底层实现方式可能还是各有千秋的。
整理自 MDN web docs 的笔记，同时参考了 Web Bos 上的什么是 Flexbox系列视频。
最近开发后台，因为不想使用 ElementUI 和其他现成的 UI 框架，于是决定自己做。
多列布局在一个网页设计中非常常见，不仅可以用来做外部容器的布局，在一些局部也经常出现多列布局，比如下面圈出来的都是多列布局：
本文通过介绍如何利用flex和letter-spacing实现过渡动画效果，以及介绍一些实现动画的方式。同时，文章还讨论了如何利用flex实现居中效果，以及如何利用letter-spacing实现宽度改变时字母间距不变的效果。但是，文章也提到了一些缺陷，例如中文和英文的宽度不同，需要使用不同的letter-spacing值，以及动画时间不可控等问题。此外，文章还介绍了一种通过改变容器宽度来实现过渡动画的方法，但是这种方法也存在一些缺陷，例如需要使用will-change属性来减少paint范围等。总的来说，这篇文章提供了一些实现过渡动画效果的技巧，但是需要根据具体情况进行选择。"
有时候会做一些小的宽度变换, 比如居中到居左的变换, 例如上面的搜索的placeholder
1.在header.php中添加下面的代码，或者也可以单独写进一个js文件中然后在header.php中引入也可以。我是引入的。 <script type="text/javascript"> jQuery(document).ready(function(jQuery) { jQuery('.collapseButton').click(function() { jQuery(this).parent().parent().find('.xContent').slideToggle('slow
<html> <head> <title>div展开收缩代码</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bo
iframe的高度不会随着页面高度的变化而变化，可能会导致页面显示不全，或者页面下方有空白的问题。
有时候，我们在写查询条件的时候，查询条件会很多，会导致，查询条件就半屏幕，这样是不友好的。我们可以让查询条件，先只展示一部分，当点击展开的时候，在展示其他的，如下图:
.xControl { font-size: 15px; font-weight: bold; padding: 5px 0; box-shadow:0 0 20px #d0d0d0;/* 阴影 */ background-color: #FFFFFF;/* 背景颜色 */ border-bottom: 2px solid #e74c3c;/* 边 */ transition: all 0.1s linear; text-align: center; border-radius: 0 0 5% 5%; border-radius:4px; } .xControl a{ text-decoration: none; display: block; }
折叠效果是通过触发事件后，循环改变nav的宽度和cont的左边距实现cont盖住nav的视觉效果。但在代码中，并不能真的用for循环来做，那样在移动过程中js就会一直卡在循环中而不能执行其他代码，所以这里可以使用setInterval函数来做，它会每隔一段时间调用一次某个方法，格式为setInterval(调用函数，调用间隔时间，调用函数参数1,参数2,...);当任务完成时再通过clearInterval函数结束循环调用。 为了使移动更平滑，每次调用时只移动到目标位置之间的距离的10%.实现折叠的函数代码如下：
递归组件常用于在blog上显示注释、嵌套的菜单，或者基本上是父和子相同的类型，尽管具体内容不同。例如:
在官方最新版本的Matery主题版本中已经优化了代码块的问题，但在旧版本Hexo主题Matery中对hexo-prism-plugin只支持高亮显示，而且存在着许多的BUG。比如新版本的hexo-prism-plugin已经支持了代码块的一键复制和收缩功能，如果不手动对旧版本Matery原有的代码做改动，则代码块显示会存在一些问题。
新手帮助.gif 安装driver.js cnpm install driver.js -s 引入 import Driver from "driver.js" // 引入插件 import "driver.js/dist/driver.min.css" // 引入插件 import steps from "./dd" // 引入步骤 创建一个js文件，用于存放 step的提示, 内容如下 // 通过绑定元素 类名，id名的形式来 执行步骤， 注意第一个对象要写两次。 con
熟悉我们的小伙伴都知道，当我们的RTSP/Onvif流媒体服务器与摄像头可以进行网络连接时，通过RTSP/Onvif流媒体服务器自带的Onvif探测即可实现Onvif摄像头的设备IP探测，成功后返回需要的流地址，实现摄像头的PTZ云台控制，PTZ控制包含转动、变焦等。
最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。 在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。
在gitlab上面，有一个jQuery JSONView插件，地址为：https://github.com/yesmeck/jquery-jsonview
dist/ 通过 gulp 将 layuiAdmin src 目录的源代码进行构建后生成的目录（即：将 JS 和 CSS 文件进行了压缩等处理），通常用于线上环境。关于 gulp 的使用，下文也有介绍。 start/ 存放 layuiAdmin 的入口页面、模拟接口数据、layui
dist/ 通过 gulp 将 layuiAdmin src 目录的源代码进行构建后生成的目录（即：将 JS 和 CSS 文件进行了压缩等处理），通常用于线上环境。关于 gulp 的使用，下文也有介绍。
start/ 存放 layuiAdmin 的入口页面、模拟接口数据、layui
我是🏅有6年前端及跨平台开发经验、掘金/51CTO活跃作者、曾独立设计混开框架和重构方案并顺利落地 de 小鑫同学。 写作背景： 在热火朝天的前端框架演进的进程中，大多数的人都把目光关注到了 JavaScript / TypeScript 的身上，TailwindCSS作为最有争议但也是最受欢迎的一个 CSS 框架的产品我们也来看一下它到底好不好用，有什么优势~ 快速开始： 创建 vite + vue-ts 项目： yarn create vite 安装 Tailwind CSS 依赖： npm inst
jQuery 能做的 JavaScript 也都能做，但使用 jQuery 能大幅提高开发效率
这一节，我们将学习如何获取Grid当前选中行的信息 1.xml数据源内容: <?xml version="1.0" encoding="UTF-8"?> <Data> <Items> <Tot
$(this)就是将这个dom对象转换成jquery对象，就可以对这个对象进行操作；
1.1.3. 案例1：测试两种方式的区别【个数+顺序】
事情是这样的，项目最近有个需求。服务器有个图片空间，说白了就是个文件夹。文件夹的结构大家都知道，一层一层的。然后需要在前端以树形展示。
加载事件我们有两种方式，一种就是javascript直接写：window.onload来加载。还有一种就是我们的jQuery中的加载方式$(function(){})
概述：本节讲述的内容为当浏览器大小发生变化或者地图展示区域的大小发生变化时，地图的自适应调整。地图的自适应常见于以下几种情况：1、系统中有收缩或者全屏的按钮；2、按F12，进入调试状态。
Bootstrap是Twitter推出的一个用于前端开发的开源工具包，由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架，不用请UI设计师也能开发出中规中矩的网页，并且最重要的是支持html5、css3移动端自适应，现在很多所谓的三合一五合一网站是基于bootstrap搭建的。 我们来看一个简单的例子 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta
源码分析： Dropdowns.scss：下拉框模块 Javascripts/bootstrap/dropdown.js：实现下拉框响应 实现功能及原理： 下拉选项卡，默认不能实现显示选中项的功能 原理： 1、利用dropdown类作为定位点，然后让子级的列表dropdown-menu绝对定位实现，还需要加一个单击点作为设置data-toggle=”dropdown”才能做关联。 2、 需要js插件的支持 源码分析： 1、caret：实现向下的三角形，利用边框实现的 1.1、边框颜色默认是字
上节之后有粉丝私聊觉得，平台右上角的“主页/退出” 按钮已经过时。所以我们本节首先来优化下。
伸缩容器是display的计算值为flex或inline-flex的元素，其流内孩子就是伸缩项（flex item）
连着两天更新叙述性的文章大家可别以为我转行了！哈哈！今天就继续讲讲我们的.NET Core实战项目之CMS系统的教程吧！这个系列教程拖得太久了，所以今天我就以菜单部分的增删改查为例来讲述下我的项目分层之间的协同工作吧！如果你觉得文中有任何不妥的地方还请留言或者加入DotNetCore实战千人交流群637326624跟大伙进行交流讨论吧！
一、MVC <!doctype html> <html ng-app> <head> <meta charset="utf-8"> </head> <body>
8个前端常用HTML+CSS技巧教程 CSS是一个很独特的语言。看起来非常简单，但是某种特殊效果看似简单，实现起来就颇有难度。这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧，一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们，重新燃起对前端排版和特效的热爱和热情！1. 固定底部内容 这种是一个非常常见的布局方式，但是对于新手来说是比较常见的难题。 这种布局方式在后台管理系统中比较常见，当我们内容不足浏览器窗口高度时，底部内容需要固定在底部。当内容超出了浏览器窗口高度，
width: 1000px; //或 max-width: 1000px; margin-left: auto; margin-right: auto; 演示地址范例
一把伞的时间轴归档页模板文件 链接一：https://download.csdn.net/download/qq_42038623/21072565
vue.js是一种很流行的轻量级MVVM框架,那什么是MVVM架构呢？ 在这之前如果你了解后端框架，如laravel,thinkphp等等，他们的开发方式是MVC架构，何为MVC架构 简单来说就是，将一个项目分成三层。 M(Model)层为模型层主要用于数据库操作，执行数据的CRUD。 C(Controller)层为控制层只要用于处理业务逻辑，在设计到数据操作时，会调用M层的相关方法 V(View)层就是视图层主要用于展示数据，用户交互等等。
JavaScript 中的数组有很多特性：存放不同类型元素、数组长度可变等等，这与数据结构中定义的数组结构或者C++、Java等语言中的数组不太一样，那么JS数组的这些特性底层是如何实现的呢，我们打开V8引擎的源码，从中寻找到了答案。V8中对数组做了一层封装，使其有两种实现方式：快数组和慢数组，快数组底层是连续内存，通过索引直接定位，慢数组底层是哈希表，通过计算哈希值来定位。两种实现方式各有特点，有各自的使用情况，也会相互转换。
Vue.set()方法有三个参数，分别是数组，索引，新内容，用这个办法可以代替操作，以实时更新视图
今天看了一篇关于 CSS 的文章，文章用到的几个点，想和大家聊聊。 附「原文地址」大家可自己查阅。
1. 从Google Code加载jQueryGoogle Code上已经托管了多种JavaScript类库，从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽，能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是，如果用户访问那些发布在Google Code上的站点后它会被缓存下来。 这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本，而这些很容易做到,引入:
目前我司的后端主要是用PHP来写,发现我们后端的html+js没有采用组件的方式来做，导致代码之间重复率非常高,很难维护，举一个简单的粟子，比如现在我们有两个页面，创建和修改页面,这两个页面都有一个选择时间的控件(datePicker),由于我们没有采用组件化，我们需要分别在两个页面的html+js+css里分别写两遍同样的代码
同层渲染是利用原生技术来优化Web渲染一种技术，很多人了解它是起于微信开放社区发布的一篇关于小程序渲染原理剖析的文章。我将链接附上：
你是否曾经想过用花哨的、闪闪发光的粒子动画分吸引你网站用户的注意力，而同时又在后台加载一些数据呢？幸运的是，没有必要用诸如 Three.js 之类的 3D 库进行非常深入的图形编程。相反，你需要的是 CSS 和 JavaScript 的一些基本知识以及轻便的动画库（例如 anime.js）。最后我们应该得到以下结果：
作为一个前端小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。
Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。
MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：
有时候我们需要知道是否已经溢出，显示了省略号，可以用到clientHeight和scrollHeight的知识：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
