运维教程

Emmet插件 & HTML表单

Emmet插件 HTML表单1. Emmet 语法 Emmet: 快速编写 html 文档的神器(VSCode 内置插件) 用法: 指令 + Tab 指令之间不能空格 语法借鉴了 CSS 选择器 结构: ! 内容: {text} 属性: [attr],#id,.class 重复: * 父子...

css基本选择器以及上下文选择器使用示例

css基本选择器以及上下文选择器使用示例1. 元素样式来源 预定义(浏览器默认的) 自定义(用户自己写的) 继承样式(简化,例如字体,字号,前景色) 2. 自定义样式类型 行内样式: ele.style ,当前...

CSS的上下文选择器

CSS 四种上下文选择器 类型 描述 示例 父子选择器 选择当前元素的所有子元素 div li 后代选择器 空格 选择当前元素的所有后代元素 div p, body * 同级相邻选择器 + 选择拥有共同父级且相邻...

运算符与循环结构的用法、异步请求fetch使用(响

一、运算符1.1、算数运算符 $year = date('Y'); echo $year. "年" . "br /br /"; // 除以4余数为0(能被4整除) 并且() 除以不能被100整除 if($year % 4 == 0 $year % 100 !== 0 ) { echo "{$year}是闰年"; }else{ echo "{$yea...

上下文选择的器的四种使用场景

程序实现 !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" / meta http-equiv="X-UA-Compatible" content="IE=edge" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title上下文选择器/title /head style ....

selector0314

!DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width 50%, initial-scale=1.0" title上下文选择器/title /head body div h2 class="he...

【记】滑动拼图验证码在搜索中的作用

开头 验证码应用于我们生活、工作的方方面面,比如注册登录账号、支付订单、修改密码等。下面我是在一次项目中利用滑动拼图验证码和搜索功能“合作共赢”的记录。 验证码展示...

Emmet语法与注册表单课程作业

Emmet语法 与 注册表单课程作业通过今天的学习,我学到了以下内容1. Emmet 语法 1:创建html5 结构使用 ! 2:创建文本 h3.title{hello 张金明} 对应的文本是: h3 class="titte"hello 张金明/h3 3:创建带有属...

C#滑动拼图验证码实现笔记

前言 C# 是一个现代的、通用的、面向对象的编程语言,它是由微软(Microsoft)开发的,由 Ecma 和 ISO 核准认可的。突发奇想,动手开发一个C#滑动拼图验证码,下面是我开发过程的记录。...

form表单制作

!DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width, initial-scale=1.0" titleDocument/title /head body !-- action:处理表单数据脚...

fabricjs设置canvas的clipPath后,背景色不显示解决办

当您在 Fabric.js 中设置 clipPath 后,该路径区域之外的任何内容都将被剪切,包括 canvas 的背景色。因此,如果您希望 canvas 背景色显示在剪切路径之外的区域,您可以使用以下两种方法之...

fabric.js 如何为Rect设置背景图片

在 Fabric.js 中,您可以为 fabric.Rect 对象设置背景图片。要设置背景图片,您需要创建一个新的 fabric.Pattern 对象,并将其设置为 fabric.Rect 对象的 fill 属性。 例如,以下代码将一个背景图...

ModStartBlog v6.9.0 博客赞赏功能,置顶热门推荐

ModStart 是一个基于 Laravel 模块化极速开发框架。模块拥有丰富的功能应用,支持后台一键快速安装,让开发者能快的实现业务功能开发。 系统完全开源,基于 Apache 2.0 开源协议。 功能...

【总结】Java实现短信验证码

背景 Java是一种流行的编程语言,验证码是一种常用的网络安全技术。Java发展至今,网上也出现了各种各样的验证码,本人初学Java,下面是我用Java实现短信验证码的总结。 截图展示 实...

vue生产时去掉console.log

安装npm install babel-plugin-transform-remove-console —save-devbabel.config.js文件 module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], 'env': { 'development': { 'plugins': ['dynamic-import-node'] }, // 增加以下配置编译...

前端选择器作业

视音频元素 audio src="" controls/audio divvideo src="Godzilla 2 Trailer.mp4" width="600" controls poster="121.jpg"/video/div 上下文选择器 style .list { width: 360px; } /* 父子选择器 */ .list .item { border: dotted blueviolet;...

office文件的导出导入

一、导入excel tp6导入excel文件使用phpoffice 使用composer安装office composer require phpoffice/phpspreadsheet 安装成功后项目的composer.json可以看到 具体代码 /** * 导入excel */ public function importData(){ // 接...

CSS 基本概念及常用选择器

CSS 基本概念 CSS 全称 Cascading Style Sheets,缩写为 CSS 。 CSS(层叠样式表)用于设置网页的样式及布局。比如,可以更改内容的字体、颜色、大小以及间距,或是将其分列,或是添加动画及...

前端知识选择器 以及css 引入三大方式

css 书写方式分三种 引入 行内样式 文本样式 选择器分为 4类 父子选择器 后代选择器 空格 兄弟选择器 + 统计选择器 ~ html实例 ulid=uliliclass=lieclass类名选择器/liliclass=fuahref=/a/lili测试专用...

3.10是作业呀

补作业补写第一天的作业;记录下markdown格式; ———————————————————————————————————————— 插入一下表格 id name xingbie 1huangxiaomingmale2hei...

选择器的应用场景

选择器上下文选择器上下文选择器 父子选择器(标识符“”,仅限父子使用) 代码演示: ul class="demo" style="border: 1;" li class="itme1"红色/li li class="itme2"蓝色/li li class="itme3"绿色/li li class="...

前端学习-4

上下文选择器 父子: (仅限父子) 后代: 空格 (后级所有元素,包括子集,孙子,重孙…) 兄弟: + (相邻的下一个元素,紧跟的且只有一个) 同级: ~ (与当前元素同级的后面的全部元素) 【本文转自...

CSS的上下文选择器使用示例

CSS 基础1. 标签 video : 视频元素 audio : 音频元素 iframe : 内联框架标签 2. 元素来源 预定义(浏览器默认的) 自定义(用户自己写的) 继承样式(简化,例如字体,字号,前景色) 如图: 3. 自定义样式...

第四课:位置选择器的四种类型以及基本使用

在CSS选择器中,在最基本的标签选择器(div,P等)和属性选择器([],.class,#id)之外,稍微有点难度的就是位置选择器:所谓位置选择器就是根据已经明确的选择内容通过一定的表示方法,选择出其...

伪类选择器的相关学习

伪类选择器: 根据元素的 位置或状态 来匹配相关元素,相比标签/属性/上下方选择器相比,其最大的优势是, 不用在原始的html文件上做额外操作 . 结构伪类:依据元素的位置来选择 核心结构...

伪类选择器与选择器权重的实例演示,盒子计算大

一. css中的选择器及其权重 概括:当出现样式层叠时(使用不同的选择器但是匹配到的是同一个元素且设置的是同一个样式属性)由选择器的权重或者在样式表中的位置决定 1. 选择器权...

怪异盒模型以及伪类运用以及新增选择器

知识点: 伪类 分为结构味蕾 和状态伪类 结构伪类为 nth-child frist-child last-child nth-last-child 状态伪类 hover 鼠标悬停 enabled 有效空间 disabled 禁用控件 checked 选中控件 required 必选控件 focus...

伪类选择器与盒模型

!DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width, initial-scale=1.0" link rel="stylesheet" href="fake.css" title结构伪类选择器...

伪类选择器与选择器权重的实例及盒子计算大小

程序实现 !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" / meta http-equiv="X-UA-Compatible" content="IE=edge" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title上下文选择器/title /head style p...

伪类选择器和选择器的权重详解

伪类选择器 1.1 结构伪类 1.:nth-child() ul class="demo" style="border: 1;" li class="itme"红色/li li class="itme"蓝色/li li class="itme"绿色/li li class="itme"粉色/li li class="itme"中国 ul li class="itme"北京/li li clas...

这是第五天学习CSS的知识

这是我学习的第五天CSS结构伪类’只有一级用空格" class="reference-link">1.查询路口:七点,可以是父级,也可以是起始兄弟,仅限子元素或同级兄弟,尽量用’’只有一级用空格 传统:...

前端学习-5

选择器权重 原子选择器 tag class id 选择器的权重: htmlh1 class="a" id="b"这是一个标题/h1 样式 h1{color:red;} .a h1{color:yellow} #b.a h1{color:gerrn} 伪类选择器 :hover : 鼠标悬停 :enabled : 有效控件 :dis...

这是第五天学习的权重的知识

这是权重权重我在这里就不一一上次效果图了一次性展示吧 权重(002)(001) html body h1.title { color: green; background-color: violet; } 权重(003)(002) html body h1 { color: red; background-color: violet; } 权重:(...

关于伪类选择器,选择器权重,以及box-sizing属性

通过3月15日直播课程的学习,熟悉了选择器中的伪类选择器的应用,掌握了关于选择器权重的相关知识,以及box-sizing属性的实际用法和好处。 1. 伪类选择器 伪类选择器分类两种:一是结构...

这是学习的状态伪类

状态伪类根据当前元素的状态来设置 获取焦点时选择时边框变色 .login :focus { outline: 1px solid red; border-bottom: none; } 效果图 所有必填项添加填色 .login :required { background-color: rgb(241, 19, 11);...

Web开发环境配置与Markdown常用语法

一. chrome浏览器下载与常用插件 操作系统: windows 10 推荐: Chrome浏览器 + Firefox 火狐浏览器 此处用chrome下载演示 1. chrome浏览器下载地址:https://www.google.cn/intl/zh-CN/chrome/ 点击下载会自动识...

这是学习的盒模型

盒模型 { margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 150px; height: 100px; 五大属性 `width`:(宽) `height`:(高) `padding`:内边距 `border`:外框 `margin`:外边距 border可见属性 可设置:`width`,`styl...

实际演示字体图标的使用

一. css外部字体图标 阿里巴巴星矢图标库:https://www.iconfont.cn/ 阿里巴巴星矢图标库 第一步,打开网页注册登录,搜索需要的图标 第二步,添加图标至项目组,没有项目,新建一个即可...

图标的使用

图标演示 !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width, initial-scale=1.0" title图标/title link rel="stylesheet" href="for...

icon font 和媒体查询的运用

link rel="stylesheet" href="//at.alicdn.com/t/c/font_3927980_xjos8pca4.css" style .iconfont { font-family: "iconfont" !important; font-size: 50px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -m...

伪类选择器、选择器权重及盒子模型

伪类 CSS 伪类是添加到选择器的关键字,根据元素的位置和状态来选择匹配的 子元素 。 1,结构伪类,与关系选择器类似但不一样。用来选择一组兄弟元素中的特定元素,查询入口可以...

VUE3 vue.config.js配置

提示:npm配置的写法,vite大致差不多,名称不太一样。devServer在vite里面是server const { defineConfig } = require('@vue/cli-service') const path = require('path'); const webpack = require('webpack'); const development...

插入字体图标

!DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width, initial-scale=1.0" titlecase/title link rel="stylesheet" href="icon.css" /head b...

第五课:简单的页面结构布局,字体图标和媒体查询

先综合说明一下,再来上代码和效果 页面结构 最常见的页面结构就是上中下也即header/headermain/mainfooter/footer三项,通过分别的CSS来将整个页面做切隔,显示代码如下: body header头部/header ma...

专门处理网络请求的axios的安装及其示例与管理员

题目1:专门处理网络请求的axios的安装及其示例 1. 2. 3. 4. 5. 6. 7. 题目2:管理员查询数据与添加数据一.文件:1.App.vue文件: template el-container class="layout" style="height: 100%" aside style="height:...

VUE TS语法tsconfig.json配置

tsconfig.json配置文件 { "compilerOptions": {//编译器选项 "target": "esnext",//用来指定TS编译后的版本,esnext代表最新版本 "module": "esnext",//指定要使用的模块化规范版本,如果设置了outFile,模块化就...

伪类选择器与选择器权重以及盒子模型的实例演

1. 伪类选择器 根据元素的 位置或状态 来匹配 子元素 1.1 结构伪类 与上下文选择器很相似 后文演示所用 HTML 代码如下: !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" / meta http-equiv="X-UA-...

flex语法简单的导航栏

这是用flex编写的简单导航栏 直接上代码吧 !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width, initial-scale=1.0" title...

音视频元素及 css 样式及优先级作业(4种选择器的

音视频元素及 css 样式及优先级作业1.音视频元素 视频标签 video src="demo.mp4" width="300" controls muted autoplay loop poster="girl.jpg "/video /br controls 控制按钮 muted 播放时静音 autoplay 自动播放 loop 循...

flex写一个简单导航, 以及实例演示课堂中学到的

通过学习,熟悉flex弹性盒子布局方式.以及了解了几个grid的几个属性. 1.通过flex弹性盒子布局设计一个简单的导航 html代码如下: header nav a href=""首页/a a href=""男装/a a href=""女装/a a href=""家...