代码编织梦想

css修改浏览器默认滚动条样式-爱代码爱编程

1.滚动条相关属性 ::-webkit-scrollbar 滚动条整体部分,常用属性:width,height,background,border; ::-webkit-scrollbar-button 滚动条两边的按钮,默认不设置时不显示,可设置高度、背景色、背景图片; ::-webkit-scroll

animate.css-爱代码爱编程

引用animate.css官网的一句话:非常适合强调、主页、滑块和注意力引导提示。 在各大公司的官网上,不能像后台管理系统一样在一个页面无法展示所有模块,只能在页面最下放去放一个动画去引导用户,如下:这个向下的动态箭头就可以。 怎么用呢: 首先安装这个库: npm install animate.css --save 在main.js中添

css-爱代码爱编程

/* 定义渐变背景样式 */ .gradient-text { background-image: linear-gradient(to right, #ff0000, #00ff00); /* 渐变色范围 */ b

tailwind css 速成-爱代码爱编程

Tailwind CSS 速成 完成了 responsive 和特效的学习后,现在折腾一下 tailwind CSS,这个 CSS 库本身就包含了很多的 utility class,之前跟着 yt 的视频写项目的时候,写了

用纯css改变下拉列表select框的默认样式,兼容所有浏览器-爱代码爱编程

select::-ms-expand { display: none; } select { border: solid 1px #000; appearance: none; -moz-appearance:

css-爱代码爱编程

状态栏 var(--status-bar-height) 计算属性 height: calc(var(--status-bar-height) + 343px); 底部安全区 先constant再env co

vue 如何适配 web 夜间模式、暗黑模式、黑色主题 prefers-color-scheme: dark-爱代码爱编程

vue 如何适配 web 夜间模式、暗黑模式、黑色主题 prefers-color-scheme: dark 一、暗黑模式越来越普遍 自苹果推出暗黑模式之后,Web 也有了对应的暗黑模式,默认情况下 Web 的暗黑模

sass 学习笔记 ii-爱代码爱编程

SASS 学习笔记 II 上篇笔记,SASS 学习笔记 中包含: 配置 变量 嵌套 这里加一个扩展,嵌套中有一个 & 的用法,使用 & 可以指代当前 block 中的 selector,后面可以追加

css 设置边框是内部还是外部 css3 box-sizing 属性-爱代码爱编程

css 设置边框是内部还是外部 这个内容是 CSS3 的box-sizing 属性 值说明content-box默认值。如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就

sass 学习笔记-爱代码爱编程

SASS 学习笔记 总共会写两个练手项目,成品在 https://goldenaarcher.com/scss-study 可以看到,代码在 https://github.com/GoldenaArcher/scss-st

css3基础-爱代码爱编程

CSS3在CSS2的基础上增加了很多功能,如圆角、多背景、透明度、阴影等,以帮助开发人员解决一些实际问题。 1、初次使用CSS 与HTML5一样,CSS3也是一种标识语言,可以使用任意文本编辑器编写代码。下面简单介绍CS

css字体样式-爱代码爱编程

一、文本与字体属性 1. 字体段落相关属性 color:字体颜色 十六进制值 - 如"#FF0000" 一个RGB值 - “RGB(255,0,0)” 颜色的名称 - 如"#red" font-size:指定字体

css入门-爱代码爱编程

一、css基本使用 1.css概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 多个样式定义可层叠为一个 2.css作用 C

margin塌陷-爱代码爱编程

1、元素自身塌陷 当父元素的高度设置为auto或不写,同时内部子元素设置了浮动属性时,父元素的高度会发生自身塌陷。 解决方法: 1、内部子元素不使用浮动属性,可以使用display将子元素设置为内联块; 2、在父元素上添

css 字体间距 设置-爱代码爱编程

一、css word-spacing属性设置字间距(单词的间距) word-spacing 属性增加或减少单词间的空白(即字间隔);在这个属性中,“字” 定义为由空白符包围的一个字符串。也就是说该属性是以空格为基准进行调节间距的,如果多个字母被连在一起,则会被word-spacing视为一个单词;如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词,w

css-爱代码爱编程

px:像素(Pixel),是指屏幕上的一个点,是最常用的单位。1px表示屏幕上的一个物理像素点。em:相对长度单位,表示相对于当前元素的字体大小。当使用em作为长度单位时,其值是相对于该元素的字体大小来计算的。rem:相对长

css-爱代码爱编程

方法一 grid 布局中的 fr 单位(推荐使用) <div class="wrap"> <button class="trigger">鼠标放上来试试</button> <d

【css】动画:立方体相册-爱代码爱编程

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .box{ width: 400px; height: 400px;

【css】动画:行走的人-爱代码爱编程

 素材: 链接: https://img1.baidu.com/it/u=3361754298,960828090&fm=253&fmt=auto&app=138&f=PNG?w=1472&h=325  代码: <!DOCTYPE html> <html lang="en">

【css】小球回弹效果-爱代码爱编程

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; }