css
撒野女孩
人生昧履,砥砺而行
展开
-
使用css伪类,实现同类型复选框计数的效果
使用css伪类,实现同类型复选框计数的效果最近发现一个css的小技巧。在以往,当我想要获取checkbox的数据数量的时候,常规的做法是使用js遍历checkbox数组,定义变量达到统计数量的效果。现在使用css完全可以实现相同的效果,简单便捷,在不操作DOM的情况下达到目的,嘻嘻代码块这里贴出相关代码,希望能帮到大家:<html> <head> <meta charset原创 2017-12-29 21:22:19 · 180 阅读 · 0 评论 -
css文本溢出省略
css实现文本溢出显示省略号在做响应式网页的时候,我们要想在不同尺寸的设备下保证布局不会错乱,就需要对文字的长度进行限定。基础设置在介绍下面的方法之前,我们先对所有的例子进行基础的样式设置/*基础设置*/div.box{ width: 100px; height: 100px; border: 1px solid #ddd; color: ...原创 2018-03-22 15:28:09 · 4381 阅读 · 0 评论 -
css元素分散贴边对齐
怎样让多个元素贴边平分?为什么会有这个疑问呢?首先说明一下,接触前端有一年的时间了,自认为对静态布局不在话下,果然,自负的人最容易被打脸呐,刚换了一份工作,公司对前端要求比较严格。 公司使用的是bootstrap开发,我们都知道bootstrap框架最核心的是它的栅格系统,我当然也很喜欢这个啦,不过最近UI给我的设计图总是和bootstrap相矛盾,就好比说,有个模块需要每一个元素在移动端和...原创 2018-03-20 23:04:04 · 8332 阅读 · 0 评论 -
css基础多栏布局
前端布局基础布局,主要展现在移动端,pc端同样适用。分为一栏、两栏、三栏、四栏。 这里使用了两种方式实现。 首先设置基础样式:/*==================common css start================*/ ul{ list-style: none; background: #f0f1f1; pad...原创 2018-04-24 11:53:40 · 264 阅读 · 0 评论 -
css之简易水波效果
css之水波效果没事实现了一个小效果,贴上来分享分享 - 先看看效果 - 上代码```css:root{ background: #ddd;}body{ position: relative;}ripper{ width: 50px; height: 50px; background: rgba(0,0,0,.1); ...原创 2018-04-28 18:38:48 · 795 阅读 · 0 评论 -
win10日历hover交互效果实现(初级)
#win10日历早就想试着实现以下win10日历的动态css效果,现在终于有时间试试啦。本篇文章只是实现简单的效果,进阶篇后续会放上来文章都是基础知识,基础,基础,觉得简单也别喷好吗,答应我目标效果鼠标移入目标元素,周围相关八块元素点亮,点亮高光范围呈圆形点击元素选中,呈蓝色色块实现效果图1.win10原图2.初级实现图3.进阶实现图技术点定义公共类:d...原创 2018-11-28 12:08:27 · 1131 阅读 · 0 评论 -
win10日历hover交互效果实现(进阶)
#win10日历可视移动高亮范围本篇文章在前一个初级的基础上进行后续的体验优化目标效果鼠标在目标元素内进行移动,9个块组成的圆形高亮会随之移动实现效果图1.win10原图2.进阶实现图技术点初级篇使用的渐变范围写法:radial-gradient(42px at right bottom, #3c3c3c, #1a1a1a);进阶篇使用的渐变范围写法:radial-...原创 2018-11-28 16:18:02 · 1167 阅读 · 1 评论 -
ivew表单校验踩坑记
#iview表单必填的标志显示使用iview自定义表单校验时,对于v-if显示状态的修改会影响的显示####情况:使用v-if设置在新增是密码字段显示,编辑时不显示这时校验规则已完成,设置只有办公电话不是必填项切换到编辑时,密码字段消失,但是办公电话前会出现*####代码<FormItem v-if="modalType===0" label="密码" prop="pass...原创 2018-12-29 11:50:43 · 1478 阅读 · 0 评论