随笔分类 -  css

flex最后一行靠左
摘要：参考：https://blog.csdn.net/Dongfang_project/article/details/130114233 加after伪元素 .tag-view { width: 100%; display: flex; flex-wrap: wrap; box-sizing: bor 阅读全文
posted @ 2023-08-14 14:26 jqynr 阅读(43) 评论(0) 推荐(0)
表格标题左上角斜分样式
摘要：<div class="t-box"> <div class="t-other"><span>竞方</span></div> <div class="t-us"><span>我方</span></div> </div> .t-box { height: 36px; font-size: 0.8rem 阅读全文
posted @ 2023-02-03 09:48 jqynr 阅读(48) 评论(0) 推荐(0)
小程序 input 右侧下拉小三角
摘要：/* 自带input右侧下拉小三角 */ .icon-right-pick{ padding-right: 70rpx!important; width: 54%!important; background: url("http://****.com/images/2d15b.png") no-re 阅读全文
posted @ 2022-12-15 16:46 jqynr 阅读(189) 评论(0) 推荐(0)
css grid
摘要：display: grid; grid-template-columns: 100px auto 100px; 阅读全文
posted @ 2022-12-01 14:22 jqynr 阅读(18) 评论(0) 推荐(0)
css字符串字符间距铺满
摘要：.justify-text{ text-align: justify; text-justify: distribute-all-lines; text-align-last: justify; -moz-text-align-last: justify; -webkit-text-align-la 阅读全文
posted @ 2022-10-14 09:41 jqynr 阅读(175) 评论(0) 推荐(0)
vue css 颜色背景进度条
摘要：js赋值 item.quoteScoreBackground = `linear-gradient( to right, #71d39d, #71d39d ${percent}%, #fff ${percent}%, #fff ${percent}% )`; 行内使用 <div class="col 阅读全文
posted @ 2022-10-12 15:24 jqynr 阅读(279) 评论(0) 推荐(0)
vue css animation 动画
摘要：vue管理端布局的时候隐藏左侧菜单栏右侧主体部分更改宽度 @keyframes showMove { from { width: calc(100vw - 74px); } to { width: calc(100vw - 220px); } } @keyframes hideMove { from 阅读全文
posted @ 2022-09-29 11:02 jqynr 阅读(102) 评论(0) 推荐(0)
css鼠标移上去显示元素，移开隐藏
摘要：首页的导航要鼠标移上去显示，鼠标移动到显示的元素上也显示，移开隐藏 用了很多方法都不行 jq 的 toggle，hide show 都会出现莫名的抽搐 最终解决 导航栏和弹出元素都要加product 的class，弹出元素还加 hover-box 的class .hover-box{ display 阅读全文
posted @ 2022-08-31 15:05 jqynr 阅读(1056) 评论(0) 推荐(0)
文本超出隐藏
摘要：参考：https://blog.csdn.net/weixin_43131046/article/details/114397849 单行 //不换行 white-space: nowrap; //超出隐藏 overflow: hidden; //超出部分用...代替 text-overflow: 阅读全文
posted @ 2022-08-22 18:26 jqynr 阅读(42) 评论(0) 推荐(0)
elementui 进度条 progress 底色
摘要：参考：https://blog.csdn.net/qq_43720804/article/details/108448469 // 进度条底色 .el-progress /deep/ path:first-child { stroke: #2a282a; } 阅读全文
posted @ 2022-07-27 11:25 jqynr 阅读(354) 评论(0) 推荐(0)
css 背景图片样式 background
摘要：background: url("~@/assets/***.png") no-repeat left center / 50% 100%; background: url("../assets/image/***.jpg") no-repeat center center / 100% auto; 阅读全文
posted @ 2022-07-21 14:38 jqynr 阅读(71) 评论(0) 推荐(0)
小程序平方米表示
摘要：参考：https://blog.csdn.net/echo_Ae/article/details/121717639 <Text style="font-size: 24rpx; vertical-align:text-bottom;">M</Text> <Text style="font-size 阅读全文
posted @ 2022-07-09 16:28 jqynr 阅读(134) 评论(0) 推荐(0)
css flex
摘要：css flex 盒子 定义 display: flex; display: inline-flex; 方向 水平，反向水平，垂直，反向垂直 flex-direction: row | row-reverse | column | column-reverse; 换行 不换行，换行，换行到上/前面 阅读全文
posted @ 2022-07-09 10:55 jqynr 阅读(37) 评论(0) 推荐(0)
bootstrap css
摘要：bootstrap common containers .container (-sm md lg xl xxl fluid) gird .container .row .col .col-5 (<=12) .col-lg-2 .align-item-(start center end)<col> 阅读全文
posted @ 2022-07-09 10:28 jqynr 阅读(52) 评论(0) 推荐(0)
css 字体颜色渐变
摘要：参考：https://m.php.cn/article/476022.html background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow); -webkit-background-clip: text; -webki 阅读全文
posted @ 2022-05-19 18:41 jqynr 阅读(181) 评论(0) 推荐(0)
css :before选择器，title加点
摘要：参考：https://blog.csdn.net/weixin_42681295/article/details/107668844 .title:before { content: ""; display: block; margin-right: 14rpx; width: 0; height: 阅读全文
posted @ 2022-05-18 10:44 jqynr 阅读(146) 评论(0) 推荐(0)