- 博客(37)
- 收藏
- 关注
RSS订阅原创 非链接标签的active激活伪类设置举例
网上搜索active伪类大多数出来都是链接点击激活后的样式设置，巴拉巴拉一堆之后仍然不给出实例让人不知道怎么应用，实际上active伪类的应用一般有，鼠标点击一个元素后显示另一种样式，如更换颜色，现举例如下：在div标签中添加:class="{active:current === index}"，其中current === index表示将此div添加一个class的条件，可以使用js的布尔表达式，然后在css中该div中设置&.active{}，在大括号内添加相应的该div被激活后的样式，至.
2021-02-25 11:57:39
431
原创 css设置竖排字体时letter-spacing无法有效设置字体间距
因为如果是通过设置宽度来进行自动换行的话，则无法通过letter-spacing或者word-spacing设置字体间距，实际上此时字体间距的本质是行间距，单行只有一个汉字，所以只能通过设置line-height进行设置...
2021-02-25 10:14:41
798
1
原创 css最简单的水平垂直居中方案！！！
垂直居中：display:flex;align-items:center;水平居中：display:flex;justify-content:center;
2021-02-24 17:08:34
138
原创 vue+elementui表单验证规则举例
<template><div><el-formref="ruleForm":model="ruleForm"label-width="117px":rules="rules"><divclass="company-name"><el-form-itemlabel="公司名称"prop="...
2021-02-24 16:57:54
267
原创 如何让height:100%起作用
需要给该div的所有父元素都设置有效高度，尤其是需要注意给html标签和body标签设置高度，可以设置100%，body的100%高度是html的高度
2021-02-07 16:10:59
64
原创 element-ui通过获取table表格prop的数据设置样式
举例：将如下样式改成如果是'继续处理'则为绿色字体，如果是'确认接受‘则为红色字体，operation是tableData数组每个对象的属性，包括'继续处理'和'确认接受'两种可能结果， <el-table-columnprop="operation"label="操作"></el-table-column>答案如下： ...
2021-02-05 15:17:48
3390
原创 设置element-ui表格的单元格高度
可以通过设置.el-table td {padding: 9px 0; // 默认是12px 0}不能通过直接设置height
2021-02-03 14:30:06
2414
1
原创 鼠标悬浮echarts时的提示框显示图中所有信息
如果需要显示所有信息，而不是显示只显示单个柱状图的柱子或者单个折线图的折线的信息，则需要在tooltip对象中补充trigger:"axis",属性，然后再设置formatter，此时formatter:function(params)中的params是所有种的图信息，而不是单种图的信息，如图：formatter函数完整如下：formatter:function(params){return`<bstyle=display:block;margi...
2021-01-28 21:06:46
1735
原创 echart 设置不同柱子之间的间距
需要在series对象最后一个柱状图属性对象中添加如barGap:"30%"，必须在最后一个对象，让所有前面的对象共享该属性设置
2021-01-28 14:45:11
1907
原创 export default { components: { }, }；作用
局部注册组件，引入组件后保证组件大小不是0*0，而是作为页面中的有宽高的普通标签使用
2021-01-28 12:11:34
4681
原创 echarts常见样式汇总
从echarts官网示例拷贝的选项对象往往不能直接使用，因为使用后表现出来也不是官网展示的样式，所以需要给选项对象中添加属性，常见的属性如下：去掉折线上面的小圆点：选项对象中添加属性symbol: “none",自由设置图的大小:grid:{left: 像素值或者百分比,}（top，right，bottom同理）去掉网格线xAxis : [ splitLine:{ show:false }],yAxis : [ splitLine:{ s
2021-01-28 11:36:38
1108
原创 【前端攻略】最全面的水平垂直居中方案与flexbox布局
https://www.cnblogs.com/coco1s/p/4444383.html
2021-01-28 11:10:23
111
1
原创 关于display:flex的继承
设置为display:flex的父元素不会将该属性继承给div子元素，默认div子元素仍然是display:block的，只有再次给子元素设置display:flex，才能继续将子元素设置为flex容器，容纳孙子元素作为容器内的元素，孙子元素才能按照display:flex的布局设置...
2021-01-27 15:28:49
2522
原创 vue出现Failed to mount component: template or render function not defined报错
由于在搭建框架的时候，简单地在引入的vue文件中写了如下代码：<template><divclass="indexstatus-wrapper"><h3>指标概况</h3><divclass="text">INDEXSTATUS</div></div></template><script>exportdefault{ }...
2021-01-27 11:05:39
377
原创 inline和inline-block的区别
inline-block才具有可以设置的高度inline不具有高度，即使设置height和line-height也不会生效
2021-01-22 18:56:29
907
原创 echarts设置图例宽高
itemWidth和itemHeight，而不是width和height，https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-2dbe2cgw.html中的理解应该是组件整体的宽高，而不是每个图例的宽高
2021-01-22 10:38:16
4310
1
原创 关于npm无法下载puppeteer对应的chromium
Linux端需要使用PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true添加在npm install指令之前windows端可以使用git bash模拟Linux命令下策是使用cnpm install，cnpm会自动更换chromium的下载地址，因为chromium的下载被qiang
2021-01-14 12:43:44
1118
原创 前端设计工具figma的基本使用
图片都有png，jpg，svg，pdf格式，svg表示矢量图，在页面放大缩小时不会影响清晰度 图片下载可以作为一组下载，比如矩形中带有一个logo时，单击默认会选中矩形框或者里面的logo，需要在左边栏中选中整个组，包括矩形框zh和logo，进行下载才能下载整个图片，一般后台的api也是如此提供某个位置的图片 常用快捷键，shift+鼠标上下滚轮：鼠标选中下方横条左右移动，即窗口左右移动；ctrl+鼠标上下滚轮：放缩窗口大小 右边栏的inspect栏中显示css代码，当选中页面元素时会显示设计稿中的元
2021-01-14 12:01:55
3449
原创 关于css文字上下左右的横条（竖条）的显示
a标签的下横条一般使用text-decoration:underline;即可上横条和左竖条使用伪元素:before，右竖条使用伪元素:after
2021-01-14 11:21:54
393
原创 关于css子类选择器的用法
不是使用于父类的css样式中，而是使用于子类的css样式中，表示选择父类的子类，如子类共同所属的类为rectangle，子类是很多个div，如果选择奇数个子类（div），需要在.rectangel{}中使用:nth-child(2n+1)或者:nth-child(odd)，可以选择第1，3，5，...个子类（div）...
2021-01-14 10:59:01
2077
原创 由桌面端页面改成移动端响应式页面思路
使用媒体查询设置移动端的样式，添加在css样式中，如@mediascreenand(max-width:500px){ /*添加移动端样式*/}，表示当页面宽度小于等于500px时设置什么样的样式 如果只需要在移动端显示的标签，可以使用display:none;隐藏在pc端的样式，完全不显示 使用box-sizing:border-box; 添加在移动端样式中，并使用padding-left:16px;padding-right:16px;...
2021-01-13 21:37:14
233
原创 vue二维数组的使用举例
<divv-for="(sites,index)insite_list":key="index":class="sites[0].class"><divclass="category"><divclass="category-prefix"><imgsrc=...
2021-01-13 21:08:40
7314
原创 略解chrome自带前端调试工具各栏作用
element栏中高亮一行末尾显示==$0，表示当前选中的为该行标签对应的元素 右侧styles中首个 element.style{ }表示内联样式，调试时可以通过直接在此输入css样式修改元素样式或者在上面的filter中输入关键字搜索对应的具体样式设置 上栏的filter右边有:hov表示将某个元素持续设置为hover时的样式，将显示在主页面中，便于调试在鼠标停留在某元素上方时的样式，一般使用:hover设置，比如a标签的停留时的高亮 styles右边的computed表示.
2021-01-13 16:21:57
109
原创 哈希锚点选择偏移问题（fixed标题栏导致）解决
在需要被选择的div前面添加一个空div，比如class为emptyBox的div，将各个将被选择的div的id赋值给各个emptyBox，一个emptyBox对应一个将被选择的div，并且使用样式position:relative;top:-60px;其中60px是固定标题栏的高度，需要注意emptyBox的高度可以为0，它只是作为锚点选择对象的替代，具有的偏移量可以让修改后的视觉效果看起来和哈希锚点选择没有偏移一样（实际上是偏移了）...
2021-01-13 16:00:27
289
原创 响应式的grid图片多行两列布局
使用grid-template-columns:1fr1fr; 保证有两列图片，img标签的属性设置为width:100%;height:auto;则可以保证图片自适应放大缩小，如果想要让图片在过小宽度时改为一行一列，则可以使用grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );每列最小为100px，即一行的宽度小于200px时将会显示为一行一列...
2021-01-13 15:52:28
1254
原创 为什么div内的img无法水平居中
当div宽度小于img的图片宽度时，无法使img居中，并且img将穿透div父元素边界，或者img的属性设置为position:absolute，将导致img脱离文档流，无法撑开div
2021-01-13 11:23:33
849
原创 修改swiper.js的默认分页器样式
圆点样式源代码使用border-radius:100%实现，可以修改为如4px之类的改成圆角矩形；如图的样式css：<style>.swiper-plugs.swiper-pagination-bullet-active{background-color:rgba(255,255,255,1);width:33px;height:6px;}.swiper-plugs.swiper-pagination-bullet{b...
2021-01-12 16:11:01
847
原创 关于元素高度为0
可能是因为子元素都设置为了float:left之类的浮动样式，导致父元素没有继承再上一层父元素的高度，可以使用display: inline-block;设置父元素的css样式清除浮动的影响，回复到理想的div布局
2021-01-08 11:38:27
136
原创 关于设置div的font-size属性不生效
有些页面可能设置了最小字体，不能直接设置字号，比如chrome的最小字号是12px，如果需要更小就需要使用放缩属性
2021-01-07 10:18:26
2773
原创 如何在同一列显示不同的span
显示两行一列的span中的文字：将第二个span设置为float:left;不能两个都设置float:left;否则只会一行两列
2021-01-05 19:28:26
594
原创 杭电1017
#include <iostream>#include <stdio.h>using namespace std;//0 0是case的结尾// input block有N块 N是input block的块数//第一行是N 一块中可以有很多case 直到0 0表示一个input block结束// input block间有空行//output block有N...
2019-02-10 21:33:45
206
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人