随笔分类 -  css

element cascader多选filterable导致placeholder重叠问题
摘要：网上查了很多没有遇到满意的，最后隐藏input的css样式解决。 <el-cascader placeholder="请输入" :options="data.typeList" :props="typeProps" v-model="id" collapse-tags filterable clea 阅读全文
posted @ 2022-12-16 15:54 chillylight 阅读(1316) 评论(0) 推荐(0)
移动端页面弹窗滚动，页面也随之滚动解决方案
摘要：在做移动端开发时，常常会开发需要滚动的弹窗。例如 这时如果在手机上滚动弹窗里的内容，遮罩层底下的页面也会跟着滚动。给用户带来不太友好的用户体验。 在网上查阅了一些方法后，找到了一种： 在弹窗弹出来之后设置 在关闭弹窗后移除 当然前提是你没在body和html的style设置什么内联样式。不然移除的话 阅读全文
posted @ 2018-12-06 16:41 chillylight 阅读(2173) 评论(0) 推荐(0)
css3条纹进度条
摘要：新建div，取名progress，如下 在里面插入条纹进度条,以及进度显示文本进度： 添加样式 最后效果如下： 这里需要注意的是css3，keyframes的兼容性如下，ie9及以下就别用了： 阅读全文
posted @ 2018-09-26 16:51 chillylight 阅读(1268) 评论(0) 推荐(0)
使用fastClick.js所产生的一些问题
摘要：开发h5活动页时想到移动端会有300ms的延迟，于是便打算用fastClick.js解决。 页面引入fastClick.js后，滑动H5页面的时候发现谷歌浏览器会报错,如下： Unable to preventDefault inside passive event listener due to 阅读全文
posted @ 2018-07-27 16:28 chillylight 阅读(4993) 评论(0) 推荐(1)
css 写一个向右的箭头
摘要：经常写移动端页面时会用到向右的箭头，之前都是用图片，突然想到用css应该也能写，于是一搜还确实有 原理也挺简单，就是写个上边框和右边框，然后旋转45度就是向右的箭头了。不过移动端用应该没问题，pc上就要考虑transform的兼容性了。 阅读全文
posted @ 2018-07-16 21:05 chillylight 阅读(12055) 评论(0) 推荐(0)
css3 动画属性
摘要：transition Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。 Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。 Safari 支持替代的 webkit transiti 阅读全文
posted @ 2018-01-25 11:41 chillylight 阅读(296) 评论(0) 推荐(0)
纯css写带小三角对话框
摘要：在实际样式中经常会遇到要写类似对话框的样式，而这种样式往往会有一个小三角，如下所示： 那么如何用css写出来呢，其实很简单，先让父元素相对定位，然后运用css的伪类before或after。就可以写个三角形，如果想要带边框的三角形，则可以两个重叠使用。代码如下： 阅读全文
posted @ 2018-01-13 14:53 chillylight 阅读(1006) 评论(0) 推荐(0)
input的placeholder颜色修改
摘要：input[type=text]:: webkit input placeholder { / WebKit browsers / color: 999; } input[type=text]: moz placeholder { / Mozilla Firefox 4 to 18 / color: 阅读全文
posted @ 2017-11-22 16:38 chillylight 阅读(220) 评论(0) 推荐(0)
元素上下左右居中的几种方法
摘要：定位居中1：relative，left top 50%，负margin-left margin-top 让外层div相对定位（得设置宽高），内层div绝对定位，top、left分别设为50%，然后通过设置margin-top、margin-left值为宽度的负数并且是内层div的一半，就可以成功实现 阅读全文
posted @ 2017-10-01 16:50 chillylight 阅读(3323) 评论(0) 推荐(0)
纯css制作小三角
摘要：在网站制作的过程中常涉及一些小图标，以前大部分会采用小图片。但有了css3后很多变得方便了，比如要在li列表的每行文字的前面加个小三角，可以这么写： 效果便如上所示，方框包围的小三角就是。 阅读全文
posted @ 2017-03-14 10:27 chillylight 阅读(389) 评论(0) 推荐(0)
设计表单
摘要：设计表单 A Stylin' Form Part 1 &#8226; Basic Controls * indicates required field ... 阅读全文
posted @ 2017-03-10 13:49 chillylight 阅读(183) 评论(0) 推荐(0)
纯css制作三级菜单
摘要：三级菜单 首页 第二 第三 ... 阅读全文
posted @ 2017-03-10 10:43 chillylight 阅读(3279) 评论(0) 推荐(0)
三栏-中栏流动布局
摘要：三栏-中栏流动布局主要有两种方法： 1.在中栏改变大小时使用负外边距定位右栏（适合较老浏览器）。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title</title> <link rel="stylesheet" ty 阅读全文
posted @ 2017-03-06 16:45 chillylight 阅读(411) 评论(0) 推荐(0)
三栏固定布局（为栏设定内边距和边框）
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title</title> <link rel="stylesheet" type="text/css" href="./normalize.css"> <script> (f 阅读全文
posted @ 2017-03-06 15:20 chillylight 阅读(671) 评论(0) 推荐(0)
清除浮动的几种有效方法
摘要：很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。应该叫闭合浮动。清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 浮动元素会 阅读全文
posted @ 2017-02-22 15:35 chillylight 阅读(339) 评论(0) 推荐(0)
自定义单选框radio样式
摘要：自定义单选框radio样式 女 男 阅读全文
posted @ 2017-02-17 14:52 chillylight 阅读(4920) 评论(0) 推荐(0)