ZHENGCHUNJUN的博客

css实现动态水波纹效果

#css# 超出高度，可上下滚动

后台管理系统之预览大图

#vue# @click=“”实现点击切换不同的图片

一、需求：使用element-ui等一些第三方组件库时，由于实际项目的差异性，往往需要修改element-ui的css样式，这个时候就需要我们单独针对该页面进行修改样式。二、方法：使用::v-deep样式穿透进行修改即可三、步骤（示例）：修改el-select下拉框的样式（修改它的边框大小）<template> <div class="basic"></div> <el-form-item label

#前端#追加样式，动态修改进度条/仪表盘？

需求：实现盒子四个拐角样式效果如下：思路：（1）首先用一个有宽度及高度的父盒子，包裹4个子盒子（即盒子的四个拐角）<view class="main-pto"> <view class="left-top-corner"></view> //左上角 <view class="right-top-corner"></view> //右上角 <view class="left-bottom-corner">&l.

#vue# 使用JS进行状态判断，并追加类名样式需求：在很多情况下，我们需要做切换状态就会显示不同的样式效果：例如像下面的图（按钮）一样，不同的状态下，方框里显示不同的背景颜色思路：（1）首先我们需要进行排版，排出一个按钮的样式，再写出3个背景颜色的样式（2）再通过接入数据接口，以及追加样式（3）再写Js函数方法<template> <button class="live-state" :class="liveBa...

#vue# 前端排版时的类名共用关系示例，在一个页面里面，会有很多板块都有相同类型的按钮，它们的高度宽度、边框颜色都是相同的，这个时候，我们只需要写出一个可以复用的类名class,只要加上这个类名，我们就可以拿到共用的样式，然后再各自写自己的样式，就不会污染到其他样式示例，有两个相同的按钮，他们的边框、大小都是相同的，定义了一个共用的类名共用版块代码：<button class="el-button></button>将共用类名写上，然后后面加上新的类名，这

css 实现鼠标移入图片显示遮罩层

# vue中字符串文本长度超出显示省略号…及悬浮显示全部文本需求：显示不下的文本用省略号代替,并且鼠标悬停在存放文本的标签里面时（即系悬浮），会有一个div显示该单元格的全部文本信息思路：（1）在需要设置的文本标签处，加入定宽、多出内容隐藏、设置省略号、强制文本在一行内显示这些内容（2）再在标签处，加入 :title=“全部文本” 就可以了//html <div :title="开心开心开心开心开心开心"> 开心开心开心开心开心开心 </div>

#css#如何使用hover，实现父对子的样式改变？思路及做法：鼠标移动到父盒子的时候，里面所有的子盒子的样式都发生变化的，只需要直接在hover后面加上空格，并且加上子盒子的类名 ,里面再写其他样式.父盒子的类名:hover .子盒子的类名 {//这里写鼠标移入到父盒子里面，子盒子要发生的样式变化}温馨提示，遇到父盒子里面的子盒子过多时，可以采取简写的形式：以下为简写形式：.父盒子的类名 { //父盒子的样式1; //父盒子的样式2; //父盒子

#css动画# 如何实现鼠标经过盒子，盒子向上移动且有阴影？html <div class="grid-content bg-purple"> <img :src="`/static/image/join${index + 1}.png`" :alt="item.stage" @click="clickControl(item.id)">

#vueCSS实现鼠标移入时图片的放大效果以及缓慢过渡需求：鼠标移入图片时，图片从中心向外面放大使用到三行

#css 常用但容易忘记的样式（1）鼠标悬停出现手的标志（hover可以用在全部的标签、选择器里）p:hover { cursor:pointer; } （2）鼠标移动到字体上，字体下增加或者去掉下划线.box:hover { text-decoration: none; （去掉） text-decoration:underline；（增加） } （3）font-weight字体加粗或者去掉加粗，不用加单位normal:正常字体bold：加粗还可以

#css001 flex布局小技巧之让某个子元素靠右显示用flex布局小技巧之让某个子元素靠右显示，只需要两句代码，轻松搞定！代码1：在父盒子里面加入以下代码：display: flex代码2：在需要移动的子盒子里（此处为向右显示），加入以下代码：margin-left: auto【 html版块示例 】： <!--我是父盒子--><div class="father_box"><!--两个子盒子--> <div class="so