CSS
css中实现分区中列表的标记的改变
想要实现下面的情况该怎么写 1.可以在html中用分区标记（<div>）来实现三个分区 2.样式可以使用css来实现。（这里我采用的是外部样式表） 3.我们可以在分区标签中使用类标记器(上面的class就是类标记器)，然后在css中使用后代选择器，在选择器中使用列表属性list-of-style: ......
css移除button按钮的所有属性
例如需要点击按钮才能触发的事件，按钮里面放图片会影响原本样式，这时需要隐藏button的样式 style="all: unset;" 效果：点击客服图标打开小程序客服窗口 ......
css虚线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ......
CSS清除浮动的方法
1、浮动的概念 在CSS中，浮动（float）是一种布局技术，用于控制元素在页面中的位置。通过将元素浮动到其容器的左侧或右侧，可以使其他元素环绕它。 常见的用法： 选择器 { float: left; //左浮动 } 选择器 { float: right; //右浮动 } 2、浮动的特点 （1）浮动 ......
css多卡片自适应屏幕尺寸
css多卡片自适应屏幕尺寸 <div class="gridBody"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="d ......
CSS hack
之前一直很狭隘的对CSS hack持有偏见，觉得写得规范的代码不应该使用这些“邪门歪道”，可最近产品发布一个小问题却让我头疼了很久，最后查了一下资料，竟然使用CSS hack轻松解决了，不得不服啊，对付神奇的IE就得使用这些利器。 什么是CSS hack 由于不同的浏览器，甚至同一浏览器的不同版本对 ......
CSS 布局
一些基本概念 viewport: 展现网页的媒体，比如窗口或者某个区域，它的大小是有限制的，为了不被平台术语所束缚，我们给他起名viewport，中文意思就是视口。 canvas: 而我们在渲染网页的时候通常并不知道我们需要多大的空间，而且这些空间通常尺寸会超过viewport的大小，于是实际上我们 ......
CSS与Bootstrap的关系和区别
1. CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种样式表语言,用于控制网页的视觉效果。 2. Bootstrap是一个开源的前端UI框架,基于HTML、CSS和JavaScript,用于快速开发Web应用程序和网站。 3. Bootstrap需要依赖CSS作为样式 ......
CSS
CSS（Cascading Style Sheets）是一种用于描述HTML（或XML等）文档的样式和布局的标记语言。它通过为HTML元素应用样式规则来控制元素的外观和排版。 CSS的主要作用是将网页的内容和样式分离，使得网页的结构和样式可以独立进行修改和管理。通过CSS，可以为HTML元素指定字体 ......
HTML+CSS随笔
这是我的学习笔记，重点是我容易忘的内容，并不全面 配合以下内容学习就很全面了 黑马程序员pink老师前端入门教程 HTML HTML文件基础结构解析 <!DOCTYPE html> <html lang="zh-han"> <head> <meta charset="UTF-8"> <meta na ......
Css实现浏览滚动条效果
Css实现浏览滚动条效果 前言 也是有大半个月没有更新文章了，大部分时间都在玩，然后就是入职的事。今天就更新一个小知识，刷抖音的时候看到的，感觉还不错。 属性介绍 关键属性animation-timeline:动画名称; 用于控制动画的时间轴。它可以让你在一个元素上同时播放多个动画，控制它们的开始时 ......
CSS 基础 5 - CSS 选择器
基础 #id{} ID 选择器 .class{} 类选择器 tag{} 标签选择器，tag 可以是 h1, p, div, span, img, nav, footer... *{} 通用选择器，选择所有元素，可以和其他复杂选择器组合 <div class="class1 class2" id="m ......
styled-components & CSS pseudo classes All In One
styled-components & CSS pseudo classes All In One
::after & ::before CSS 伪元素
......
CSS 实现 table 表头固定 tbody 显示垂直滚动条并自定义滚动条样式
一、最终效果图 二、关键代码 html 代码： <div class="table_info"> <table border="0" cellspacing="0" cellpadding="0" style="width: 100%;"> <thead> <tr> <th>项目账号</th> <t ......
WebKit Inside: CSS 样式表的匹配时机
WebKit Inside: CSS 的解析 介绍了 CSS 样式表的解析过程，这篇文章继续介绍 CSS 的匹配时机。 无外部样式表 内部样式表和行内样式表本身就在 HTML 里面，解析 HTML 标签构建 DOM 树时内部样式表和行内样式就会被解析完毕。因此如果 HTML 里面只有内部样式表和行内 ......
矩阵的乘法运算与css的3d变换（transform）
theme: qklhk-chocolate 引言：你有没好奇过，在一个使用了transform变换的元素上使用window.getComputedStyle(htmlElement)['transform'] 查询出来的值代表什么？ 为什么硬件加速要使用transform，以及为什么硬件加速会快? ......
CSS & JS Effect – Do something on enter/leave window tab
需求 我在做一个体验 当用户 submit enquiry 后会 window.open 开启 WhatsApp。而当用户关闭 WhatsApp 回来网站后，会 show 一个 feedback message。 实现思路 关键就在如何感知到，用户从 WhatsApp 切换回到了网站。 参考: De ......
Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
问题描述 在webpack的时候报错 ERROR in ./packages/theme-chalk/mixins/mixins.scss (./node_modules/css-loader/dist/cjs.js!./packages/theme-chalk/mixins/mixins.scss ......
深航电企业评价评级系统可视化（HTML，CSS，JS）
一.项目背景 深航电企业评价评级系统EERS是一款企业绩效评价平台，旨在为企业提供科学、全面、精准的绩效评价服务，帮助企业发现问题、改进管理，提高整体绩效。 EERS评级系统借助大数据、云计算、人工智能等现代技术手段，将企业绩效数据进行多维度、系统化、动态化分析，为企业提供可视化的评级结果，帮助企业 ......
WebKit Inside: CSS 样式表的解析
CSS 全称为层叠样式表(Cascading Style Sheet)，用来定义 HTML 文件最终显示的外观。 为了理解 CSS 的加载与解析，需要对 CSS 样式表的组成，尤其是 CSS Selector 有所了解，相关部分可以参看这里。 HTML 文件里面引入 CSS 样式表有 3 种方式: ......
CSS关系选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ......
Html和Css中的一些属性
1、alt属性：alt属性是一个用于网页语言HTML和XHTML、为输出纯文字的参数属性，作用是当HTML元素本身的物件无法被渲染时，就显示alt（替换）文字作为一种补救措施。 <img class="project_img" src="@/assets/music_project.jpg" alt ......
CSS-01 乱码
造成乱码的问题是： 文档保存的时候选择的编码方式和打开文档时使用的编码方式不一样。 当然现在都是统一使用utf-8:万国码。 正常文档格式： <!DOCTYPE html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> ......
CSS定位问题
CSS定位问题 CSS定位分为 静态定位，相对定位，绝对定位，固定定位 默认不设置情况下为静态定位 position:static 静态定位 position:relative 相对定位 position:absolute 绝对定位 position:fixed 固定定位 相对定位 相对定位，即 ......
CSS浮动以及背景属性
CSS浮动以及背景属性 标准文档流 在标准情况下文档的流向方式，块级元素默认从上到下，行内元素和行内块元素从左到右。 CSS浮动，浮动的本意是为了解决文字环绕问题，设置浮动后。会对后面的文字产生环绕效果。 浮动的基本使用： <style> *{ float:left /* 左浮动 */ float: ......
WebKist Inside: CSS 样式表的组成
StyleSheet 一张 StyleSheet 由一系列 Rules 组成，这些 Rules 可以分成 2 大类: Style Rule 和 At-Rule。下面的例子展示了 Style Rule 和 At-Rule: // Style Rule div { background-color: r ......
纯css实现Tooltip提醒
<!DOCTYPE html> <html> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibi ......
WebKit Inside: CSS 样式表解码字符集
CSS 样式表引入有3种方式: 外部样式表、内部样式表、行内样式，不同的引入方式，解码样式表的字符集原理不一样。 外部样式表 外部样式表由 link 标签引入，当 WebKit 解析到 link 标签时就会构造 CachedCSSStyleSheet 对象。这个对象持有 CachedResource ......
CSS 样式表引入的3种方式
CSS 全称为层叠样式表(Cascading Style Sheet)，用来定义 HTML 文件最终显示的外观。HTML 文件里引入 CSS 样式有3种方式: 外部样式表、内部样式表、行内样式。 外部样式表 外部样式表通过 link 标签引入: <link rel='stylesheet' type ......
CSS 基础 4 - CSS 常用单位
CSS 基础 4 - CSS 常用单位 px：基础单位 em：相对当前父容器的系数，可以累乘 rem：相对根 <html> 的系数，方便计算 vw/vh：viewport width/height，整个浏览器的大小，取值范围 1-100 如 100vh，占满高度，如果出现滚动条，是因为 body 预 ......