样式 css/less/scss
文章平均质量分 59
css/less/scss
我是李大福
一个小小的前端工程师
展开
-
grid 布局案例之grid-template-areas和grid-column的使用
分别使用grid-template-areas和grid-column两种方法进行同样效果布局。原创 2024-04-12 12:15:00 · 919 阅读 · 0 评论 -
一些炫酷的按钮特效
一些炫酷的按钮原创 2024-04-13 08:30:00 · 1142 阅读 · 0 评论 -
使用flex布局写6种骰子
不使用position定位,完全靠flex进行分配位置。原创 2024-04-09 12:00:03 · 1108 阅读 · 0 评论 -
vue项目scss预处理器的安装
scss安装代码,有淘宝镜像的直接使用第一段代码,没有的使用第二段代码。原创 2023-03-26 09:32:54 · 222 阅读 · 0 评论 -
table表格依据数据内容相同时进行合并行单元格
table表格依据数据进行合并单元格table表格依据数据内容相同时进行合并行单元格合并前与合并后实际效果比较原理核心代码写代码犯错的位置table表格依据数据内容相同时进行合并行单元格合并前与合并后实际效果比较原理先循环列再循环行,对第一行和第二行进行内容比较,如果内容相同,就隐藏第二行,并将计数器sum+1。继续比较第二行与第三行,依次类推,本列循环完毕,给本列第一行添加rowsp...原创 2019-12-30 00:00:56 · 3494 阅读 · 1 评论 -
element UI 常用表单组件基本配置
element UI常用表单组件基本配置日期时间范围需要添加两个format<el-col :span="6"> <el-form-item label="检斤时间" prop="doWeighingTime"> <el-date-picker v-model.trim="doWeighingTime" type="datetimerange" r...原创 2020-05-01 10:46:32 · 559 阅读 · 0 评论 -
css text-overflow: ellipsis; 单行不裁切的原因及解决办法
css 单行不裁切的原因及解决办法overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: flex;带display: flex;这样写不裁切,需要改成display: block;块级元素才可以裁切原创 2022-01-09 23:37:52 · 389 阅读 · 0 评论 -
基于elementUI的el-button的vue版404 500 403 页面,同时兼容电脑端和手机端
基于elementUI的el-button的vue版404 500 403 页面,可以直接作为组件使用。如果是使用的其他ui框架只需要修改按钮样式就可以。原创 2022-07-10 22:04:09 · 643 阅读 · 0 评论 -
如何实现表单label 两端对齐
表单label 两端对齐文章目录表单label 两端对齐需求概述效果图demo代码需求概述有的强迫症的客户总是要求要两端对齐,首先想到的是text-align:justify ,但是宣告失败!!所以只能采用其他方式效果图demo代码<template><div> <div class="row"> <div class="line"> <span class="label">原创 2021-09-15 23:19:11 · 1628 阅读 · 0 评论 -
css裁剪裁切长文本、css裁剪裁切单行文字、css裁剪裁切多行文字显示省略号 ...
.text-overflow{ text-overflow: ellipsis; width:70px; overflow: hidden; display: inline-block; white-space: nowrap;}宽度依据实际使用进行调整原创 2020-02-26 11:22:30 · 714 阅读 · 0 评论 -
vue版锚点定位巡航
vue版锚点定位巡航原创 2022-05-24 22:43:46 · 480 阅读 · 0 评论 -
Uncaught TypeError: Failed to execute ‘getComputedStyle‘ on ‘Window‘: parameter 1 is not of type ‘El
swiper报错如下Uncaught TypeError: Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’.原因及解决办法:如下代码的加粗位置的元素必须是 .swiper-container,否则就会报错,并且轮播无法使用···var indexBanner = ...原创 2019-07-03 15:56:53 · 11995 阅读 · 10 评论 -
vue项目组件内引用图片的写法
<img src="@/assets/wap/icon_more2.png" alt="">以@/assets/ 开头原创 2020-03-25 18:23:57 · 1844 阅读 · 0 评论 -
css3 backgroud 的缩写形式
css3 backgroud的缩小形式 background: #d3d4d5 url(bg.png) 100% 0 / 50% 80% no-repeat;注意:/ 不能丢,/前面表示background-position; /后面表示background-size<!DOCTYPE html><html lang="en"><head> ...原创 2020-05-02 11:15:19 · 414 阅读 · 0 评论 -
vue 跑马灯顶部显示轮播效果
目录vue 跑马灯顶部显示轮播效果gif动画展示实现原理demo代码vue 跑马灯顶部显示轮播效果gif动画展示实现原理使用定时器setInterval对元素的left进行间隔操作,逐渐减小,实现从右到左的移动。mouseover时对定时器停止,mouseout时重新启动定时器。由于移动元素需要加点击事件,所以使用了v-html指令,如不需要,请换成v-textdemo代码<!DOCTYPE html><html lang="en"><head>原创 2020-05-22 23:54:45 · 849 阅读 · 0 评论 -
兼容性处理之低版本ie的处理
<!--[if IE 9]> <meta http-equiv="X-UA-Compatible" content="IE=8"><![endif]--><!-- HTML5 shiv 和 Respond.js 是为了让 IE8 支持 HTML5 新增的元素和媒体查询(media queries)功能 --> <!-- 警告:通...原创 2019-08-13 15:50:22 · 160 阅读 · 0 评论 -
vue 最简单的tab选项卡
选项卡文章目录选项卡概述效果图代码demo概述本tab选项卡demo只实现基本的tab选项卡切换,具体样式请依据项目进行修改优化效果图代码demo<!-- 产品详情 :产品介绍、产品规格、产品售后 --><template> <div class="intro"> <ul class="tabs"> <li class="tab" v-for="(item,index) in tabs" :key="ind原创 2022-01-09 23:41:19 · 658 阅读 · 0 评论 -
element-ui 的el-cascader多选在IE中样式不正常
注意:ie缓冲比较严重,修改样式后,一定要ctrl+shift+del 进行缓冲清理,没准清理完缓冲你的样式就起作用了<style> @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .el-cascader__tags > span { flex: aut...原创 2020-03-19 00:49:33 · 1570 阅读 · 0 评论 -
图片长宽比不同时,依然居中显示
<style>.exhibitorDetail__product__item_imgs { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-p...原创 2020-03-06 10:44:35 · 166 阅读 · 0 评论 -
去除html 中 table标签里面多余的class height width style等内容
去除html table里面多余的内容需求概述工作中,客户会发来excel表格,让放到网站上进行显示。将表格粘贴到在线版的html编辑器 在线编辑html链接 生成代码后,代码里会有很多冗余的代码,为了与系统原来样式保持一致,必须去掉这些多余的代码去除操作采用带有正则匹配的工具,如vscode,webstorm等第一步去除 class height width style附上正则:(class="[\s\S]*?")|(height="[\s\S]*?")|(width="[\s\S]*?"原创 2020-11-21 12:56:25 · 1086 阅读 · 0 评论 -
vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式
vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式文章目录vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式概述需求问题描述解决办法添加样式前添加样式后在线demo完整代码(需安装了scss和iview组件)其他关于scoped的介绍概述项目中使用了scss预处理器(使用其他预处理的同理)和第三方ui组件iview进行表格美化。需求需要将数据表“净值估算”列负数标注为绿色,正数标注为红色,字体加粗;排原创 2021-07-08 20:48:33 · 3269 阅读 · 2 评论 -
flex制作的常用布局
flex制作的常用布局两端宽度定值,中间自适应<div class="module"> <div class="module_l"> <div> left1 </div> <div> left2 </div> </div> <div class="module_c">原创 2022-03-27 22:14:03 · 232 阅读 · 0 评论 -
如何让自己制作的按钮文字不被选中?
如何让自己制作的按钮文字不被选中?文章目录如何让自己制作的按钮文字不被选中?概述核心代码我们不希望看到文字被选中的效果完整demo概述我们在自己写按钮的时候,不希望在点击按钮的时候,出现文字被选中的效果。只需要添加下面的代码就可以了。核心代码-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;我们不希望看到文字被选中的效果完整demo <span cl原创 2021-09-06 22:40:19 · 514 阅读 · 0 评论 -
html转pdf需要注意的边框不显示的兼容性问题
样式处理好多选择器都不支持,最好都写到行内表格边框问题只能像下面这样分开各个方向写,不能像平时那样直接写border: 1px solid #e8eaec; border-top: 1px solid #e8eaec; border-right: 1px solid #e8eaec; border-bottom: 1px solid #e8eaec; border-left: 1px...原创 2020-03-23 11:50:44 · 3576 阅读 · 0 评论 -
less高级使用技巧之循环输出
进行循环输出应用举例使用循环输出margin-left常用控制,ml5~ml60(margin-left:5px;其他依次类推)// 使用循环输出margin-left常用控制,ml5~ml60(margin-left:5px;其他依次类推)@marginMax:60;//最大上限@marginStep:5;//渐变值// margin-left .ml(@marginMax);....原创 2019-05-16 11:57:08 · 1622 阅读 · 0 评论 -
less loop 循环编写
less loop 循环编写文章目录less loop 循环编写less 代码生成的cssless 代码.gen-col(@n) when (@n > 0){ .gen-col(@n - 1); .col-@{n}{ width: 1000px/12*@n; }}.gen-col(12);生成的css.col-1 { width: 83.33333333px;}.col-2 { width: 166.66666667px;}.原创 2020-12-28 22:13:49 · 541 阅读 · 0 评论 -
前端base级响应式专用样式
base级样式,即项目切换的时候,这里的内容不再随项目的主题配色圆角直角等改变。原创 2022-11-05 22:32:50 · 111 阅读 · 0 评论 -
价格拆分为点前面字号大,点后面字号小
价格拆分为点前面字号大,点后面字号小原创 2022-05-19 23:59:11 · 290 阅读 · 0 评论 -
freemarker 指令控制新闻列表标题样式
freemarker 指令控制新闻列表标题样式原创 2022-03-12 12:08:35 · 345 阅读 · 0 评论 -
css绘制三角形 triangle
css3绘制三角形原创 2022-01-29 09:49:00 · 267 阅读 · 0 评论 -
很不错的UE交互
很不错的UE交互效果图demo<template><div> <div class="bg"> <h2>很不错的UE交互</h2> <ul class="list"> <li class="list_i"> <a href="###" class="list_a" target="_blank">原创 2021-11-27 22:44:35 · 332 阅读 · 0 评论 -
html+css不换行的解决办法
html+css不换行的解决方法文章目录html+css不换行的解决方法问题描述需求效果图解决方案总结完整demo代码问题描述**需求:**一级菜单较短,不用换行,二级菜单比较长需要换行。但是一级添加了强制不换行white-space: nowrap;导致二级也不换行。需求效果图解决方案在二级上添加换行处理代码white-space: normal;总结white-space 是继承属性,千万要记住,别被坑了,好多同行和我一样误认为它是非继承属性,被它坑惨了。附,详细说明链接:http原创 2021-07-27 21:51:33 · 1315 阅读 · 0 评论 -
css3截取多行文本,苹果手机...与文字叠加在一起的问题
css3截取多行文本,苹果手机…与文字叠加在一起问题复现苹果手机无论是H5还是微信小程序都出现了这个问题解决办法去掉 text-align:justify 就可以了测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=原创 2021-04-22 17:56:23 · 876 阅读 · 0 评论 -
消除 cms网站系统的富编辑器中添加的img图片自动添加的高度
问题描述由于网站是web端和wap响应式的,图片的宽度和高度都需要去掉才能保证wap端不变形。因此,需要将wap中的高度和宽度去掉/* 所有图片最大宽度为全屏显示 */.mainContent img{ max-width:100%!important;}/* 所有图片高度去掉 */.mainContent img[style*='height']{ height:auto!important;}处理前后比较...原创 2021-01-22 23:25:09 · 126 阅读 · 0 评论 -
iview(View UI)全局配置变量
iview(View UI)全局配置变量,有时候由于某些原因,官网打开比较慢,甚至出现样式表无法加载导致页面错乱的情况,所以可以到这里查询相应的变量名称转载 2021-01-17 23:21:15 · 761 阅读 · 0 评论 -
修改radio的选中颜色为红色
修改radio选中颜色为红色<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>修改radio的选中颜色为红色</title> <meta name="description" content=转载 2020-11-29 09:11:20 · 9258 阅读 · 8 评论 -
sass loop循环
sass loop循环文章目录sass loop循环sass 循环代码之一sass 循环代码之二--for循环css 代码sass 循环代码之一@mixin gen-col($n){ @if $n > 0 { @include gen-col($n - 1); .col-#{$n}{ width: 1000px/12*$n; } }}@include gen-col(12);sass 循环代码之二原创 2020-11-23 22:19:37 · 413 阅读 · 0 评论 -
vue项目中的常用的几种路径情况的使用 ~@/ @/ ~@/assets/
概述写vue避免不了使用各种图片进行点缀,或者在后台未搭建之前进行图片占位,图片的使用大概分如下几种:全局样式里面使用图片icon作为点缀某个页面的组件内,使用图片某个原子类组件内使用图片,然后在页面及组件内调用此组件...原创 2020-08-08 22:16:56 · 5985 阅读 · 0 评论 -
css3的高级选择器第几个(第1个|最后1个|第奇数个|第偶数个|第5个|倒数第5个|第5个(含)之后|第5个(含)之前|第5n个(含)|第5n+1个|每隔4个循环一次|第三列(每行10列)|第三行)
由于现在系统数据都是后台传到前台的,有时候需要处理某些元素的样式,这时候css3的高级选择器就能排上用场了!第1个|最后1个|第奇数个|第偶数个|第5个|倒数第5个|第5个(含)之后|第5个(含)之前|第5n个(含)|第5n+1个|每隔4个循环一次|第三列(每行10列)|第三行...原创 2020-04-29 00:04:47 · 1355 阅读 · 0 评论 -
less预处理器的高级用法只BEM命名的运用
less预处理器的高级用法只BEM命名的运用文章目录less预处理器的高级用法只BEM命名的运用优缺点分析效果图htmllesscss主流的css预处理器有如下几种:less、scss、sass。本博文侧重介绍less预处理器的高级用法,对于想学习基础用法的朋友,请移步less的基础用法进行学习。本例以一个简单的输入框表单进行举例,采用bem命名法起名,bem的规则详见bem在css中的应用。优缺点分析大家都知道bem的一个缺点就是命名过长,而less的高级用法中符号&,可以完美解决这个原创 2020-06-17 23:31:03 · 946 阅读 · 0 评论