常见的伪类、伪元素

伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中,我们可以为其添加样式。伪类使用单冒号 “:” ; 伪元素使用双冒号 “::”一、伪类1、锚点关于锚点< a>有五个伪类,:link、:hover、:active、:focus、:visiteda:link{background-color:pink;}/品红,未访问/a:visited{color:orange;}/字..
分类: 其他 发布时间: 11-27 14:12 阅读次数: 0

实验室分享--display:flex

容器:采用Flex布局的元素项目:容器的所有子元素主轴:水平轴交叉轴:纵轴一、容器的属性flex-directionflex-wrapflex-flow(前两个属性合起来一起写)justify-contentalign-itemsalign-content1、flex-direction:决定主轴的方向(即项目的排列方向)。值:column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。row(默认值):主轴为水平方向,起点在左端.
分类: 其他 发布时间: 11-27 14:12 阅读次数: 0

JS canvas总结

canvas一、基本用法**< canvas width=“200” height=“200” >< / canvas><body οnlοad="draw()"> <canvas id="canvas" width="200" height="200" > 浏览器不支持才显示这段文字 </canvas> <script> function draw(){ var canvas=document.getEl
分类: 其他 发布时间: 11-27 14:11 阅读次数: 0

ES6 第二章 let 和 const

一、letlet用于声明变量,但是只在最近的代码块之内有效。for(i=0;i<2;i++){ let a=30; var b=20;}alert(b) //20alert(a) //a is not defined暂时性死区在代码块内,在使用let语句声明前,该变量都不可用。暂时性死区的本质就是,只要一进入当前作用域,要是使用变量就已经存在了,但是不可获取,只有声明了该变量,该变量才可以使用和获取。不允许重复声明: function test(){
分类: 其他 发布时间: 11-27 14:11 阅读次数: 0

大二第一次考核

1、选择器权重。!important > 行内样式 > id选择器>class | 属性选择器>标签选择器>通配符2、什么是Margin塌陷/合并?Margin塌陷:子元素设置了浮动,子元素会完全脱离文档流此时将会导致子元素无法撑开父元素的高度,导致父元素高度塌陷。Margin合并:块级元素的上外边距或下外边距直接接触/相邻时,会合并为一个外边距,这种合并行为叫做margin合并。3、什么是bfc?列举出几种触发bfc的方式bfc:块级格式化上下文bfc触发方式
分类: 其他 发布时间: 11-27 14:11 阅读次数: 0

ES6第三章 变量的解构赋值

一、数组的解构赋值1.从数组中提取值,按照对应的位置,一次赋值 let [a,b,c] = [1,2,3]; alert(a); //1 alert(b); //2 alert(c); //3
分类: 其他 发布时间: 11-27 14:11 阅读次数: 0

ES6数组的扩展

一、扩展运算符(…)1、含义:一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5可用于函数的调用例1:function add(x, y) { return x + y;}const numbers = [4, 38];add(...numbers) // 42例2:function f(v,w,x,y,z){ retur
分类: 其他 发布时间: 11-27 14:10 阅读次数: 0

ES6 对象的扩展、对象的新增方法、Symbol

一、属性的简洁表示法(1)在{}里直接写入变量和函数 var foo = "bar"; const baz = {foo}; console.log(baz); //foo:"bar"(2)函数直接返回对象 function f(x,y){ return {x,y}; } console.log(f(1,2)); //{x:1
分类: 其他 发布时间: 11-27 14:09 阅读次数: 0

实验室纳新页面总结

“我的信息”页面最后效果:问题:1.刚开始整体宽高都用了百分比来写,导致别人的页面发生了改变,我的页面的宽高也会受到影响。2.没有合理使用定位position:由于很多盒子没有定位,导致后面想要用position:absolute时,小盒子最近的已定位父元素已经不是位置上的父元素。所以在后期调整适配性时,“报名、一面、二面、结果”,这四个字是使用position:relative向右使用百分比不断移到合适的位置,但是这样的话,只要字数有了改变,就要在不同分辨率区间改变其的left值,十分麻烦。3.进
分类: 其他 发布时间: 11-27 14:09 阅读次数: 0

CSS伪类、伪元素

伪类与伪元素的区别区别:它们是否创造了新元素。伪元素:不存在于DOM文档中,伪元素用于创建一些不在文档树中的元素,并为其添加样式。它是虚拟的元素,是创造新元素,代表某个元素的子元素,则个子元素逻辑上存在,但却并不存在于文档树中。例如:我们可以通过 :before 来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。伪元素选择符:伪类:存在于DOM文档中,伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化
分类: 其他 发布时间: 11-27 14:08 阅读次数: 0

TTMS课程设计 管理员板块 前端页面+使用技术总结

一、部分实现效果1.管理员->管理员管理2.管理员->电影管理3.管理员->订单管理二、使用技术html+css使用jquery和ajax实现前后端交互三、主要代码1. jq+ajax提交表单数据$('#new_hall_form').on('submit', e => { //对表单数据序列化 e.preventDefault() const formData = $('#new_hall_form').serializeArray() v
分类: 其他 发布时间: 11-27 14:08 阅读次数: 0

JS红宝书-第22章-高级技巧

本章内容使用高级函数放篡改对象Yielding with Timers1.高级函数函数是复杂和动态的,一些额外的功能可以通过闭包来实现。由于所有的函数都是对象,所以使用函数的指针非常简单。1.1安全类型检测使用typeof操作符会导致检测数据类型时得到不靠谱的结果。instanceof在全局作用域下也会有很多问题。使用Object.prototype.toString.call()来判断是否为某个对象的类型。var toString = Object.prototype.toStri
分类: 其他 发布时间: 11-27 14:08 阅读次数: 0

webpack简介--webpack五个核心概念

1.2 webapck五个核心概念1.Entry入口:webpack从那个文件作为入口文件开始打包,分析构建内部依赖图。2.OutPut出口:webpack打包后的bundles输出到那里去,以及如何命名3.Loader帮助webpack去识别那些非js文件4.Plugins插件:可用于执行更范围更广的任务,插件的范围包括:打包优化、压缩、重新定义环境中的变量。5.Mode1.development:能够让代码在本地调试运行的环境2.production:能够让代码优化上线运行的环境.
分类: 其他 发布时间: 11-27 14:08 阅读次数: 0

webpack报错: Error: Cannot find module ‘webpack-cli/bin/config-yargs‘ (不降版本)

报错:webpack版本与webpack-cli版本之间不兼容的问题internal/modules/cjs/loader.js:883throw err;^Error: Cannot find module ‘webpack-cli/bin/config-yargs’Require stack:-C:\Users\Administrator\Desktop\前端\Webpack\node_modules\webpack-dev-server\bin\webpack-dev-server.js
分类: 其他 发布时间: 11-27 14:07 阅读次数: 0

解决npm error create-react-app my-app 报错

更换npm代理npm config set registry http://registry.cnpmjs.org单独执行三句命令:npm install -g reactnpm install -g react-domnpm install -g react-scripts最后重新创建!create-react-app first-demo成功!Happy hacking!为了以后下别的包快一点,可以再换回淘宝代理npm config set registry https:
分类: 其他 发布时间: 11-27 14:07 阅读次数: 0

react todoList 案例 知识点总结

文章目录一、最终效果二、实现功能三、通过学习到的知识1. 拆分组件、实现静态组件。注意 class 与 style 的写法2. 动态初始化列表,如何确定将数据放在哪个组件的 state中?3. 关于父子之间通信4. 注意 defaultchecked和 checked的区别,类似的还有: defaultvalue和 value5.状态在哪里,操作状态的方法就在哪里四、github链接一、最终效果二、实现功能添加 toddo删除 todo全选/取消全选 todo清除所有已完成 todo三、
分类: 其他 发布时间: 11-27 14:07 阅读次数: 0

react github搜索案例 知识点总结

文章目录最终效果1.ES6知识点:解构赋值+重命名2.消息订阅与发布机制3.fetch发送请求(关注分离设计思想)github链接最终效果1.ES6知识点:解构赋值+重命名let obj ={a,{b:2}}const {a} = obj // 传统解构赋值const {a:{b}} = obj // 连续解构赋值const {a:{b:value}} = obj // 连续解构赋值+重命名2.消息订阅与发布机制先订阅,再发布适用于任何组件内的通信在 compone
分类: 其他 发布时间: 11-27 14:07 阅读次数: 0

JS版数据结构之 栈与队列、异步线程、任务队列

文章目录一、栈1.定义2.实现3.扩展(1)清空数组的三种方法4.栈的应用(1)十进制转二进制二、队列一、栈1.定义栈:一种受限制的线性表,遵循后近先出(Last In First Out)2.实现class Stack { constructor() { this.items = [] } // 选择一个元素到栈顶 push(ele) { this.items.push(ele) } // 出栈 pop() { this.items.pop
分类: 其他 发布时间: 11-27 14:06 阅读次数: 0

JS版数据结构之 链表、原型链、哈希表

文章目录链表1.定义2.实现链表1.定义链表:线性表:0个或n个数据元素的有限序列。物理存储结构:顺序存储:用一段连续的存储单元依次存储线性表的数据元素。链式存储:内存地址可以是连续的也可以是不连续的,用指针来存放数据元素的地址。2.实现// 链点类class Node { constructor(element) { this.element = element this.next = null }}// 链表class LikedList { co
分类: 其他 发布时间: 11-27 14:06 阅读次数: 0

JS版数据结构之 树、搜索二叉树、平衡二叉树、红黑树

文章目录一、树二、二叉树1. 定义三、二叉搜索树1.定义2.实现3.遍历(1)先序遍历(2)中序遍历(3)后序遍历(4)最大值、最小值、查找四、平衡二叉树1.定义五、红黑树1.定义2.特性一、树双亲表示法: 顺序存储各个结点时,给各个结点添加一个变量,记录其父结点的位置。孩子表示法: 建立多个指针域,指向它所有子节点的地址,任何一个结点都会掌握他所有子节点的信息。孩子兄弟表示法: 从树的根结点开始依次采用链表去存储各个结点的孩子结点和兄弟结点,可以把一颗普通的树转换为二叉树。二、二叉树1. 定义
分类: 其他 发布时间: 11-27 14:06 阅读次数: 0