css - webxue的小破站

全部学习记录经验分享

vite搭建的vue3项目使用tailwind.css

记录在vue3+ts+vite构建的项目中引入并使用tailwind.css，我的node版本是16.18.0

本文记录css的一些小技巧，持续更新中...

一文教你学会主题切换

# 前言现在的前端花活越来越多，但用户体验也越来越好，由于我经常写代码，代码编辑器的主题通常是 `暗色系`，之前开发个人博客时，总觉得亮色有点闪眼睛，就加了个主题切换的功能，可以随意切换`亮色主题

设置了相对定位relative之后，改变top值，如何去掉多余空白？

众所周知，relative和absolute有一个区别在于relative是相对自身定位，而absolute是相对于最近的定位父级定位，而此时的相对定位经过top值改变其在文档流中的位置之后，自身本来的位置依然在文档流中占据位置。要想解决这个问题，我的想法就是给个margin负值，以减少下方的空白<body> <!-- 此时div占据的位置是他自身...

CSS自定义字体的实现，前端实现字体压缩

CSS中使用自定义字体，首先需要下载你需要的字体ttf或者otf文件这里推荐一个网站：http://www.zitixiazai.org//********css中********/@font-face{ font-family:'test' //自定义字体名称 src:url('') //自定义字体存在的路径}/*给div设置自...

input:file样式怎样修改

问题描述：我需要点击input:file来修改img中的图片，但是input:file样式太丑解决办法：给file设置透明度为0，让用户看不见他创建新的button按钮修改button按钮样式点击button的时候使file也被点击具体代码如下：<img src=""><input type="fi...

纯CSS实现自动轮播，CSS变量的定义与使用，计算属性的使用

先来看一下实现的效果：实现原理：HTML中使用ul>li存放图片CSS使用CSS3的animation来完成动画<section class="slider-container"> <ul class="slider"> <li class="slider-item slider...

复习CSS3的知识点

第一篇、用户交互伪类选择器的用法:hover 鼠标移入:link 没有交互:visited 访问过:active 鼠标按下不放<a href="">Pesudo classes</a><a href="">Pesudo classes</a><a href="">Pesudo clas...

HTML布局之左右布局

作为一名合格的前端程序员，各种布局方式是肯定要熟练的，可我就是这么一个不合格的前端，这里记录一下左右布局的实现思路父元素容器设置固定高度，设置flex，宽度可以设为100%或者具体像素，根据业务需求来定父元素下有两个子元素，分别为左右容器左容器或右容器均可以设置固定宽度(如果仅是左右布局，可设置一个宽，另一方flex设为1)，高度为100%父级高度，纵向溢出自动补充说明：当然了，你想自己自定义滚动条的样式也是可以的具体代码如下：<div class="layout"&g...

手写一个多行文本溢出省略号显示，多行文本溢出省略号显示，单行文本溢出省略号显示

<div class="ellipsis">英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？</div>单行文本溢出隐藏很简单了ov..