css
清新小伙子
我很开心…………吧?
展开
-
实现H5时间选择器点击输入框和图标均可弹出日期选择
前言最近写一个 chrome 插件,里面需要用到日期选择器,为了图轻便,便直接用了 H5的<input type="date"> ,但这个有个问题,只能通过点击右侧那个图标才可以弹出日期选择框,这使用起来就非常不爽了。网上找了很久都没找到一个有点用处的博客,最后只能自己一点点去尝试,如今问题解决了,就像记录下来给各位看看,希望能帮到大家~~~解决点击输入框不弹出日期选择思路:首先我们知道点击图标是可以弹出的,那么我们就可以将图标进行绝对定位并覆盖掉输入框,这不就可以变象实现了点击输入框原创 2021-09-10 17:27:49 · 7620 阅读 · 1 评论 -
vue引入重写样式修改Element-UI表格背景色以及悬浮背景色,带操作的表格也可以修改呦~
前言在用vue框架进行开发的时候,使用现成的UI组件库是十分方便的,但方便归方便,现成的它仍然不能满足我们所有的需求,为了达到预期的效果,我们仍需加以修改其样式,这里我采用的是将重写样式放入一个less文件中,再在需要修改样式的组件里引入从而达到修改该组件样式的效果。一:新建一个放重写样式的less文件二:重写样式这里我修改的是表格的背景色,边框色,以及悬浮背景色.el-table{ background-color: rgba(0,0,0,0.25); color: #FFFFFF;原创 2020-09-14 10:01:05 · 2571 阅读 · 0 评论 -
input修改自动填充背景色(单一色以及透明)
前言最近想做一个比较好看的登录界面,就将输入框的背景色什么的都改了一遍,测试时基本效果都达到预期,唯独自动填充账号密码时,自己设置的输入框样式不起作用了,样式又变回默认的自动填充色了,这让我很苦恼…自动填充前的图自动填充后的图解决方法我先是通过打开控制台查找控制自动填充背景色的样式:找出了原来是input:-internal-autofill-selected将我设置的背景色覆盖了。修改默认背景色为单一色彩时可采用以下方法:input:-webkit-autofill {原创 2020-09-10 19:07:24 · 9887 阅读 · 12 评论 -
Vue使用less报错的解决方法
文章目录Vue使用less报错的解决方法前言解决指定较低版本的less-loader来下载以下是解决时的截图我新建的项目下载的less,less-loader版本我新建的项目使用less报错查看之前模板的less,less-loader版本将最新的less-loader版本修改之前的5.0.0版本的less-loader运行成功Vue使用less报错的解决方法前言 接触vue将近一年了,之前都是用Less 作为css的预处理语言,所以封装好了一个基本的项目原创 2020-08-12 23:09:19 · 3104 阅读 · 1 评论 -
span内容溢出显示省略号,鼠标悬浮可显示完整span内容
文章目录span内容溢出显示省略号,鼠标悬浮可显示完整span内容如何将溢出的内容显示为省略号:如何实现鼠标悬浮显示溢出的内容:span内容溢出显示省略号,鼠标悬浮可显示完整span内容在做前端网页的时候,时常需要在规定的内容区显示内容,有时候内容长度过长而内容区长度不够时导致内容溢出,我们为了更好的视觉感受是会将溢出部分的内容显示为...。如何将溢出的内容显示为省略号:只需要给其添加以下css样式即可:white-space:nowrap;overflow:hidden;text-overf原创 2020-07-20 18:30:08 · 7039 阅读 · 2 评论 -
element排序表格的自定义(固定表头,修改背景色,悬浮背景色,滚动条)
最近在做一个列表显示交通车流量的表格,采取的是element的排序表格,但其中样式要改很多很多,我大多数都是自己修改样式的,所以弄了很久,如今就贴一下代码出来吧。最终效果图:接下来我们就一部部来吧,对于排序表格的用法,你们打开官网就能直接用了,不多说:一开始的排序表格样子:表格内容居中且固定表头:固定表头只需要添加height就可以了,例如:height="217"内容居中只需要添加两行代码,而后定义对应函数返回样式即可 :cell-style="rowClass" :header-原创 2020-05-27 11:59:00 · 1192 阅读 · 0 评论 -
解决做表格行内元素高度不一并使内容高度居中显示
最近在做一个学生评价课程的东西,需要做这么一个表格:一开始我是很抵触的,因为我觉得因为课程是遍历显示的,我不知道具体有多少课程,总高度会有多少,那么做右边数学高度居中就有点难度了。最后自己尝试用绝对定位加浮动去一点点改,没想到半个多小时还真让我一点点做出来了,哈哈。具体做法:子元素随父元素高度变化,用position: absolute;,这会导致右边的元素左移,这时你只需要给两边元素设置宽度,然后给右边来个右浮动,最后父元素清除浮动即可!具体代码实现:html:<div class="k原创 2020-05-20 01:27:17 · 437 阅读 · 0 评论 -
行内元素高度不一时如何实现高度对齐?
我们编码的时候,总会遇到行内嵌套几个元素,要是这几个元素高度一致那就好办了,可要是高度不一致呢?如何使高度对齐使得界面更好看?就像下面该图一样,行内嵌套的span和textarea高度不一样,底部对齐布局就有点难看了,我想实现顶部对齐:那要怎么使他们顶部对齐呢?效果图:实现的方法主要大概有三种吧:absolute(绝对定位)不推荐:给行元素相对定位:position: relative;行内所有元素都开启绝对定位position: relative;并设置距离顶部为0top: 0;缺原创 2020-05-08 23:33:04 · 1918 阅读 · 0 评论 -
解决hover影响移动端样式
平时我们写网页的时候,通常会使用hover使得网页效果更好,但我们一旦切换到移动端显示时,我们会发现效果很糟糕。原本hover样式是鼠标悬浮显示,不悬浮就消失了的,但在移动端,我们点击后才显示hover样式,此后如果我们不做处理,那么hover样式就一直存在…问题图:pc鼠标悬浮时,显示样式:pc鼠标移开后,样式消失:移动端点击后,样式不消失:要解决这个问题,当然首先要判断当前设备...原创 2020-04-21 10:44:57 · 6049 阅读 · 4 评论