![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
星良辰寻
没什么好介绍的,咸鱼Id一样
展开
-
css滤镜调节图片或地图颜色
css滤镜demo 调节图片颜色原创 2022-11-01 10:33:15 · 1258 阅读 · 3 评论 -
原生 table 循环+ tr 循环合并第一列 + th 隐藏除了第一行的所有行
效果如下头部使用第一个th组 其他的隐藏css代码 .rightTable table:not(:first-child) { tr.firstTr { display: none; } }其余样式须自己调整.w-p100{width:100%} .rightTable { th { box-sizing: border-box; max-width: 100px; width: 100px; }原创 2021-06-08 11:55:11 · 1405 阅读 · 2 评论 -
原生表格 th 循环warn 警告 key值重复解决
这样给key值加上不同的字符串,就解决了警告问题原创 2021-01-29 17:04:20 · 173 阅读 · 0 评论 -
table tr td
tr:代表一行td:代表一列rowspan=“3” 合并三行colspan=“2” 合并两列vue 代码<table id="mytable" cellspacing="0"> <tr> <td width="100" class="alt" rowspan="3">信息</td> <td class="alt">招聘职位:</td> <td>前端工程师.原创 2021-01-28 13:40:10 · 682 阅读 · 0 评论 -
大小盒子 padding-bottom 失效问题
白色为大盒子 蓝色为小盒子 但是小盒子内的东西很多 超过了大盒子的高度 所以就有滚动条但是小盒子高度为100% 则继承大盒子的高度 70vh所以padding的bottom没留出来padding出来 直接顶了bottom因为这个时候 小盒子确实是在大盒子padding内 只是内容出去了。小盒子不写高度后 小盒子高度就是内容高度 并且bottom的padding 也成功出现...原创 2020-12-18 11:16:03 · 2961 阅读 · 0 评论 -
vue 中 iconfont 下载至本地 使用方法
首先需要一个图标的集合,然后下载到本地然后将下载的文件移入到项目里面,文件夹里面的东西有这些最后导入使用导入的是这个css文件使用使用就在这个html内找icon的类名在项目里面我就用了两个类名最后效果:...原创 2020-12-03 11:44:44 · 1371 阅读 · 0 评论 -
box-shadow 四边样式设置-发现了大秘密,再也不用担心box-shadow不会用了~
先看一个盒子如下图:官方用语:box-shadow:1px 2px 3px 4px #ccc inset;六个值的含义:(这里是把盒子当成一个原点,所以右边和下边都是x和y轴的正方向,而上边和左边即需要加个负号)1px 从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度);2px 从原点开始,沿y轴正方向的长度;(倘若为负值,为沿y轴负方向的长度);3px 阴影的模糊度,只允许为正值;4px 阴影扩展半径;#ccc 阴影颜色;inset 设置为内阴影(如果不写这个原创 2020-11-30 11:48:18 · 1497 阅读 · 0 评论 -
transition 使用 制作盒子缓慢移入移出的效果
当点击的时候就添加一个类为 openToolbaropenToolbar与toolbar 比较就是left 不一样所以这里就可以实现缓慢移动的效果。原创 2020-11-27 14:20:15 · 1002 阅读 · 0 评论 -
css改变鼠标的样式 图片格式
看文档说是要绝对路径 我这里直接用的网络地址 就可以了 后面要写个默认的,这里我写了个"auto"。*{ cursor:url('http://lycj.link/img/leimu.cur'),auto;}效果这样就是可爱的雷姆了= =原创 2020-11-23 16:15:57 · 201 阅读 · 1 评论 -
element el-form css 样式问题 flex布局变成上下了
正确做法:效果如下图错误做法:直接写display:flex 效果如下原创 2020-09-16 16:41:11 · 2776 阅读 · 0 评论 -
不让文字选中
-webkit-user-select: none;原创 2020-08-14 10:47:16 · 136 阅读 · 0 评论 -
/*全局滚动条样式*/
/*全局滚动条样式*/::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 5px;}::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #e原创 2020-07-02 09:57:12 · 210 阅读 · 0 评论 -
原生input 框编写
<style> input { /* 内部黑色阴影 */ outline-style: none; border:0; border-bottom: 1px solid #ccc; padding: 7px 0; width: 180px; font-size: 24px; /* 外部阴..原创 2020-06-24 09:43:21 · 912 阅读 · 0 评论 -
组件复用时 多种样式不同的问题
如上图所示:左边表格是个组件,表格内默认样式为tableFile当我们在使用组件的时候,想要其他的样式但是又要不影响其他组件使用时候的样式时,就将新的样式写在后面,然后在组件上写上class,因为写上的class会注入到组件中,所以不能直接写个class注入,因为会作用到所有使用到的组件中,所以这里我们直接在组件内写上两个,当写的class为后一个的时候,则用后面的tableFile2样式。当没写的时候,则会使用默认的tableFile类。...原创 2020-06-10 11:18:36 · 1243 阅读 · 0 评论 -
z-index 用法
z-index 用法:要找同级的盒子去设置,这样才可以设置成功原创 2020-06-10 11:08:51 · 186 阅读 · 0 评论 -
float 清除浮动
clearfix最好的方法是使用clearfix属性,下面的代码适用到IE6。.clearfix:after { clear: both;}原创 2020-06-09 08:59:45 · 97 阅读 · 0 评论 -
input type=file 样式
通过定位将左上角的框移除到按钮外即可原创 2020-06-03 14:45:50 · 140 阅读 · 0 评论 -
上传文件时候 input 悬停cursor:pointer 无效解决办法
给input框的font-size设置成0 即可成功设置成pointer样式原创 2020-06-02 08:58:27 · 741 阅读 · 2 评论 -
css 适配 媒体查询 @media
1、小于某个宽度时固定@media screen and (max-width:1372px){ body{ min-width: 1344px; } }2、移动端适配@media screen and (min-width:321px) and (max-width:375px){html,body {font-原创 2020-05-25 10:02:03 · 539 阅读 · 0 评论 -
em
.left { font-size: 15px; .openOrclose { font-size: 13px; height: 5em; width: 5em; background-color: red; }}@media screen and (max-width: 1000px) { .left { font-size: 12px; }}这里红色方块是 .openOrclose所表示的宽高相同的div,当.openOrclose原创 2020-05-22 15:07:53 · 138 阅读 · 0 评论 -
@media
相当于小于1300px时的样式@media (max-width: 1300px){}原创 2020-05-22 14:56:00 · 212 阅读 · 0 评论 -
vue/cli 使用全局less变量
设置less变量添加vue-cli-plugin-style-resources-loadervue add style-resources-loader选择less(这里我用的是less 所以我选择的是less)配置根目录下的 vue.config.js配置代码如下const path = require("path");module.exports = { pluginOptions: { "style-resources-loader": { preP原创 2020-05-20 09:54:29 · 394 阅读 · 0 评论 -
less 变量
less是一种css的扩展语言,一般需要less.js工具将less样式转换成css样式变量可以替换多次重复出现的属性或者属性值,这样在修改需求时只需要在这一处修改变量值,可以提高工作效率1、替换多次重复出现的属性的值当文件中多次重复出现n次多同一个属性值时,可以用变量替换这个变量值,当以后需要改变属性值时直接改变变量的值 ·@nice-blue: #5B83AD;@light-blue: @nice-blue + #111; #header { color: @light-blue转载 2020-05-19 16:12:39 · 741 阅读 · 0 评论 -
字体白边 :text-shadow
text-shadow:1px 1px 1px #FFFFFF第一个数值是X轴方向,第二个数值是Y轴方向,第三数值是投影后的道模糊度越大越模糊,第四个是投影后的颜色色值。原创 2020-04-22 09:57:43 · 395 阅读 · 0 评论