胖蔡说技术
随便扯扯

CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
几种设置CSS渐变阴影的方法-胖蔡说技术

几种设置CSS渐变阴影的方法

胖蔡阅读(145)评论(0)赞(0)

这是我经常听到的一个问题:有可能从渐变色而不是纯色中创建阴影吗?没有特定的CSS属性可以做到这一点(相信我,我已经看过了),你发现的任何关于它的博客文章基本上都是很多CSS技巧来近似梯度。实际上,我们会边走边报道其中的一些。 但首先…另一篇...

Vue3工程中接入tailwindcss-胖蔡说技术

Vue3工程中接入tailwindcss

胖蔡阅读(205)评论(0)赞(0)

之前的vue项目中需要写入样式,发现不支持原子样式,写起来不是特别方便,布局也麻烦,就把tailwind css接入到这个项目里了,这里记录下整体的接入流程,不得不说tailwind使用起来是真的简单。

NextUI使用原子样式实现Tabs左右排列-胖蔡说技术

NextUI使用原子样式实现Tabs左右排列

胖蔡阅读(209)评论(0)赞(0)

使用NextUI作为UI库进行网站开发,页面需要使用到左右布局的切换样式的UI来分离界面的分类和内容,这也是较为常用的一种样式,但偏偏不巧的就是NextUI中的Tab凑巧没有支持这种样式,这估计也和其主要是为手机端设计的缘故导致的

Nextjs配合nextui框架进行页面开发-胖蔡说技术

Nextjs配合nextui框架进行页面开发

amiko阅读(286)评论(0)赞(1)

当我们使用nextjs进行前端SSR相关开发的时候,想要选用一个UI框架进行页面渲染的时候,就会发现服务端渲染和客户端页面渲染是如此的不通,我们国内常用的elemet-ui, ant-design这些框架都会出现或这样或那样的问题,究其原因...

在没有nodejs情况下如何使用Tailwind CSS-胖蔡说技术

在没有nodejs情况下如何使用Tailwind CSS

amiko阅读(230)评论(0)赞(0)

Tailwind CSS是用JavaScript编写的,并以npm包的形式分发,这意味着您必须始终安装Node.js和npm才能使用它。 这使得集成到使用npm并不总是常见的项目中变得更加困难,而且随着Rails和Phoenix等工具默认...

CSS中position: sticky与overflow发生冲突如何解决-胖蔡说技术

CSS中position: sticky与overflow发生冲突如何解决

amiko阅读(293)赞(0)

今天遇到一个css的问题:之前通过sticky设置的吸顶效果突然不见了,经过一番查证后发现这是因为在其父布局中添加了overflow属性导致sticky失效了。接下来,我们来了解一下sticky的设置、失效原因以及如何解决sticky失效。

CSS修改滚动条样式:scrollbar-胖蔡说技术

CSS修改滚动条样式:scrollbar

胖蔡阅读(439)赞(0)

前端页面中的列表数据超出屏幕,当我们给外层容器设置了overflow:scroll , 就可以通过滚动条滚动显示内容,但是web自带的滚动条样式不太美观,这时候我们就可以通过CSS设置来美化滚动条。

[前端面试题]CSS面试题-胖蔡说技术

[前端面试题]CSS面试题

胖蔡阅读(387)赞(0)

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是...

CSS 浮动

胖蔡阅读(526)赞(0)

浮动的元素会向左或向右浮动,碰到父元素边界、浮动元素、未浮动的元素才停下来。