HTML/CSS
文章平均质量分 81
卡列尼娜翠花
这个作者很懒,什么都没留下…
展开
-
一文学会 BootStrap
自动布局列也能和断点搭配使用,在不同断点下,进行不同的列布局,比如大屏列多一点,小屏列少一点。比如实现一行8列的布局,12的因数没有8,所以如果要使用网格系统实现,我们就需要嵌套。另外,col 包裹实际内容的,为了美观,所以给 col 设置内边距 15px,防止实际内容紧贴着容器 container。分别对应着:手机,手机横屏,平板,小屏笔记本13、14寸,一般尺寸的电脑。在xl屏幕显示6列,在lg屏幕显示4列,在md屏幕显示3列,在sm屏幕显示2列,特小屏(none)显示1列。原创 2024-07-07 02:58:35 · 849 阅读 · 0 评论 -
光速入门 Tailwind CSS
ITCSS的目标是通过限制CSS的特异性、减少依赖性、避免重叠和冲突,以及提供清晰的代码组织结构,来创建一个易于管理和扩展的CSS代码库。@layer 指令就是用来告诉 tailwind 这些自定义的类应该属于三层中的哪一层,tailwind 你要按这一层的规矩管理它。Tailwind 添加了一些自定义函数,用来在自定义样式时,在 css 中获取 tailwind 提供的样式中的一些值。首先我们要明白,tailwind 能通过类的方式来写样式,是因为它已经提供了这些写好了 css 的类。原创 2024-07-01 02:59:18 · 799 阅读 · 0 评论 -
filter - 常用滤镜效果(毛玻璃、图片阴影、图片褪色)
box-shadow 属性在元素的整个框后面创建一个矩形阴影,而 drop-shadow() 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。如果不透明,图片内容就是一个矩形,那效果和 box-shadow 看起来一样了,都是生成一个矩形的阴影。区别在于,filter 表示让本元素像素点参与计算,drop-filter 表示将本元素下面盖着的元素参与计算。它可以调整像素点的色相,函数里面的角度,就是色相环上对应的颜色。滤镜:将元素中的像素点通过一些算法计算后,转换成新的像素点。原创 2023-11-17 07:46:14 · 467 阅读 · 0 评论 -
sass 生成辅助色
一个按钮往往有 4 个状态。为了表示这 4 个状态,需要设置 4 个颜色来提示用户。按钮类型一般有 5 个:以 primary 类型按钮为例,设置它不同状态下的颜色:原创 2023-11-14 03:28:45 · 987 阅读 · 0 评论 -
sass 封装媒体查询工具
用 hash 映射优化 if,也就是定义一个对象。sass 中可以定义对象。注意:sass 中()括号就代表 js 的花括号{}和方括号[]。以下就是一个对象,这 5 个属性设置 5 个断点,除最后一个大屏外,其他断点属性值为数组。之前的代码设置了 4 个断点,区别不大。/* 定义断点对象 */tv: 1281px:获取对象的属性值数组类型:list数值类型:number/* 1. 读取断点对象属性值 *//* 2. 类型判断是否为数组 *//* 3. 取出数组中的数据 */原创 2023-11-13 07:15:32 · 1125 阅读 · 0 评论 -
gird 卡片布局
简单说就是:fill是有足够空间就优先创建列来填充,哪怕是空白列,仅在剩余空间放不下一列时(设置了列最小宽度),才拉伸卡片宽度均分该剩余空间。注意:可能会看到 gird-gap 这样的属性,但该 grid- 前缀已弃用(但谁知道呢,可能永远不会从浏览器中删除)。分别是 grid-column-start + 和 grid-row-start + grid-column-end grid-row-end 的简写。第二个参数:每次的单元格大小。第一个参数为合并起始的网格线,第二个参数为合并结束的网格线。原创 2023-11-11 01:47:12 · 410 阅读 · 0 评论 -
10 分钟学会 DOM
光速拿捏 dom 基本概念和操作原创 2023-03-02 04:20:04 · 272 阅读 · 0 评论 -
一文看懂 flex 弹性布局
flex 弹性布局转载 2022-09-22 16:50:11 · 136 阅读 · 0 评论 -
flex 弹性布局
flex 弹性布局转载 2022-07-25 17:35:31 · 77 阅读 · 0 评论