大前端
一些前端的案例
益生菌冻干粉
这个作者很懒,什么都没留下…
展开
-
404页面
HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="cs原创 2021-01-09 13:25:17 · 131 阅读 · 0 评论 -
使用node.js对mongodb进行增删改查
文章目录准备工作导入一些准备好的数据一、连接数据库二、增删改查1.创建集合添加数据2.查询文档3.删除文档4.更新文档准备工作使用Node.js操作MongoDB数据库需要依赖Node.js第三方包mongoose使用 npm install mongoose 命令下载导入一些准备好的数据下载好后,先提前往数据库中导入一些数据这里有一个user.json文件,将其导入数据库中。mongodb数据库导入数据mongoimport -d 数据库名称 -c 集合名称 --file 要导入的原创 2020-09-04 10:09:10 · 487 阅读 · 0 评论 -
简单理解 Node.js中模块加载机制
模块查找规则-当模块拥有路径但没有后缀时require(’./find.js’);require(’./find’);require方法根据模块路径查找模块,如果是完整路径,直接引入模块如果模块后缀省略,先找同名js文件再找同名js文件夹如果找到了同名文件夹,找文件夹中的index.js文件如果文件夹中没有index.js文件就会去当前文件夹中的package.json文件夹中查到mian选项中的入口文件如果找指定的入口文件不存在或者没有指定入口文件就会报错,模块没有找到模块查找规则-原创 2020-08-28 11:01:59 · 159 阅读 · 0 评论 -
gulp下载安装以及简单使用
文章目录准备工作安装node安装nrm(可选)一、Gulp能做什么二、使用步骤2.代码演示3.gulp插件准备工作官方快速入门指南:https://www.gulpjs.com.cn/docs/getting-started/quick-start/安装nodenode下载地址:https://nodejs.org/zh-cn/下载,安装好后,可通过命令行 node -v ,检查是否安装成功。(显示版本号,即安装配置成功)。安装nrm(可选)nrm(npm registry manag原创 2020-08-27 13:06:12 · 1594 阅读 · 0 评论 -
Jquery插件实现 瀑布流+预加载
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、Jquery插件二、使用步骤1.查看案例源码2.实现预加载3.参考结构总结前言在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器原创 2020-08-25 10:37:07 · 357 阅读 · 0 评论 -
Less安装、使用及插件推荐
less安装安装node.js,版本8.0以上,网址:http://nodejs.cn/download/检查是否安装成功,使用cmd命令(win10 是window+r 打开运行 或在搜索框中 输入cmd) — 输入“node -v”查看版本即可。基于nodejs在线安装less,使用cmd命令“npm install -g less”即可检查是否安装成功,使用cmd命令 “lessc -v”查看版本即可less使用我们首先新建一个后缀名为less的文件,在这个less文件里面书写less原创 2020-08-19 10:31:31 · 947 阅读 · 0 评论 -
响应式布局中min-width与max-width的使用
本文部分参考于奈良鹿手稿https://www.cnblogs.com/lozio/archive/2015/07/26/4677738.html响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。媒体查询为了能完成响应一定会用到媒体查询媒体查询是CSS3新语法使用媒体查询,可以针对不同的媒体类型定义不同的样式可以针对不同的屏幕尺寸设置不原创 2020-08-17 12:03:56 · 4005 阅读 · 0 评论 -
CSS实现登录表单毛玻璃效果
效果图html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" h原创 2020-08-08 17:17:43 · 2893 阅读 · 0 评论 -
JavaScript实现打字机效果
效果图html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" h原创 2020-08-08 10:50:32 · 621 阅读 · 1 评论 -
CSS 发光文本悬停效果
效果图HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet"原创 2020-08-07 22:21:53 · 272 阅读 · 0 评论 -
Javascript 实现Tab栏
需求点击tab栏,可以切换效果点击 + 号,可以添加tab项和内容项点击 x 号,可以删除当前的tab项和内容项双击tab项文字或者内容项文字,可以修改里面的文字内容效果图比较简陋页面布局部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2020-08-03 20:21:43 · 545 阅读 · 0 评论 -
使用Bootstrap实现轮播图
下载Bootstrap下载地址:https://v3.bootcss.com/getting-started/#download建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了。注意: 某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系。注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所有插件之前引入页面)。原创 2020-08-02 17:56:55 · 976 阅读 · 0 评论 -
Javascript实现轮播图功能
刚结束了一个月的html+css+JavaScript的学习。学JavaScript一定会做一个轮播图的案例,因为太经典了。用Gifcam做出来的gif图有点大,CSDN要求上传的图片在5M以内,5M的话就看不到轮播的效果了,也没专门去找压缩软件,所以就不放效果图了,把用到的图片放到末尾了,有需要的把html中图片路径改一下就能用了。提醒一下,用到的动画函数和轮播图的功能实现,都是通过引入js文件的形式实现的,在html里可以看到,两个文件的引用。功能需求鼠标经过轮播图模块,左右按钮显示,离开隐藏原创 2020-08-02 16:44:49 · 461 阅读 · 0 评论