+ CSS
null
王佳斌
商务合作请私信
展开
-
CSS - 通用左边图片,右边内容,并且控制长度溢出处理模板(vue | uniapp | 微信小程序)
通用模板,可适用于任意前端项目。如下图所示,手机电脑通用。原创 2024-09-20 15:37:49 · 536 阅读 · 0 评论 -
CSS - 解决使用弹性布局(display: flex)平均分布后,某列或某一侧容器高度发生变化时,所有容器的高度都跟着变的问题(固定高度,让所有容器各自不相互影响)
设置弹性布局后,平均分布的列容器的高度变化时,全部跟着一起变的问题。例如,使用时,会发生下面的情况。原创 2023-12-04 14:31:39 · 1540 阅读 · 0 评论 -
CSS - 快速实现悬浮吸顶,当页面滑动一定距离时固定吸附在顶部(position: sticky)
* 核心属性,必须设置top,left或者bottom,right位置 *//* 或: bottom: xx, right: xx *//* 子节点(悬浮吸顶外层容器) */当被其他高层级容器遮挡时,请设置。/* 根节点(父容器) */文件,一键复制运行起来。原创 2023-09-13 18:52:33 · 2068 阅读 · 0 评论 -
CSS - 鼠标移入整行高亮显示,适用于会员套餐各参数对比页面(display: table,div 转表格形式)
效果图可根据基础示例和进阶示例,复制进行改造样式。如下图所示,本文提供 2 个示例。基础示例找个 HTML 页面,一键复制运行。<body> <h1 style="text-align: center;">基础示例</h1> <section class="content"> <div class="row"> <div class="cell">张三</d原创 2023-09-12 17:11:14 · 1304 阅读 · 0 评论 -
CSS - <img> 图片裁剪 object-fit 属性,指定图片应该 “如何去适应“ 容器的高度与宽度(详细示例代码)
关于标签,图片的裁剪属性,img标签的object-fit属性,原生img标签 object-fit,img 图片裁剪模式,通过css实现img自适应剪裁并居中适配,img object-fit属性实现图片自动裁剪不被拉伸,img元素实现图片裁切,img标签的object-fit属性,使用img标签自适应,各个尺寸图片不变形,关于img元素及object-fit属性使用,css3-img新属性object-fit,object-fit: cover;怎么用,css实现不定宽高的图片img居中裁原创 2023-05-16 21:00:45 · 2892 阅读 · 0 评论 -
CSS - 垂直菜单(鼠标移入时显示右侧容器)
* left的数值就是菜单的宽度 *//* hover右侧显示的容器宽高 *//* 菜单被hover时的样式 *//* 最后一个去掉下划线 *//* 右侧显示容器 *//* 去掉滚动条 *//* 隐藏滚动条 *//* 菜单样式 */原创 2023-05-06 09:21:42 · 818 阅读 · 0 评论 -
CSS - 实现容器溢出后隐藏滚动条并且能正常滚动,盒子高度超出后不显示滚动条但是能正常滚动(附带详细示例,完美解决方案)
css 怎么不显示滚动条还能滚动,CSS 实现隐藏滚动条同时又可以滚动,css如何隐藏垂直滚动条但同时需保持滚动,css-滚动但不显示滚动条的两种写法,CSS 实现隐藏滚动条同时又可以滚动 ,css滚动条(css不显示滚动条但可以滚动),css设置去掉滚动条依然可以滚动,CSS 隐藏滚动条 但可以滚动,CSS 实现隐藏滚动条同时又可以滚动的代码,css - 如何隐藏滚动条但又能滚动,不用js实现,css 隐藏滚动条,但仍然能滚动,css设置Overflow实现隐藏滚动条的同时又可以滚动,如何在不显示滚动条的原创 2023-04-26 17:05:49 · 5084 阅读 · 0 评论 -
CSS - 完美解决 flex 布局下,一行显示固定个数(平均分布)并且强制换行,超出后 “靠左“ 对其(详细解决方案,适用于 Web、Vue、React 等任何前端项目)
css flex弹性布局靠左对齐,CSS flex布局最后一行左对齐,CSS 弹性布局/flex布局最后一行左对齐,css中flex布局如何实现水平方向左对齐,css怎么让弹性布局固定一行显示多少个,Flex布局设置一行显示多个,css 弹性布局一行放N个,css flex固定一行几个如显示一行4个多行布局,css弹性布局设置每行显示指定个数,弹性盒子 flex多行布局 底行左边对齐,flex布局优化(两端对齐,从左至右),CSS用flex布局两端对齐,列不满左对齐,CSS的flex布局justify-c原创 2023-04-10 15:06:46 · 15788 阅读 · 2 评论 -
CSS - 开启 contenteditable 属性时,去掉点击编辑时显示的 “黑边框“(完美解决方案)
contenteditable获得焦点后的边框设置,css如何去掉contenteditable属性的边框,vue怎么去掉contenteditable 属性边框,contenteditable 属性开启后点击有边框,删掉css contenteditable 属性的边框,css取消可输入标签聚焦时contenteditable的边框,contenteditable属性编辑器在手机看,获得焦点会有一个框outline没效果,怎么去掉?如何删除聚焦的 contenteditable pre 周围的边框?css原创 2023-04-02 22:19:15 · 3139 阅读 · 0 评论 -
CSS - transition 过渡属性及使用方法(示例代码)
css transition 过渡属性是干什么的,CSS transition(过渡效果)详解,CSS transition 属性,深入理解CSS过渡transition,css中transition方法的介绍,css简单动画(transition属性) ,css前端html改变宽高如何加入过渡效果,HTML CSS 过渡效果,使用css3改变元素宽高且有过渡,html怎么实现过渡效果,html - 如何使div的高度与内容和宽度平滑过渡,关于使用CSS3实现元素样式过渡的解决方案,CSS 动画 - 高度变原创 2023-03-01 15:03:06 · 645 阅读 · 0 评论 -
CSS - display flex 弹性布局实现一行仅显示 2 个,每行显示指定个数(设置 space-between / space-around 超出自动换行)详细示例代码
display flex css 一行显示两个,css弹性布局设置每行显示指定个数,css3 display: grid;弹性布局一行固定几个,列设置flex固定一行显示2个,CSS控制一行显示两个,css弹性布局设置每行显示指定个数,[CSS] 单列定宽的两列弹性布局,这个css是控制只有2个div在一行上么,css弹性布局+自动换行,flex布局 一行显示两个同宽、高的盒子 并 可以换行,flex布局每行显示固定个数,列设置flex固定一行显示2个,css - flex布局如何每行固定数量显示,CSS3原创 2023-02-14 11:00:34 · 27490 阅读 · 0 评论 -
CSS - 鼠标移入悬停显示下拉菜单(导航栏鼠标经过 hover 时出现二级菜单)
CSS - 鼠标移入悬停显示下拉菜单(导航栏鼠标经过 hover 时出现二级菜单),HTML css3菜单鼠标移入显示下方二级菜单,用纯CSS实现鼠标经过后出现下拉菜单,css实现网页中鼠标移入出现下拉框,用纯CSS实现鼠标经过后出现下拉菜单,鼠标移动下拉菜单(下拉菜单之纯CSS实现方法)鼠标悬停显示下拉菜单,html鼠标悬停下拉列表,CSS实现鼠标悬停出现下拉菜单及二级菜单。CSS 下拉菜单 | 菜鸟教程,官方教程。hover菜单时显示隐藏的div盒子,里面有二级菜单。原创 2022-10-12 17:27:13 · 21769 阅读 · 0 评论 -
CSS - 选中最后一个元素(选择器)
CSS - 选中最后一个元素(选择器)怎么用css选择ul里最后一个li里面的a元素,css选择最后一个元素html标签选择器只认最后一个,选择某类的最后一个如何用css选择器选择某元素下的最后一个子元素?使用CSS选择器选择最后一个元素 |CSS3 :last-child 选择器 | 菜鸟教程CSS07选择第一个子元素和最后一个子元素nth-last-child原创 2022-09-25 19:34:09 · 33463 阅读 · 0 评论 -
CSS - 去掉删除 <textarea> 多行文本输入框右下角可拉伸小图标(右下角可缩放三角标控件)
CSS - 去掉删除 textarea 多行文本输入框右下角可拉伸小图标(右下角可缩放三角标控件)取消多行文本域(textarea)右下角三角标踩坑,AntD Textarea 去掉右下角图标textarea标签右下角可拖动标识,怎么去掉去掉textarea 右下角图标 resize: none;使用resize去掉textarea右下角禁止拉伸放大缩小去掉textarea标签右下角的斜杠如何将textarea文本域中右下角可以缩放文本域大小的小三角..原创 2022-09-24 21:18:21 · 6049 阅读 · 0 评论 -
CSS - 鼠标选中文字后改变背景色与文字颜色(鼠标选中文本时的颜色)
CSS - VUE.js nuxt.js uni-app 鼠标选中文字后改变背景色与文字颜色HTMLCSS鼠标鼠标选中的更改颜色css 鼠标选中文本时的颜色CSS改变网页中鼠标选中文字背景颜色例子使用css3 ::selection改变选中文本的颜色CSS改变网页中鼠标选中文字背景颜色HTML原创 2022-09-15 14:58:30 · 7429 阅读 · 0 评论 -
CSS - PC / 移动端左右满屏高度布局(100% 高度 + 溢出滚动条)
CSS - PC / 移动端左右满屏高度布局(100% 高度 + 溢出滚动条),Vue.js css左右布局,全屏幕并且内容超出时会出现滚动条,CSS 多种方法实现100%高度的容器,CSS子元素撑满父元素(height: 100%无效),css设置高度height: 100%滚动条无法显示的解决办法,html盒子模型子元素怎么水平占满父元素_CSS 盒模型,子元素高度撑满父级(父级未设置高度),css 移动端左右100%高度布局,css 高度100%并设置滚动条。原创 2022-08-25 17:32:34 · 2805 阅读 · 0 评论 -
CSS - 实现横向滚动(横向滚动布局)
CSS - 实现横向滚动(横向滚动布局),css横向滚动布局,css实现元素横向滚动的方法css中如何实现横向滚动布局,纯CSS实现横向滚动条,横向不间断滚动DIV CSS代码,纯CSS3横向滚动条实现。原创 2022-08-24 23:22:08 · 31724 阅读 · 1 评论 -
CSS - 禁止手机移动端网页缩放(meta)
CSS - 禁止手机移动端网页缩放(meta),Vue移动端某些浏览器禁止双指缩放(user-scalable=no),移动端禁止用户缩放页面大小尺寸,H5实现移动端禁止页面缩放(适用Android和IOS) ,移动端阻止浏览器页面缩放,手机打开网页的时候,如何禁止缩放呢?移动端禁止缩放页面 meta属性,meta 移动端禁止缩放,移动端禁止浏览器强制缩放问题。原创 2022-08-23 10:27:19 · 5146 阅读 · 0 评论 -
CSS - 鼠标移入图片放大及缓慢过渡效果(仅 “内部“ 放大,不改变容器大小)鼠标移入图片变成发大镜效果
css - 鼠标移入图片放大及缓慢过渡效果(仅 "内部" 放大,不改变容器大小)鼠标移入图片变成发大镜效果,CSS实现鼠标移入图片放大效果,css鼠标移入图片变成发大镜效果,css鼠标移入盒子,里面的图片放大,不改变盒子大小,使用CSS3实现鼠标移到图片上图片放大,html鼠标悬停图片放大或缩小,html鼠标经过图片放大,CSS实现鼠标移入时图片的放大效果及缓慢过渡效果,css鼠标移入图片变成发大镜效果。css鼠标进入图片放大......原创 2022-08-04 17:06:03 · 8198 阅读 · 0 评论 -
CSS - 让容器(盒子)支持横向无限滚动
效果图如下图所示,盒子内容过多后会自动向横向增加。解决方案按如下示例代码设置的父容器,自动支持。<div class="box"> ...</div>.box{ white-space: nowrap; display: flex; overflow: scroll;}...原创 2022-05-26 11:30:15 · 1671 阅读 · 0 评论 -
CSS - 让整个页面变成灰色(一行代码)
前言现在很多大厂产品,遇到清明节、南京大屠杀纪念日等节日,网站或软件就会变为灰色。在咱们小程序或网站中,实现起来非常简单,从各种鲜亮的颜色,一行代码变为如下图所示灰色:解决方案通过 filter: grayscale(100%) 滤镜属性,了解更多请 点击这里。以下是使用的示例,您可按照方法应用到您的项目中。<!DOCTYPE html><html lang="zh"><head><style>/* 整个页面变灰 */body原创 2022-05-17 10:41:16 · 11730 阅读 · 0 评论 -
CSS - 音乐盒 360° 无限循环旋转动画(元素转圈)
前言由于 Gif 图片过小的问题,显得很不流畅,真实情况下很流畅,放心。实现一个 360° 无限循环旋转的动画,如下图所示:示例代码注意:通过 animation 复合属性,可控制动画旋转速度及其他参数。以下代码可直接复制,运行即可查看效果。<imageclass="come"src="https://img-blog.csdnimg.cn/2c897a5f56dd4f169700660594e45902.png"/>/* 执行动画 */.come{ wid原创 2022-03-24 15:45:43 · 1749 阅读 · 0 评论 -
CSS - 去除 input 框默认样式
前言大部分情况下,我们都会自定义 input 框样式,而默认的边框及样式非常简陋。变为如下图所示,干净的样式:实现代码input{ background:none; outline:none; border:none;}/* 如果input必须要有边框,但需要去掉选中时的蓝色框 ↓↓↓ */input{ background:none; outline:none; border:1px solid #ccc;}input:focus{ bo原创 2021-05-11 15:17:57 · 3689 阅读 · 0 评论 -
CSS - 后台管理系统布局示例(上左中)
效果图实现代码复制,运行即可查看效果。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>后台管理系统布局示例</title> <style> *{ margin:0px; padding:0px; } section {原创 2021-05-10 16:58:17 · 1366 阅读 · 0 评论 -
CSS - 隐藏浏览器自带滚动条(Chrome | Safari | Firefox | IE | Edge)
前言无论横纵滚动条全部隐藏。有时候,我们需要隐藏浏览器的默认滚动条,无论内容是否超出都不显示。一、Chrome | Safari谷歌与苹果自带浏览器,隐藏办法如下代码。*::-webkit-scrollbar { display: none;}二、Firefox火狐浏览器,隐藏办法如下代码。* { scrollbar-width: none;}三、IE | EdgeIE 与微软浏览器,隐藏办法如下代码。* { -ms-overflow-style: none;}原创 2021-05-10 15:43:41 · 9009 阅读 · 6 评论 -
CSS - 容器上下浮动动画
效果图实现代码<div class="trans"></div>.trans{ /* 随便来点样式 */ height: 200px; width: 200px; background: red; /* END */ /* 引入动画(1.3s可控制速度) */ animation: heart 1.3s ease-in-out infinite alternate; /* END */}@keyfram原创 2021-05-10 11:58:33 · 1478 阅读 · 0 评论 -
CSS - 文字高光滑动效果(左侧到右侧亮光)
效果图如下图所示,可自己修改文字颜色及滑动效果的颜色。实现代码<b class="q-loading-2-inner">自定义文字颜色及高光颜色</b>.q-loading-2-inner { font-weight: bold; /* 这里可以随意加样式 */ background: #fff linear-gradient( -135deg, transparent 25%,原创 2021-05-08 12:01:43 · 3637 阅读 · 0 评论 -
CSS - 元素遮挡(层级/定位等等)导致无法点击下层元素解决方案
前言如果遇到因 层级 定位 其他原因 导致点击不到下层元素,如下图所示:解决方案pointer-events 文档:https://www.w3school.com.cn/cssref/pr_pointer-events.asp不需要调整什么 z-index 层级还是相对绝对定位,直接使用 鼠标穿透属性 pointer-events。需要注意的是,有些情况并不适用。/* 给父元素(遮挡的元素) */.div{ pointer-events: none;}...原创 2021-05-08 11:35:22 · 8073 阅读 · 6 评论 -
CSS - font-size 设置小字体不生效解决方案(小于12px)
前言使用 font-size 设置小于 12px 的字体时,发现并不生效(字体不会再缩小了)。原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px,大部分浏览器都是如此。解决方案如果执意要设置小于 12px 的字体,那只能使用 transform: scale() 缩放属性来实现。/* 小于12px 的字体 */.txt { -webkit-transform: scale(0.5)}兼容写法有些浏览器允许设置小于 12px 的字体,那么你原创 2021-05-08 09:48:55 · 16649 阅读 · 3 评论 -
CSS - 自适应防拉伸背景大图
.content{ overflow: hidden; position: fixed; width: 100%; height: 100%; background: url("x.png") no-repeat; background-size: cover;}原创 2021-05-06 17:02:19 · 791 阅读 · 0 评论 -
CSS - 移动端容器背景大图片自动适应屏幕
前言有时候,我们希望容器背景大图片自动适用容器宽高,均匀平铺在页面,几行 CSS 代码即可搞定。实现给父容器设置即可。.view{ background-image: url(x.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}...原创 2021-03-11 15:16:22 · 3020 阅读 · 1 评论 -
CSS - 炫酷Canvas动画动态效果及鼠标效果背景(无需图片)
效果图总计 8 个,大概效果如下。简介页面除了主要功能非常干净整洁。适合在 PC 页面,做首页或登录页的炫酷动态效果大背景,无需一张图片。使用方法Gitee: https://gitee.com/wangjiabin-x/h5Canvas直接 克隆项目到本地,然后导入项目运行起来。...原创 2021-02-01 13:36:50 · 1320 阅读 · 0 评论 -
CSS - H5 页面禁止页面上拉下拉及滚动
前言开发 H5 页面时,我们需要将页面固定住禁止上拉下拉及滚动,网上很多方法,多数是 JS 来判断滚动条来实现。实现我推荐使用 CSS 实现,几行代码就能达到同样的效果。/* 在根节点加入以下代码 */body{ height: 100%; width: 100%; position: fixed; top: 0; left: 0;}...原创 2021-02-01 12:52:11 · 8381 阅读 · 0 评论 -
CSS - 改变 input 输入框 placeholder 的字体颜色大小
前言该方法只适用于 pc 端,移动端无效。代码input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333;} input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:14px; color: #333;} input:-ms-input-placeholder {原创 2021-01-30 23:30:30 · 3712 阅读 · 1 评论 -
CSS - 让图文不可复制
前言这种方式只能防止电脑小白,否则无论如何都能拿走你的图片或文字。有时候,我们并不想让页面或者某一容器内的文字或图片不可选中和复制,5 行代码即可搞定。整个页面无法选中和复制body { -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;}某一区域内无法选中和复制div { -webkit-原创 2021-01-30 23:25:00 · 1275 阅读 · 1 评论 -
CSS - 左右摇曳摆动动画(无限循环)
效果图代码@-webkit-keyframes demo{ 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } }/* 使用原创 2020-12-28 15:18:13 · 8509 阅读 · 1 评论 -
CSS - 呼吸灯效果动画(淡隐淡出效果)
效果图只是简单的呼吸效果,您按照需求自己拓展即可。代码@keyframes light{ from{ opacity: 1; } to{ opacity: 0.2; } }使用.view{ animation-name: light; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: in原创 2020-11-28 12:59:52 · 5027 阅读 · 2 评论 -
CSS - 元素旋转动画(360度转圈)
效果图代码@keyframes rotate { 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);}}使用/* turn原创 2020-11-26 11:25:53 · 12517 阅读 · 3 评论 -
CSS - 利用 vertical-align:middle 垂直居中元素容器
前言以前总是以为 vertical-align 与 text-align 是同样的道理,一个是垂直居中,一个是水平居中。vertical - alignvertical-align 属性设置元素的垂直对齐方式,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,允许指定负长度值和百分比值。这会使元素降低而不是升高,在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。【第一种用法】: 先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果原创 2020-08-02 19:35:46 · 3680 阅读 · 5 评论 -
CSS - 容器背景 10 种颜色渐变Demo(linear-gradient())
语法background: linear-gradient(direction,color-stop1,color-stop2,...);direction:用角度值指定渐变的方向(或角度)。color-stop1,color-stop2,...:用于指定渐变的起止颜色。注意:至少需要两种颜色。第一个background: linear-gradient(to left,#d3959b,#bfe6ba);to left 设置渐变 从右到左,相当于 270deg。第二个back原创 2020-07-31 20:07:28 · 4654 阅读 · 0 评论