sunshineTing2的博客

以下 th 代表某个标签一、选择前几个元素，比如前4个th:nth-child(-n+4){}二、选择前第4-8个元素th:nth-child(n+4):nth-child(-n+8){}三、选择列表中的倒数第n个th:nth-last-child(n) {}四、选择列表中的第一个，最后一个// 第一个th:first-child {}// 最后一个th:last-child{}五、选择列表中的奇数个，偶数个// 奇数 (odd)或者(2n)th:nth-c.

动画一：圆圈荡漾用途：常用于提示用户去点击或勾选<div style="margin: 30px auto; width: 300px"> <i class="circleRipple"></i> <span style="margin-left: 30px">圈圈荡漾</span></div>/* 圆圈荡漾 circleRipple*/ .circleRipple{ position:

页面中的安全宽度为1130px，若浏览器宽度小于1130会出现空白因为使用了flex布局导致的，需要设置一个最小宽度 min-width: 1130px;

首字母大写text-transform: capitalize;<span style="text-transform: capitalize;">english article</span>// English Article

效果图只需两行代码：column-count: 2; // 列数column-gap: 80px; // 列间距示例代码：.flowBox { column-count: 2; // 几列 column-gap: 80px; // 列间距 .flowItem { break-inside: avoid; }}<div class="flowBox"> <div v-for="(item,index) in expertList"

效果如下:<ul> <li><span>姓名</span>:<span>张三</span></li> <li><span>出生年月</span>:<span>199908</span></li> <li><span>年龄</span>:<span>20</spa

前言因为element-ui dialog本身的动画效果基本就是没动画效果,所以需要另外设置(下面会讲到)应用场景描述一、场景一1.在第一屏, 机器人图标左右摆放,absolute定位2.左侧按钮, 弹框定位在左侧; 右侧按钮,弹框定位在右侧.代码实现::v-deep.el-dialog.robotEva{ margin-right: 50px; // 右侧弹框}::v-deep.el-dialog.robotWalle{ margin-left: 50px; //

可以用::v-deep来解决使用方法如下::v-deep .v-text-field.v-text-field--enclosed .v-text-field__details { margin-bottom: 8px; padding: 0px !important; }在想要修改的样式前面加上v-deep就可了转载原文链接：https://blog.youkuaiyun.com/weixin_40679578/article/details/106401517...

CSS瀑布流式布局两行CSS实现瀑布流column-count: 2; // 几列column-gap: 80px; // 列间距.flowBox{ column-count: 2; // 几列 column-gap: 80px; // 列间距 .flowItem{ break-inside: avoid; } }<div class="flowBox"> <div class="flowItem">内容块<

ElementUI steps默认样式：实线修改为虚线圆点只需修改el-step__line：/deep/.el-step__line{ background: transparent; border-top: 5px dotted; .el-step__line-inner{ border-width: 0 !important; }}拓展：实现代码：其中绿色的Badge 标记可由step中的description来实现，通过修改.el-step__descri

伪元素必须设置“content”属性，否则伪元素是无用的:after{ content: ""; display: block; width: 10px; height: 10px;}经常利用伪元素定位来实现不规则样式事例：

.router-link-active { border-bottom: 4px solid blue; } .router-link-exact-active { border-bottom: 4px solid red;

默认的flex布局下的 标题文字超出后省略号显示无效解决办法：在flex:1的盒子中，设置overflow: hidden; 或 width: 0;即可。<div class="box"> <div class="son"> <p class="title">一大段文字超出后会缩略吗,怎么实现</p> </div><...

table 表格样式四个知识点1、rowspan 合并行2、colspan 合并列3、border=“1” 一像素边框4、border-collapse: collapse; //合并边框<h4>横跨两列的单元格：</h4><table border="1" style="border-collapse: collapse; //合并边框">...

用ul写出类似table表格的样式data数据organList = { name: '安全委员会', code: 'awh20200215', higher: '柏科管理公司', duty: ['1.第一','2.第二'], person: '张三', phone: '18701966666'};templat...

width: calc(1200px - 4%);padding: 2%;子 leftwidth:61%子 rightwidth:30%

Vue 根据不同的值显示不同的class一、<span :class="['iconfont','fontSize30','txtColor',item.iconClass]"></span>二、

<div class="newBtn"> <span @click="dayClick(index)" v-for="(item,index) in dayTab" :class="[idx === index ? 'active' : '']" ...

text-overflow: ellipsis;第一种：只对display：inline；起作用第二种：display:block/inline-block; + width:100px;1.单行文本溢出white-space: nowrap ; //文字不换行overflow: hidden; //超出后文字隐藏text-overflow: eclipse; //文字隐藏后添加省...

在网上查阅了很多方案，没有解决，原来因为在需要滚动的div中设置了overflow-y:auto导致的。只需去掉overflow-y:auto，scrollTop()方法就能生效了。

设置滚动条样式 /* 设置滚动条的样式 */::-webkit-scrollbar { width: 3px; height: 3px;}/* 滚动槽 */::-webkit-scrollbar-track { /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/ border-radius: 10px; wi...

npm install font-awesome --save在main.js中引入import 'font-awesome/css/font-awesome.css'在App.vue的[class^="el-icon-fa"], [class*=" el-icon-fa"] { display: inline-block; font: normal normal nor...

在Vue2.0项目中，添加 elementUI组件的时候遇到下面的错误： error in ./node_modules/_element-ui@2.11.1@element-ui/lib/theme-chalk/index.css Module build failed: Error: No PostCSS Config found in: /Users/zlt/Documents/vue...

在Vue2.0中全局引入SCSS文件一、安装 sass-loader 和 node-sassnpm install sass-loader --save-devnpm install node-sass --save-dev二、创建.scss文件三、在app.vue中引入.scss文件<style lang="scss"> //注意要用lang="sc...

制作一个类似浏览器标题栏的tab切换效果CSS样式圆弧的样式由 元素本身 + 左右两个小角 组成首先，将元素设置 相对定位 + 圆角边框，以及宽高设为：position: relative; //相对定位width: 120px; height: 40px; line-height: 40px; text-align: center; background-color...