TailwindCSS 如何设置 placeholder 的样式
前言placeholder在前端多用于input、textarea等任何输入或者文本区域的标签,它用户在用户输入内容之前显示一些提示。浏览器自带的placeholder样式可能不符合设计规范,此时就需要通过css进行样式美化。当项目中使用TailwindCSS处理样式时,应该如何通过TailwindCSS设置placeholder的样式呢?问题将input标签的placeholder样式设置成字体
前端 · 阅读 4451 · 2023年12月7日 00:10

CSS 响应式布局方法汇总
一、媒体查询@media关键分辨率768px992px1200px@media(min-width:768px){//=768的设备}@media(min-width:992px){//=992的设备}@media(min-width:1200){//=1200的设备}@media(max-width:1199){//=1199的设备}@media(max-width:991px){//=991的
前端 · 阅读 2953 · 2022年6月18日 12:06

TailwindCSS 支持文本文字超长溢出截断、文字文本省略号
文本文字超长截断并自动补充省略号,这是前端日常开发工作中常用的样式设置能力,文字超长截断主要分为单行超长截断和多行超长截断。本文通过介绍基本CSS样式、tailwindcss类设置两种基础方式来实现文字超长截断。TailwindCSS设置单行文字超长截断tailwindcss多个基础类组装<divclass="overflow-ellipsisoverflow-hiddenwhitesp
前端 · 阅读 12234 · 2023年5月27日 22:57

基于React实现:弹窗组件与Promise的有机结合
弹窗在现代应用中是最为常见的一种展示信息的形式,二次确认弹窗是其中最为经典的一种。当我们在React,Vue这种数据驱动视图的前端框架中渲染弹窗基本是固定的使用形式。使用方式:创建新的弹窗组件,在需要弹窗的地方引用并且需要在外层维护弹窗组件的显示/隐藏状态。这只是庞大项目中一处需要弹窗的地方,如果项目中存在N个需要弹窗的场景,我们都需要将上述步骤重复一次。这会让我们的项目组件变得臃肿冗余。
前端 · 阅读 3629 · 2023年9月5日 11:58

tailwindcss 如何配置默认单位为px
当我们刚开始使用tailwindcss框架处理项目中的样式,我相信很多人会跟我一样非常不习惯。tailwindcss默认支持的rem单位,而不是我们已经非常习惯的px,这其实给我们带来了不小的心智负担。这篇文章将介绍如何在项目中使用px单位设置元素的属性。方案方案一tailwindcss默认支持灵活设置元素距离属性,比如给div加一个16px的内边距,在属性后通过[]来设置具体的px;
前端 · 阅读 10834 · 2023年5月16日 23:24

如何有效排除 MySQL 慢查询问题
MySQL的慢查询是什么?如何排除在现代互联网应用中,MySQL作为一种高效、稳定的关系型数据库管理系统被广泛应用。然而,随着数据量和用户访问量的增长,数据库查询性能问题逐渐显现,尤其是慢查询对系统整体性能的影响尤为显著。所谓慢查询是指那些执行时间超过设定阈值的SQL语句,它们不仅会导致响应时间延长,还可能引发资源争用,进而影响数据库的整体性能。因此,深入理解慢查询的成因,并掌握有效的排查和优化方
服务端 · 阅读 901 · 2024年11月17日 20:16

前端如何利用发布订阅模式
前端如何利用发布-订阅模式发布-订阅模式(Pub/Sub)是一种广泛使用的设计模式,在前端开发中,它可以帮助我们管理复杂的事件逻辑,实现不同组件之间的松耦合通信。今天,我们将通过一个简单的例子来探索如何在前端项目中利用发布-订阅模式。发布-订阅模式简介发布-订阅模式允许对象(发布者)将消息发送给其他对象(订阅者),而无需知道接收对象的任何信息。这种模式独特之处在于,发布者和订阅者之间不存在直接联
前端 · 阅读 1802 · 2024年5月26日 16:56

React 内置 Hook 之 useCallback 深度解析与使用案例
ReactHooks引入了一种全新的方式来处理state和其他React特性,让我们可以以更加声明式的风格去编写代码,从而使代码更加易读和可维护。其中,useCallback是一个常被提及但可能被大家误解或未能充分利用的hook。useCallback为我们提供了避免不必要渲染以及记住函数实例的能力,从而在性能优化上给我们开发者带来了新的手段。什么是useCallback简单来说,useCallb
前端 · 阅读 3518 · 2021年12月20日 13:15

响应式设计:使用REM实现自适应字体缩放
在构建现代网站时,支持不同设备的屏幕尺寸是前端开发者面临的重要挑战之一。为了提供更好的用户体验,网页上的内容,尤其是文字需要能够随着屏幕尺寸的变化而适应不同的显示需求。相比于传统的固定单位(如px),rem(rootem)单位提供了一种更加灵活且容易实施的解决方案,使得我们能够轻松实现屏幕放大缩小时页面文字能够跟随屏幕比例自动调整的设计。在本教程中,我将带大家了解何为rem单位,并演示如何使用它来
前端 · 阅读 2750 · 2024年1月9日 15:33

Node 项目参数配置化,命令行参数
前言:对于工程化的Node项目,如果设置配置系统参数,可以改变项目的参数耦合性。本文记录三种参数配置的方法。一、env变量process.env参数变量配置添加npm依赖npminstallcross-env-D命令行参数设置'scripts':{'start':'cross-envNODE_ENV=devAPI=localostnodeapp.js'}读取process.env参数console
服务端 · 阅读 2342 · 2022年6月18日 12:15
