css
HHH 917
这个作者很懒,什么都没留下…
展开
-
css nth-child 的使用
nth-child 选择器 选择指定选择器的父元素下的 指定选择器元素如 .nthC:nth-child(n){} 选择的是 当前.nthC class类元素的父元素 的所有 含有.nthC的子元素使用 nth-child(n) 方式 n>=1 时生效。css计算时 n 从0开始计算。结果可以看出与.nthC同级的元素中 第二个没class的元素没有变红色结果css使用的是 nth-child(even) 选择偶数。可是与.nthC同级的元素中 第二个元素没有.nthC类,所以不受.原创 2022-09-22 10:29:31 · 1272 阅读 · 0 评论 -
element-plus el-table el-table-column 组件中 使用插槽 加载 el-image 组件预览图片 层级过低问题
问题复现分析原因可以发现 .image-viewer_wrapper 类名的元素是预览图片的盒子 有设置z-index:2006 但是还是被其余表格列表元素遮挡 说明el-image 的父元素的层级不够高 可以遮挡前面列表的元素 但是后面列表的元素无法遮挡问题解决1、可以动态给图片预览表格列表的元素设置更高的 z-index 层叠等级 但是 这样实现的方法比较复杂。2、可以改变 .image-viewer_wrapper 产生层叠关系 (层叠上下文) 的参照元素 HTML中的根元素&原创 2022-03-03 10:25:44 · 6081 阅读 · 8 评论 -
关于 element-plus el-table 表格列表滚动条无法正常触发问题解决
定制 el-table 内部样式css样式是使用scss 及tailwindcss编写的可选样式 列表高度撑开表格// 表格列表高度完成撑开.table_height_full { & ::v-deep .el-table__inner-wrapper { .el-table__body-wrapper { height: auto !important; .el-scrollbar__wrap { height: auto !import原创 2022-03-03 10:00:22 · 6443 阅读 · 0 评论 -
css 两端对齐
效果代码//css /* 文字 两端对齐 */ .label_justify { display: inline-block; overflow: hidden; text-align: justify; text-align-last: justify; /* &::after { content: ''; display: inline-block; padding-left: 100%; } */原创 2022-03-01 11:44:45 · 316 阅读 · 0 评论 -
css 小米200w Logo
代码来源B站 CodingStartup起码课 用一个div画小米新Logo在线查看CodePen:小米 logo 前端渲染效果代码html<div></div>cssbody{ display: flex; justify-content: center; align-items: center; min-height: 100vh;}div{ position: relative; width: 44转载 2021-04-01 14:10:48 · 270 阅读 · 0 评论 -
css 实现水平垂直居中的6这个例子
<div class="container"> <div class="inner"> </div> </div>1.margin负值 .container { width: 400px; height: 400px; border: 2px solid #111; position: relative; } .inner { ...原创 2021-03-02 14:32:04 · 220 阅读 · 0 评论 -
css3样式兼容不同浏览器
如何兼容不同的浏览器目前W3C 仍然在对 CSS3 规范进行开发。不过,现代浏览器已经实现了相当多的 CSS3 属性。兼容不同浏览器需要添加不同的前缀如: Chrome : webkitFirefox : mzIE : msopera : o-例:transiton -webkit-transition: prop time; -moz-tr...原创 2019-04-05 10:37:30 · 279 阅读 · 0 评论 -
css3 html5 3d立方体过渡动画效果
3d立方体过渡动画通过3d立方体动画学习transform transition的使用效果图<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>3D立方体</title> <style> * { marg...原创 2019-04-04 22:29:13 · 514 阅读 · 0 评论 -
css3 html5 3D立方体学习
3D立方体主要用到了css3 中的 transform样式<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>3D立方体</title> <style> * { margin: 0; padding: ...原创 2019-04-04 22:17:45 · 194 阅读 · 0 评论 -
学习切换3d转2d轮播图 css3+html5+jquery
自己写的代码笔记<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>切割轮播图</title> <style> *{ margin: 0; padding: 0; } .view{ wi...原创 2019-04-04 22:02:47 · 353 阅读 · 0 评论 -
js 动态修改css动画@keyframes (基于vue讲解 兼容ie)
先看效果已有的css样式 动画效果是2s时间由透明变为不透明;修改后的动画效果styleSheets对象Document.styleSheets 只读属性,返回一个由 StyleSheet 对象组成的 StyleSheetList,每个 StyleSheet 对象都是一个文档中链接或嵌入的样式表。let styleSheetList = document.styleSheets;它是一个 StyleSheet 对象的有序集合。styleSheetList.item(index)原创 2021-01-07 15:34:35 · 7887 阅读 · 2 评论 -
img 图片src为空时出现边框问题的解决
问题效果解决使用 属性和值选择器找到src为空 ,则设置img为透明;这样既保留了img元素内容撑开宽高,又解决了异步获取src的空白期图片显示区域显示边框不美观且浏览器显示效果不一致(部分浏览器src为空时不会出现边框)问题!//当图片为空时 会出现边框 为空时设置透明解决img[src=""] { opacity: 0; }...原创 2020-12-16 11:47:45 · 1865 阅读 · 0 评论