当前位置: 首页 > news >正文

常用的css样式

1:flex布局

.flex-between {display: flex;justify-content: space-between;
}.flex-evenly {display: flex;justify-content: space-evenly;
}.flex-end {display: flex;justify-content: flex-end;
}.flex {display: flex;
}.flex-center {display: flex;justify-content: center;align-items: center;
}.TB-center {display: flex;align-items: center;
}.flex-grow {flex-grow: 1;
}

2:表格类

1:表格的单元格超出变为 ...

::v-deep .el-table .cell.el-tooltip div{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

其他常见的:

1:点击出现小手蓝色

.clickStyle {cursor: pointer;color: #409eff;
}

2:超出(一/二行)变为...

//超出(一行),变为...(点点点)
.font-ellipsis-one {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
//超出(二行),变为...(点点点)
.font-ellipsis-two {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
}

3:阴影

//         阴影
.shadow {box-shadow: 0px 0px 15px 5px #ccc;
}
/*h-shadow	必需的。水平阴影的位置。允许负值v-shadow	必需的。垂直阴影的位置。允许负值blur	可选。模糊距离spread	可选。阴影的大小color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表inset	可选。从外层的阴影(开始时)改变阴影内侧阴影
*/

http://www.lryc.cn/news/147440.html

相关文章:

  • 小兔鲜儿 - 微信登录
  • C++ Primer阅读笔记--对象移动(右值引用、移动迭代器和引用限定符的使用)
  • 【办公类-16-01-02】2023年度上学期“机动班下午代班的排班表——跳过周三、节日和周末”(python 排班表系列)
  • ChatGPT HTML JS Echarts实现热力图展示
  • JavaScript七小知
  • Ubuntu【系统环境下】【编译安装OpenCV】【C++调用系统opencv库】
  • AR界安卓在中国,Rokid引爆空间计算狂潮
  • 在 React 中如何使用定时器
  • Unity记录4.6-存储-第四阶段总结
  • 【Python】从入门到上头— 使用包、模块、安装第三方模块(7)
  • flutter和原生利用pigeon建立通道
  • TCP连接分析:探寻TCP的三次握手
  • gitHooks使用教程
  • 2023.8 - java - 数组
  • ChatGPT怎么辅助解决社会问题?
  • Rust之自动化测试(一):如何编写测试
  • 简单聊聊Https的来龙去脉
  • 【注册岩土】Python土力学与基础工程计算.PDF-土中的应力
  • 祝贺!Databend Cloud 和阿里云 PolarDB 达成认证
  • SQL语言-01
  • PyCharm软件安装包分享(附安装教程)
  • AI文本标注的概念,类型和方法
  • 【AutoLayout案例04-游戏图片-按钮适配 Objective-C语言】
  • Spring Boot业务系统如何实现海量数据高效实时搜索
  • 面向对象的设计原则
  • 前端需要理解的工程化知识
  • 【Terraform学习】使用 Terraform创建DynamoDB添加项目(Terraform-AWS最佳实战学习)
  • 基于单片机教室人数实时检测系统
  • alibabacloud的简单使用,nacos配置中心+服务中心。作者直接给自己写的源码
  • Python爬虫:一个爬取豆瓣电影人像的小案例