css
会点php的前端小渣渣
技术栈:mvc框架+react+vue+小程序+微信公众号开发
展开
-
vant4 自定义垂直步骤条时间线组件几行css代码改造完成(附效果图)
【代码】vant4 自定义垂直步骤条时间线组件几行css代码改造完成(附效果图)原创 2023-08-21 18:03:24 · 1335 阅读 · 4 评论 -
纯css实现模仿透明背景图马赛克效果
小程序搜索:趣设计 创建艺术字就可以看到其中效果了。原创 2023-07-10 13:39:05 · 551 阅读 · 0 评论 -
vue纯css实现动态鱼骨图组件,附图片示例
可以指定鱼骨根数和鱼翅的数量,具体看代码就行,默认4根鱼骨5个鱼翅。原创 2023-04-23 09:53:31 · 3058 阅读 · 0 评论 -
css修改原生checkbox的默认样式
不使用lable标签,直接上代码。原创 2023-01-30 15:41:12 · 615 阅读 · 0 评论 -
element-plus 树形控件el-tree 修改小三角图标
【代码】element-plus 树形控件el-tree 修改小三角图标。原创 2023-01-11 16:28:49 · 1825 阅读 · 2 评论 -
纯CSS修改radio样式
纯CSS修改radio样式。原创 2022-12-13 16:20:53 · 1321 阅读 · 0 评论 -
div高度设置100%无效的问题 (亲身实践)
先上我的项目效果图:这是没有加高度的这是加了高度的今天写页面碰到了一个问题,div设置高度100%无效,于是进行检查。首先想到的是div父容器没有高度,于是检查父容器高度,通过谷歌开发者工具发现,父容器高度正常,那为什么元素高度无效呢。然后我试着给父容器设置一个固定的高度,发现元素高度100%居然有效了,这是什么操作。废了半天劲,突然想到我的父容器处于flex布局下,父容器的高度是默认的auto,是不是这个原因呢?于是我给父容器手动设置height:1px;。发现元素的10...原创 2021-10-27 10:16:58 · 3293 阅读 · 0 评论 -
vue文本识别 “ \n ” 的换行问题 和顶部温馨提示实践
在vue项目,有时请求返回的数据res.data中会有含有\n的字符串,如果直接渲染的话无法实现换行。解决方法:一、通过 css属性 实现即:设置 white-space: pre-wrap;,(代码如下):<div style="white-space: pre-wrap;">{{请求返回的含有\n的字符串}}</div>二、使用v-html实现首先,将字符串里的 \n 替换为 <br>,然后用 v-html 指令渲染字符串为 inne...原创 2021-10-13 10:13:11 · 4042 阅读 · 0 评论 -
css清除去掉a标签或者span标签之间的默认留白间距
今天比较有趣,我需要写2个合在一起的span标签,结果有空隙,特意记录下解决办法原本没加效果图: 主要看2个span标签解决办法1:给父元素加 font-size:0,再分别给2个span设置具体的font-size:12px<div style="font-size: 0;"> <span style="background: red; font-size: 12px;">余号:11</span> <span s...原创 2021-09-24 16:49:56 · 717 阅读 · 0 评论 -
基于vscode 自动格式化css + js代码 (装插件)
css格式化要在vscode装:Beautify css/sass/scss/lessjs格式化要装ESLint.vscode 里面设置{ "editor.formatOnSave": true, "editor.tabSize": 2, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.options": { "extensions": [ ...原创 2021-05-13 18:05:23 · 2127 阅读 · 0 评论 -
CSS设置原生table表格边框样式(添加表格横线)(附最后表格td画斜线)
table表格边框样式:推荐这种原理:只对table td设置左与上边框;对table设置右与下边框;<style> .table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} .table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} </style> 从实用角度出发...原创 2021-05-07 09:45:58 · 5691 阅读 · 0 评论 -
css折角的简单实现 真实项目实践
这么久以来,第一次用了折角的效果,哈哈。先来看下这个 折角的效果图:直接上代码:关键代码:<style> .wu{ color: #fff; background:linear-gradient(-135deg, #EDEDED 2em,#cccccc 0) !important; position: relative; } /****** ..原创 2021-02-01 15:41:51 · 277 阅读 · 0 评论 -
vue 移动端table表格 固定首列和首行(简单粗暴)
效果图,不会做gif。。。只有静态预览: 上下滑动的时候固定了顶部,并且往左滑的时候冻结了第一列。代码: 主要原理就是用position: sticky;这个属性,粘在top==0px的时候.<template> <div class="report_detail"> <table> <thead> <tr> <th v-for="(n,...原创 2021-01-09 16:36:36 · 2601 阅读 · 0 评论 -
vue.js 横向(时间轴、步骤图、流程图)模版
效果:<template> <div class="container"> <div style="display:flex;"> <div class="item-wrap"> <div class="item"></div> <div class="dot"></div> .原创 2020-12-04 18:24:19 · 3808 阅读 · 0 评论 -
vue项目中添加水印效果
新建js文件:例如warterMark.js'use strict' let watermark = {} let setWatermark = (str) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let can...原创 2020-08-12 11:26:36 · 484 阅读 · 0 评论 -
h5移动端旋转90度自适应网页
根据经实际情况给某个div块或者给body添加style样式:transform: rotate(90deg);transform-origin: bottom left;position: absolute;top: -100vw;height: 100vw; width: 100vh;然后再调整相应内容css原创 2020-08-07 10:01:04 · 2615 阅读 · 6 评论 -
1rem等于多少px (rem和px怎样转换)
1rem等于html根元素设定的font-size的px值如果css里面没有设定html的font-size,则默认浏览器以1rem=16px来换算。假如我们在css里面设定下面的csshtml{font-size:14px}那么后面的CSS里面的rem值则是以这个14来换算。例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px同理,假如一个设计稿为宽度42px,高度为35px则换成rem,则是4...原创 2020-06-17 14:22:23 · 63936 阅读 · 0 评论 -
动态设置html的font-size值 (适配文字大小)
PC端(function () { function setRootFontSize() { let rem, rootWidth; let rootHtml = document.documentElement; //限制展现页面的最小宽度 rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth; // 19.2 = 设计.原创 2020-06-16 18:10:15 · 7161 阅读 · 0 评论 -
css BFC的介绍规则
如果我们经常用flex来布局pc网页,就可能会用到BFC,主要用overflow:hidden解决哪些属性产生BFCBFC布局特性原创 2020-03-06 14:41:35 · 136 阅读 · 0 评论 -
css 标准盒模型 content-box(只包含content) 和 IE怪异盒子模型border-box(只包含content + border + padding)
1、标准盒模型中width指的是内容区域content的宽度; height指的是内容区域content的高度。(这个元素高度直接就是内容高度) 标准盒模型下盒子的大小=content+border+padding+margin2、IE盒子模型(怪异盒模型)中的width指的是内容、边框、内边距总的宽度(content + border + ...原创 2020-03-06 14:17:24 · 950 阅读 · 0 评论 -
动态更新CSS自定义变量属性值,感觉非常棒的小技巧
<!DOCTYPE html><html><head><meta charset="utf-8"><title>动态更新CSS属性值</title><style>:root { --qq: red;}#ex1 { color: var(--qq);}</style><...原创 2020-02-20 14:39:10 · 2742 阅读 · 0 评论