小技巧！CSS 提取图片主题色功能探索
本文将介绍一种利用 CSS 获取图片主题色的小技巧。一起看看~
背景
起因是微信技术群里有个同学发问，有什么方法能够获取图片的主色呢？有一张图片，获取他的主色调：
利用获取到的这个颜色值，来实现类似这样的功能 -- 容器中有一张图片，希望背景色可以适配图片的主色，像是这样：
大家出...[2021/5/17]
仅用 CSS 实现多彩、智能的阴影仅用 CSS 实现多彩、智能的阴影
背景
有没有想过如何创建从前景元素中继承某些颜色的阴影效果？阅读本文并找出如何实现方法吧！
前几天我经过家得宝（Home Depot，美国家得宝公司，全球领先的家居建材用品零售商），他们正在大规模展销正在出售的智能灯 ??，其中一种是一系列灯泡位于电视机后面，它们会投射出与电视机前景屏...[2021/5/17]
js正则获取标签之间内容表达式怎么写?-附源码
基础知识
JavaScript 正则表达式 正则表达式（英语：Regular Expre ion，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
什么是正则表达式？ 正则表达式是由一个字...[2021/5/17]
前端css样式规划
前端涉及文件夹
images----背景图片
c ----------样式文件
js------------脚本文件
temp------临时图片文件
前端主要样式表
global.c -------------全局样式
headFoot.c ----...[2021/5/17]
web&HTML
内容索引
1. web概念概述
2. HTML
web概念概述
* JavaWeb：
* 使用Java语言开发基于互联网的项目
* 软件架构：
1. C/S: Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序，在远程有一个服务器端程序
* 如：QQ，...[2021/5/17]
HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手_HTML/XhtmlHTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手_HTML/Xhtml
很多小伙伴在前端学习的时候，发现盒子模型默认为正方形。如何把盒子变成想要的模型呢？ 首先我们来看一下默认的情况----
<!DOCTYPE html>
<html lang="en">
<head>
<meta...[2021/5/10]
为什么你写的height:100%不起作用 _CSS教程_CSS
为什么你写的height:100%不起作用？
这个知识不算冷门的，但是用的时候可能还是会有些懵逼，不能生效时搜一搜就能找到答案了，但是你真的懂了吗？为什么想要设置一个全屏元素的时候，高度不受%的控制？
1.百分比宽高的设定
按照w3c中的width和height属性，可以明确%设定宽高是...[2021/5/10]
htmlhtml
HTML
1.1常用编辑器
dreamweaver、sublime、webstorm、Hbuilder、vscode
1.2 浏览器内核
分为渲染引擎和JS引擎
渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS 等），以及计算网页的显示方式，然后会输出至...[2021/5/10]
如何使div的浏览器窗口高度为100％
我有两列的布局-左div和右div。
右边div有一个灰色background-color，我需要根据用户浏览器窗口的高度垂直扩展它。现在background-color结束于该内容的最后一部分div。
我试过height:100%，min-height:100%;等
有几个CSS 3度量...[2021/5/10]
Django——form表单
表单是搜集用户数据信息的各种表单元素的集合，其作用是实现网页上的数据交互，比如用户在网站输入数据信息，然后提交到网站服务器端进行处理（如数据录入和用户登录注册等）。 网页表单是Web开发的...[2021/5/10]
css display table 自适应高度、宽度问题的解决_CSS教程_CSS
定义和用法
display 属性规定元素应该生成的框的类型。
说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所...[2021/5/10]
background-position百分比原理详解_CSS教程_CSS
今天帮别人调代码时，看到一个样式：
background-position: 50% 0;
background-size: 100% auto；
对background-size:100% auto，意思是背景图片宽度为元素宽度*100%，高度等比缩放。详情可见c 3 ba...[2021/5/10]
命名视图-实现一个路由规则展示多个组件！！！命名视图-实现一个路由规则展示多个组件！！！
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" co...[2021/5/7]
CSS 还能这样玩？奇思妙想渐变的艺术_CSS教程_CSS
在之前的这篇文章 -- 一行 CSS 代码的魅力 中，我们介绍了一种使用一行 CSS 代码就能够生成的一种美妙（也许奇怪更合适）的背景。
本文，将继续介绍背景的一些有意思的知识，利用一些极小的单位，只需要短短几行代码，就能够产生出美妙而又有意思的背景效果~
数量级对背景图形的影响
本文的...[2021/5/6]
CSS完成视差滚动效果_CSS教程_CSS
一、是什么
视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验
我们可以把网页解刨成：背景层、内容层、悬浮层
当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果
二、实现方式
使用c 形...[2021/5/6]
css position fixed 左右双定位的实现代码_CSS教程_CSS
CSS Position(定位)
position 属性指定了元素的定位类型。
position 属性的五个值：
static
relative
fixed
absolute
sticky
元素可以使用的顶部，底部，左侧和右侧属性...[2021/5/6]
CSS 新特性 contain控制页面的重绘与重排问题_CSS教程_CSSCSS 新特性 contain控制页面的重绘与重排问题_CSS教程_CSS
在介绍新的 CSS 属性 contain 之前，需要读者已经知道什么是页面的重绘与重排。
发现之前已经描述过很多次了，可以看看这个提高 CSS 动画性能的正确姿势[1]。
OK，下面进入本文正题，
contain 为何?
contain 属性允许我们指定特定的 DOM 元素和它...[2021/5/6]
「学习笔记」HTML
一、认识 WEB
「网页」主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及 Flash 等。
「浏览器」是网页显示、运行的平台。
「浏览器内核」(排版引擎、解释引擎、渲染引擎)
负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
浏览...[2021/5/6]
网页布局之盒子模型网页布局之盒子模型
网页布局之盒子模型
网页：网页实际上是一层一层的，我们所设计的网页就是在这些层上面设计，我们所看到的网页是最上面的一层
文档流：最下面的一层称为文档流，是网页的基础
我们所创建的元素默认是在文档流中进行排列
对于元素的两个状态：
在文档流中
不在文档流中（脱离文档流）
...[2021/5/6]
盒子布局盒子布局
盒子布局
盒子的水平布局
元素水平方向的布局：
元素在其父元素中，水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
ma...[2021/5/6]
HTML5+CSS3 笔记
内核
内核
浏览器
前缀
webkit
Safari（苹果）
webkit
webkit/Blink
Chrome （谷歌）
webkit
Gecko
firefox (火狐)
moz
prest...[2021/5/6]
CSS 还能这样玩？奇思妙想渐变的艺术
在之前的这篇文章 -- 一行 CSS 代码的魅力 中，我们介绍了一种使用一行 CSS 代码就能够生成的一种美妙（也许奇怪更合适）的背景。
本文，将继续介绍背景的一些有意思的知识，利用一些极小的单位，只需要短短几行代码，就能够产生出美妙而又有意思的背景效果~
数量级对背景图形的影响
本文的主角...[2021/5/6]
HTML（三）：HTML常用标签（下）
表格标签
表格的主要作用
表格主要用于显示、展示数据，因为他可以让数据显示的非常的规整，可读性非常的好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
例如：
表格的基本语法
<table> </table...[2021/5/6]
利用 Echarts 简单制作省份或区域地图步骤利用 Echarts 简单制作省份或区域地图步骤
用 Echarts 无论是制作省份地图还是区县域地图，他们的步骤都是基本一样的。
下面本人就 利用 Echarts 简单绘制省份地图 的步骤与经验与各位分享一下。
1、准备工作
1.1 下载js静态文件
china.js
echarts.min.js
1.2 ...[2021/5/6]
如何在不重新加载页面的情况下修改URL？
有没有一种方法可以修改当前页面的URL而无需重新加载页面？
如果可能，我想访问＃哈希之前的部分。
我只需要更改域后的部分，所以就好像我没有违反跨域策略一样。
window.location.href = "www.mysite.com/page2.php"; Sadly this ...[2021/5/6]
「学习笔记」CSS-1
「学习笔记」CSS
学习目标
理解
c 的目的作用c 的三种引入方式
应用
c 三种引用方式的书写通过样式规则给标签添加简单的样式
HTML的局限性
说起HTML，这其实是个非常单纯的家伙， 他只关注内容的语义
比如： 用<h1>表明这是一个大标题， 用<p&g...[2021/5/6]
「HTML+CSS」--自定义加载动画【019】
前言
Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈 自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～...[2021/5/6]
「HTML+CSS」--自定义加载动画【020】
前言
Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈 自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～...[2021/5/6]
探秘神奇的运动路径动画 Motion Path探秘神奇的运动路径动画 Motion Path
CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1，翻译过来也就是运动路径。本文将对 motion path 一探究竟，通过本文，你可以了解到：
什么是 CSS motion path
使用 CSS motion path 制作简单路径动画
使...[2021/5/6]
「HTML+CSS」--自定义加载动画【021】
前言
Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈 自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～...[2021/5/6]
electron-vue配置问题
1.跨域问题
找到src/main/index.js文件，或全局搜索BrowserWindow，添加代码取消跨域
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 100...[2021/5/6]
「HTML+CSS」--自定义加载动画【022】
前言
Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈 自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～...[2021/5/6]
「HTML+CSS」--自定义加载动画【026】「HTML+CSS」--自定义加载动画【026】
效果展示
Demo代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compati...[2021/5/6]
解决高度塌陷问题
问题概述：
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷
父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱
方法1 开启父元素的BFC或hasLayout
1.1 BFC
1.1.1 Block F...[2021/5/6]
CSS新特性contain，控制页面的重绘与重排
在介绍新的 CSS 属性 contain 之前，读者首先需要了解什么是页面的重绘与重排。
之前已经描述过很多次了，还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势。
OK，下面进入本文正题，
contain 为何？
contain 属性允许我们指定特定的 DOM 元素和它的子元素...[2021/5/6]
HTML5与CSS3新增特性笔记
HTML5
HTML5和HTML事件
注意：行内代码的为H5新增事件
Window事件属性：
针对 window 对象触发的事件（应用到 标签）
onafterprint
文档打印之后运行的脚本
onbeforeprint
文档打印之前运行的脚本
onbeforeunl...[2021/4/19]
前端开发面试题 — css篇 - Red-Plum
1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 borde...[2021/4/19]
CSS编写及选择器
设置CSS样式的方式
内联样式（行内样式）
在标签内通过style属性来设置元素的样式
<p style="color:red;font-size:60px"><!--设置字体颜色和大小-->
CSS设置样式
</p>
问题：使用内联样式...[2021/4/19]
两种纯CSS方式实现hover图片pop-out弹出效果
实现原理
主要图形的组成元素由背景和前景图两个元素，以下示例代码中，背景元素使用伪元素 figure::before 表示， 前景元素使用 figure img 表示，当鼠标 hover 悬浮至 figure 元素时，背景元素产生变大效果，前景元素产生变大并向上移动效果，从而从视觉上实现弹出...[2021/4/19]
「HTML+CSS」--自定义加载动画【014】【疑问未解决】
前言
Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈 自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～...[2021/4/19]
CSS+HTML+flexible.js+rem实现屏幕缩放适配概念原理解释CSS+HTML+flexible.js+rem实现屏幕缩放适配概念原理解释
首先理解几个概念：
（1）屏幕尺寸：屏幕对角线的长度，一般用英寸表示，1英寸=2.54cm。
（2）dp（（或者叫dip）：设备独立像素，也就是设备屏幕上多少个点。
（3）dpi：印刷行业术语，像素密度，是每英寸上像素点数
（4）ppi：屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的...[2021/4/19]
H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配
rem
rem 是 CSS3 新增的一个相对单位（root em，根 em）
只根据当前页面 HTML 页面的 font-size 设置，如果根目录的 font-size 为 18px，则 1rem=18px
媒体查询设置
@medi...[2021/4/19]
CSS浮动---float
一、标准文档流的特性
1、空白折叠
无论多少个空格、换行、tab，都会折叠为一个空格。
2、高矮不齐，底边对齐
3、自动换行，一行放不下就换行写
二、行内元素和块级元素的注意点
1、行内元素不能设置宽高，默认的就是文字的高度。 2、块级元素可以设置宽高，默认为父亲的100%
...[2021/4/19]
CSS样式中的各种居中方式
1、水平居中
将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。
代码：
margin:0 auto;
2、文字水平垂直居中
利用line-height设为height的一样
代码：
line-height: 200px;/*垂直居中关键*/...[2021/4/19]
CSS新增的:where和:is伪类函数是什么_CSS教程_CSS
什么是 :is 与 :where？
:is() 和 :where() 都是伪类函数，可以帮助缩短和停止创建选择器时的重复。它们都接受选择器的参数数组（id，类，标签等），并选择可以在该列表中选择的任何元素。
这对如何帮助我们编写更短的选择器可能没有多大意义，所以让我们尝...[2021/4/19]
纯CSS实现hover图片pop-out弹出效果的实例代码_CSS教程_CSS
实现原理
主要图形的组成元素由背景和前景图两个元素，以下示例代码中，背景元素使用伪元素 figure::before 表示， 前景元素使用 figure img 表示，当鼠标 hover 悬浮至 figure 元素时，背景元素产生变大效果，前景元素产生变大并向上移动效果，从而从视觉上实现弹...[2021/4/19]
老生常谈 使用 CSS 实现三角形的技巧(多种方法)_CSS教程_CSS
在一些面经中，经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形，而常见的回答通常也只有使用 border 进行绘制一种方法。
而 CSS 发展到今天，其实有很多有意思的仅仅使用 CSS 就能绘制出来的三角形的方式，本文将具体罗列讲讲。
通过本文，你能了解到 6 种使用 ...[2021/4/12]
浅谈移动端中的视口(viewport)的具体使用_CSS教程_CSS
在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。
而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewport）、视觉视口（...[2021/4/12]
利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）
1、简单介绍
在学习完HTML、CSS和一些JS后，博主也利用一些空余的时间的写了一个关于JS简单应用的Demo，主要实现的是一个Todolist（类似于记事本）的应用，可以实现数据的增、删、改、查，并且使用localStorage实现数据的本地持久化存储，具体就接着往下看吧。
2、运行截图
...[2021/4/12]
经验首页