barkL-优快云博客

原创从学习者的角度来讲讲VUE2.x 2022-01-02更

作者注：一.Vue.js的安装方式1.CDN引入2.<script>标签引入3.npm下载，即npm install vue@2.6.14 -g学习vue，建议了解一下npm常用命令-g -S -s等自行了解

2022-01-02 21:32:57 310

原创 jquery实现轮播图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.12.4.min.js.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ .

2021-08-19 12:40:24 183

原创安装gulp-sass出现报错：Error: Cannot find module ‘sass‘

出现以下这种报错：查看gulp-sass下载官方的文档：给出了以下解决方法：大致意思是使用gulp-sass，你还要把node-sass或者dart-sass下载下来，再去下载gulp-sass；使用如下命令下载node-sass：npminstallnode-sass使用如下命令下载gup-sass亲测不会报错npm install sass gulp-sass --save-dev淘宝镜像源就用cnpmTo usegulp-sass, you mu...

2021-08-15 19:27:08 1580

原创 js自动生成表格（带删除功能）

运用到了关于触发对象target和事件委托的一些知识点；简单来说，谁触发了事件谁就是target对象；事件委托呢就是你想通过某个节点想触发某个事件，这个节点它自己不亲自来，它委托别的节点来，这个别的节点就是指它的父节点或者更高辈的节点；事件委托的好处：打个比方：就像table，ul这种节点它的子节点tr，td，li比较多的时候，你恰好又需要给这些子节点都绑定事件函数，给每个子节点都绑定的话，太浪费系统资源了，不如就委托给table，ul这种作为它们的父辈节的节点，给这些父节点添加事件绑定，然后获

2021-07-28 19:41:55 290

原创 js 跟随鼠标移动提示框

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ font-size: 30px; color: #000000; display:block; margin-top: 50px; border: #000000 so.

2021-07-27 15:02:55 669

原创 js选项卡

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> div { width: 200px; bor.

2021-07-26 13:55:04 79

原创帧动画 animation

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0;padding: 0; } .box.yuan2{ width: 100px; height: 100px; border: #ff0000 s.

2021-07-14 18:30:36 150

原创 CSS 3D立方体 transform的应用

利用transform中的3D转换方法rotateX();rotateY();2D转换方法translate();实现3D立方体。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0;padding: 0;..

2021-07-14 14:17:07 135

原创 CSS按钮开关，利用伪类元素选择器：after和transition过渡效果实现

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0;margin: 0; } input[type='checkbox']{ margin: 100px; -webkit-appearance: none;.

2021-07-13 20:19:32 690

原创简单影院列表，运用了属性选择器和伪类选择器

本例主要运用了一种属性选择器和两种伪类选择器：/*属性选择器：选择以.jpg结尾的img $指末尾 */ img[src $='.jpg'] { width: 50px; height: 60px; vertical-align: middle; } img[src $='...

2021-07-13 15:22:30 110

原创 overflow应用：hover悬浮样式

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> section { width: 800px; text-align: center; border: 10px solid #ffff7f; } .box{ width: 2.

2021-07-12 10:56:43 581

原创表单应用基础

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } form { width: 500px; background-color:goldenrod; border-rad.

2021-07-11 23:41:49 99

原创 form表单应用

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="https://www.bilibili.com/">  <table border="1" ce.

2021-07-10 16:51:21 105

原创 check全选全不选反选提交

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>check全选全不选反选提交</title> <script> window.onload=function(){ //全选checkbox selectAllCheck.onclick=function(){ var chks = document.ge.

2021-07-09 16:19:14 190

barkL的博客