前端html css
第九篇 css - css3 新特性总结 - 【选择器 + 新样式 + 颜色渐变 + 动画 + 布局】
选择器 属性选择器 1、[attr]：选择包含 attr 属性的标签 2、[attr=value]：选择 attr 属性值为 value 的标签 3、[attr^=value]：选择 attr 属性值以 value 开头的标签 4、[attr*=value]：选择 attr 属性值包含 value ......
第十篇 css - 盒子 - 【 盒子模型 + 盒子属性 + 盒子背景样式 + 盒子边框样式 + 盒子居中 】
盒子模型概述 1、概念 浏览器会根据 CSS 基础框盒模型（CSS basic box model），将元素表示成矩形的盒子，CSS 决定这些盒子的大小、位置以及属性 2、盒子组成 每个盒子由 四 个区域组成 1、内容区域 content area 2、内边距区域 padding area 3、边框 ......
第八篇 css - 布局 - 【 浮动布局 + 定位布局 + flex 伸缩盒布局 + grid 网格布局 】
普通流 文档流 流式布局 分为 1、普通流 2、定位流 3、浮动流 不同流内的 块级元素 和 行内元素 的 布局方式 不同 布局方式用 FC 格式化上下文 来命名 1、块级格式化上下文 【 BFC 】 2、内联格式化上下文 3、层叠格式化上下文 4、灵活格式化上下文 块级格式化上下文 BFC 什么是 ......
微前端架构的业务价值：实现独立部署、快速迭代和按需加载
随着互联网应用的不断发展和迭代，传统的单体应用架构已经逐渐无法满足现代应用的需求。为了更好地适应快速变化的市场和业务需求，微服务和微前端架构成为了近年来的热门话题。其中，微前端架构作为前端开发的新兴架构模式，不仅可以提高开发效率、迭代速度和用户体验，还可以提高团队的协作效率和代码复用率，具有很高的业... ......
第七篇 css - 样式 - 【 列表样式 + 表格样式 + 其他样式 】
列表样式 1、list-style-type 2、list-style-position 3、list-style-image 列表样式解析 1、html 有三种类型的列表 1、无序列表 2、有序列表 3、自定义列表 2、设置列表标记有 序号 圆点 圆圈 图片 ... 3、list-style 简写 ......
第六篇 css - 样式 - 【 字体样式 + 文本样式 】
字体样式 1、color 2、font-size 3、font-family 4、font-style 5、font-weight 字体样式解析 1、font-family 该属性用于设置字体 1、网页中常用的字体有宋体、微软雅黑、黑体等 如果字体名中包含 空格、#、$ 等符号，则该字体必须加英文状 ......
第一篇 css - 基础 - 【 概述 + 应用 + 语法 + css 知识体系 】
css 概述 1、什么是 css css 即 层叠样式表 【 英文全称：Cascading Style Sheets 】 css 是一种用来表现 HTML 或 XML 等文件样式的计算机语言 CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化 2、网页组成 CSS 是 ......
第四篇 css - 基础 - 颜色
颜色基本概述 1、颜色 颜色是指不能透过其他颜色的混合调配而得出的“基本色”，以不同比例将原色混合可以产生出其它的新颜色。 由于人类肉眼有 三种 不同颜色的感光体，因此所见的色彩空间通常可以由 三种 基本色所表达，这三种颜色被称为“三原色” 一般来说叠加型的三原色是 红色、绿色、蓝色 又称三基色，用 ......
第五篇 css - 单位值
css 单位 css 单位主要分为 1、相对单位 2、绝对单位 相对单位 相对单位，是相对于当前元素的字号 font-size 或者视口 viewport 尺寸。 1、em: 1em 与当前元素的字体大小相同（更具体地说，一个大写字母 M 的宽度） CSS 样式被应用之前，浏览器给网页设置的 默认基 ......
第三篇 css - 优先级 - 【 级联 和 继承 】
概述 CSS样式优先级分为 两 大类 1、级联 2、继承 级联 CSS 级联 规则决定了 样式冲突 时 胜出 的样式，这 三条 规则按照优先级 从高到低 分别为 1、样式表来源 2、选择器优先级 3、代码顺序 样式表来源 优先级最高 如果来源一致，那么取决于 选择器 优先级（行内样式归纳到选择器这一 ......
第二篇 css - 选择器 - 【 基础选择器 + 组合选择器 + 伪类选择器 + 伪元素选择器 】
css 选择器分类 一、基础选择器 1、ID 选择器 2、类选择器 3、通配符选择器 4、标签选择器 5、属性选择器 二、组合选择器 1、后代选择器 2、元素选择器 3、相邻兄弟选择器 4、通用兄弟选择器 5、交集选择器 6、并集选择器 三、伪类选择器 1、标记状态的伪类 2、筛选功能的伪类 四、伪 ......
第五篇 html5 - 新特性【 网络监听接口 + 全屏接口 】
html5 新增 网络监听接口 1、online 2、offline online 网络联通的时候触发这个事件 window.addEventListener("online", function () { console.log( "连接上网络了！" ) }) offline 网络断开的手触发这个 ......
第四篇 html5 - 新特性【 Dom操作类 + 自定义标签属性 】
html5 新增 Dom 操作类 1、classList 当前元素的所有样式列表 2、add() 添加类 3、remove() 删除类 4、toggle() 有就移出，没有就添加 5、contains() 是否包含某个类，包含返回 true，没有包含返回 false 6、item(n) 查看此项的第 ......
第三篇 html5 - 新特性【语义化标签 + 增强型表单 + 音频视频】
语义化标签 语义化标签概述 1、清晰易读 2、有利于SEO，方便搜索引擎识别页面结构 3、方便设备解析、比如盲人阅读 | 标签 | 特性 | | | | | header | 定义文档头部区域，一般用在头部 | | section | 定义文档中的一块区域,替代 div 布局 | | nav | 定 ......
第二篇 html - 【 HTML5 基本概念 + 规则 + 兼容性 】
HTML5基本概念 1、HTML5 并不是新的语言，而是HTML语言的第五次重大修改 2、支持 所有的主流浏览器（Chrome，Firefox，Safari），IE9 及其以上支持 HTML5，但是 IE8 及其以下不支持 HTML5 3、改变了用户与文档的交互方式：多媒体 【 video，audi ......
第一篇 html - 基础 - 【 发展史 + 概述 】
html 发展史 1、HTML 1.0 （HTML/HTML+）超文本标记语言(第一版) ——在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准) 2、HTML 2.0 —— 1995年11月 作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 ......
WebForm之企业微信开发聊天工具栏（5）——获取userid，外部联系人id前端
<!DOCTYPE html> <html lang="en"> <head> <title>工资条</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0 ......
Vue和JS前端网页下载保存图片到本地电脑中
//保存图片 clickSaveImage(url) { let image = new Image(); // 解决跨域 canvas污染问题 image.setAttribute('crossOrigin', 'anonymous') image.src = url + '?time=' + n ......
伪元素和CSS类
伪元素可以结合CSS类： p.article:first-letter {color:#ff0000;} <p class="article">文章段落</p>https://www.lekaowang.com/cjhjs/zx/ksdg/ 上面的例子会使所有 class 为 article 的段落 ......
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。 下面的例子在每个 <h1>元素前面插入一幅图片： 实例 h1:before { content:url(smiley.gif); } https://www.lekaowang.com/jjcy/dgw/aesh/ 翻译 搜索 复制 ......
前端 大文件上传解决方案(500M以上)
HTML部分 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="up6.index" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ......
[CSS]浅记录两种弹窗属性
自用笔记。考虑到不同页面的需求不同，弹窗的属性可能不同。 常规弹窗，采用fixed居中样式： .pup_f position fixed top 0px width 1080px // 页面宽度 height 1920px // 页面高度 background-color rgba(0, 0, 0, ......
分享一些大屏可视化也许有用的css技巧
分享一些大屏可视化也许有用的css技巧 - 掘金 (juejin.cn) 可视化大屏基本就是数据可视化，主题多为科技感为主。下面分享一些也许对你有用的css效果，都是比较简单的，如果后面有别的还会更新。 1、带蒙版的刻度镜头旋转效果 比如下面这种刻度 目的是实现镜头旋转时，上半部和下半部的刻度逐渐消 ......
聊聊前端性能指标那些事儿
作为 C 端前端研发，除了攻克业务难点以外，也要有更深层的自我目标，那就是性能优化。这事儿说大不大，说小也不小，但难度绝对不一般，所涉及的范围优化点深入工程每个细胞。做好前端性能优化绝非简单之事！文章主要内容介绍前端性能考核指标及优化方案。 ......
几段纯 CSS 代码实现的 漂亮边框效果
半透明边框 border:10px solid hsla(0, 0%, 100%,.5); background-clip:padding-box; 缝边效果 outline: 1px white dashed; outline-offset:-10px; border-radius:4%; bac ......
前端设计模式——解释器模式
解释器模式（Interpreter Pattern）：是一种行为型设计模式，它可以用来解决一些特定问题，例如编译器、计算器等等。这种模式定义了一个语言的语法，并用一个解释器来解释语言中的表达式。 解释器模式可以用来处理例如数据格式化、表单验证等业务场景。在这些场景中，我们需要定义一些语法规则，然后使 ......
问题1：CSS布局方式有哪些？
CSS常见的布局方式包括弹性布局、固定布局、流体布局、混合布局、绝对定位布局等。 1.弹性布局：总体宽度及其中所有栏的值都以单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。 栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。 2.固定布局：总体宽度及其中所有栏的值都以像素单位编写 ......
CSS之伪类选择器，属性选择器
一.结构伪类选择器 伪类选择器一般的格式是使用冒号来表示 ： 一般其它的伪类选择器很少使用，但是a标签的个性化都是使用的伪类选择器来个性化，所以对于a标签的个性化需要用到 代码解释： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ......
前端js笔记
#js的书写位置 #写在标签的事件属性中,比如 onclick 鼠标的单机事件 <a href = "" style = "css" 代码 onclick = "js的代码"></a> #<script> //单行注释 /*多行注释*/ </script> 一般会讲script标签 写在 页面bod ......
前端用crypto-js来进行加密，php使用openssl_encrypt来进行解密
项目有个需求，需要对前端提交的密码进行加密传输，防止请求被拦截导致密码的泄露。 1、考虑到性能问题，不好太过的占用浏览器资源，我就直接采用了对称加密的方式（aes）来进行处理； 2、首先来看看前端加密的情况，我采用的是crypto-js来进行加密的，附上链接https://cdnjs.cloudfl ......