CSS
关注
分享
扫一扫
文章平均质量分 54
向着光芒的女孩
平时坚持瑜伽和阅读，是个内心温柔但充满力量的web前端程序媛
展开
-
【uni-app】如何修改uni-app子页面的背景颜色
项目里面看到已经被在App.vue中设置了背景色全局生效，想修改子页面单独的页面页面背景色，发现没能一下就生效。原创 2023-03-06 16:19:53 · 1030 阅读 · 0 评论 -
【微信小程序】按钮button组件宽设置无效解决方案
在小程序里设置button组件的width竟然失效，让我们来看看原因和解决方案。原创 2022-08-04 17:55:43 · 5813 阅读 · 0 评论 -
【CSS】 画优惠券锯齿边框样式
通过css就可以画锯齿的优惠券样式，这样画出来的优惠券背景非常高清。原创 2022-02-08 18:13:32 · 2486 阅读 · 0 评论 -
【vue】vue-cli3配置scss全局变量
由于想在vue文件中使用scss变量，所以想配置一下全局使得更方便使用和维护，package.json中对应的版本号是："@vue/cli-service":"3.5.3"、"sass-loader": "^7.1.0"1.配置在项目根目录下的vue.config.js中配置module.exports = { css: { loaderOptions: { // 没有分号会报错 sass: { data: `@import "@/assets/.原创 2021-06-30 12:26:07 · 1125 阅读 · 5 评论 -
【CSS】为什么建议多用class而少用style?
前端的样式设置，尽量用class，迫不得已的话才用style,因为：用class可以很多标签应用同一个样式，换样式只改class的话，就生效了style优先级特别高，class很难覆盖后期代码不好维护，其他地方覆盖样式只能用!important和js去改了，有的时候还不一定生效如果想统一修改主题样式，style设置很多的话，统一修改样式就比较麻烦，花费时间特别多且容易漏掉一些样式通过class的话，更符合前端规范，标签更注重于它的语义化使用，而且更简洁...原创 2021-02-24 11:55:15 · 3004 阅读 · 3 评论 -
【浏览器兼容性】如何隐藏微软的ie和edge浏览器密码输入框的小眼睛
如果用了element-ui的show-password后再用浏览器自带的小眼睛的话会感觉特别奇怪如何复现经过我多次试验，发现当第一次光标聚焦在密码输入框时才出现，之后就聚焦就不会再现小眼睛了，edge和ie浏览器都有试验版本如下：IE(11.1016.18362.0）和 edge(85.0.564.41)查看edge代码审查，发现有微软自己写的样式解决方案/*取消微软浏览器的密码小眼睛样式*/input[type="password"]::-ms-reveal { display原创 2020-09-23 15:02:00 · 3768 阅读 · 7 评论 -
【CSS】flex实现多行多列的多种方式
灵活变通：思路主要是通过百分比和折行来实现，是几列就把百分比变为100%/n,如果是3列，那么可以把50%改成33.333%,如果是4列，那么同理可以改成25%，依次类推，下面是2行2列的多种写法实现1.父容器设置为flex布局，并允许折行 .flex-outer { display: flex; flex-wrap: wrap; } 2.子容器设置样...原创 2020-03-13 18:16:17 · 8287 阅读 · 1 评论 -
【CSS】8种常见的CSS水平和垂直都居中的方法
1.比较传统的方式 absolute+margin负值偏移 /* absolute+margin负值偏移布局 */ .layout.absolute { position: relative; } .layout.absolute article { position: absolute; top: 50%; left: 50%...原创 2020-03-13 12:32:56 · 486 阅读 · 0 评论 -
【CSS】用CSS画某个突出列表的书签/标签
有的时候某些列表需要标签突出，与其他列表的区别，可以用CSS来实现，思路如下：(1)通过border-width的不同方向来呈现出缺口三角，水平方向：父容器的height为伪类after的border-width的一半，缺口方向的边框颜色透明(border-right-color:transparent)，且它的相反方向即左边框宽度设置为0(border-left-width:0)垂直方向...原创 2019-07-30 17:02:12 · 2553 阅读 · 0 评论 -
【CSS】flex布局平分三等分中间间距相等且两端对齐
思路：通过display:flex,再将子元素设置flex:1,再包一层，通过设置padding来设置中间间距，可以达到想要多效果padding-right(第1个盒子):padding-left(第2个盒子):padding-right(第2个盒子):padding-left(第3个盒子)=2:1:1:2完整代码如下：<!doctype html><html>...原创 2019-05-29 22:54:55 · 34719 阅读 · 7 评论 -
【兼容性】element-ui 火狐浏览器select搜索条件无匹配时界面不友好
element-ui 版本： 2.9.11.搜索没数据时火狐浏览器：2.搜索没数据时谷歌浏览器：原因：主要是因为火狐浏览器和谷歌浏览器默认的overflow:scroll显示的滚动条的高度不一样可以如下方式优化CSS：/*修复火狐浏览器 显示问题*/ .el-scrollbar.is-empty .el-select-dropdown__wrap { height:0 }...原创 2019-05-31 15:36:23 · 1755 阅读 · 0 评论 -
【技术】nuxt中引入wow和animate.css随页面滚动出现动画
安装cnpm install wowjs --save-dev安装成功后：“package.json "wowjs": "^1.1.3"2.nuxt.config.js中引入 css:[ '~/assets/css/animate.css' ],3.在所需要用到动画在的vue文件中引入<script> if (process.browser...原创 2019-05-28 19:17:13 · 5660 阅读 · 4 评论 -
【html】在浏览器中显示多个空格
如果在html中直接敲多个空格，不做处理的情况下你会发现只出现一个空格，那么想出现多个空格的简单方法如下： (1)可以用多个实体来显示空格，如显示两个空格 (2)用样式也可以实现style="white-space:pre;"(3)可以用全角下的中文空格代替两个空格原创 2016-11-23 12:35:40 · 4265 阅读 · 0 评论 -
【js】Bootstrap的popover（弹出框）2秒后定时消失
先在目标DOM结构中弹出小提示，然后2秒后提示消失function showPopover(target, msg) { target.attr("data-original-title", msg); $('[data-toggle="tooltip"]').tooltip(); target.tooltip('show'); target.focus();原创 2017-02-27 14:25:35 · 14488 阅读 · 0 评论 -
【CSS】div等元素height:100%高度为什么不生效
以前一直很郁闷一个问题，为什么设置height:100%不生效，尤其是设置body:height:100%不生效，后来就很少使用了这个了。今天在学习谷歌地图时关于height:100%看到了解答： In specific, all percentage-based sizes must inherit from parent block elements, and if any of those原创 2017-01-13 14:40:56 · 45250 阅读 · 9 评论 -
【总结】css资源收集
CSS div内放长英文字母或长数字自动换行 CSS一行排不下自动打断换行http://www.divcss5.com/jiqiao/j777.shtml原创 2017-06-22 22:14:45 · 431 阅读 · 0 评论 -
【工具总结】前端常用辅助工具
1.马克鳗http://www.getmarkman.com/#/download-modal设计稿标注，测量2.CSS精灵https://www.toptal.com/developers/css/sprite-generator能根据图片生成一张图，svg格式的也可以，并将定位代码也贴出来3.pickpickhttp://ngwin.com/picpick/features有量角器，很喜欢4.富原创 2017-09-25 14:50:37 · 922 阅读 · 0 评论 -
【技术】通过js将css动态插入到head头部
通过js动态将css放在head中：var style = document.createElement("style");style.type = "text/css";style.innerHTML="body { background-color:#eee; }"style.id="addStyle"document.getElementsByTagName("HEAD").ite...原创 2019-05-08 16:27:41 · 3053 阅读 · 0 评论 -
【CSS】实现按钮hover时背景色从左慢慢移动到右边
按钮鼠标移动上去时，新背景色从左到右滑过去，思路：1.正常情况下：通过伪类before和after,让按钮多两层的技巧容器大小跟按钮一样大，且在按钮的下面，刚开始宽度为02.鼠标移动过去:button的真正的背景色设置为透明，然后给最下面一层的颜色是以前的背景色，z-index:-2，width:100%按钮下面一层，z-index:1,背景色为新背景色，width:100%,再设置个过...原创 2019-05-10 14:34:36 · 11488 阅读 · 2 评论 -
【技术】js和css的大小写转化
1.javascript转大写： var str="Hello world!"; str=str.toUpperCase();转小写： var str="Hello world!"; str=str.toLowerCase();2.css转大写： text-transform:uppercase;转...原创 2019-05-22 18:42:33 · 383 阅读 · 0 评论 -
【技术】CSS设置链接鼠标（失效）不能点样式
css关键代码： <style type="text/css"> .add-link{ color: #358753; } .link-notallowd{ opacity: .6; cursor: not-allowed; } .link-notallowd:hover{ cursor: not-allowed; t...原创 2019-05-13 17:03:48 · 1032 阅读 · 0 评论 -
【CSS】下划线与文字间距，下划线粗细以及下划线颜色的设置
最开始的时候了解下划线的属性是：text-decoration:underline;但是，很遗憾的是，对于设计做的下划线用浏览器默认属性样式很难调整，使用这个属性并不能调整下划线与文字的间距，而且对于下划线的颜色也不好调整，而使用这个标签也是同样的效果。例子：原创 2016-09-28 16:10:42 · 102334 阅读 · 5 评论