Table-Cell等分

table 里面的元素等分,是经常遇到的需求,一般都会想所有宽度设为相同的应该就等分了,但是然并卵,今天就遇到了这种坑,就算设了宽度一致,还是没有等分,场景是这样的,一个 tr 里面第一个 th 的宽度跟其他不一样,table 宽度为 100%,最后实现等分的方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
table {
width: 100%;
height: 100%;
position: relative;
display: table;
table-layout: fixed;
th,
td {
padding: 10px;
border: solid 1px #d9d9d9;
background-color: #f7f9fa;
text-align: center;
display: table-cell;
width: 2%;
}
}

阅读全文

Linux后台执行脚本

最近在弄自己的 OA 系统,需要把 api 处理脚本部署到 linux 服务器上,在配置好环境,在服务器上成功运行代码后,发现一个问题,当我退出命令窗口时,程序就没在执行了,这没有达到永久可以连接 api 的目的,google 了一下之后,了解到要让程序永久运行,可以让程序在后台执行,主要的方法有 nohub、screen、开机启动等,其中 nohub 在关闭命令窗口之时,会关掉程序,去除,开机启动要修改系统配置,个人不太喜欢用这种方法,剩下 screen 了,它是可以让不同的程序在不同的命令窗口中执行,有屏幕分离的模式,会给每个屏幕创建不同的进程,只要不杀死进程,即使离开当前命令窗口,也不会停止程序的运行,所以使用 screen 是最好的方案了。

阅读全文

拼音学习项目笔记

  1. 关于数据更新机制

    (1)v-if 关闭组件的时候,会销毁数据,可以用于实现返回父组件关闭音频等媒体,如果只是界面的开关的话,用 v-show 即可

    (2)离开子组件后,父组件所传递的数据需要清空,切记不要在网络请求里做清空操作,因为网络请求是有延迟的,一般放在打开子组件的事件里执行清空操作

阅读全文

分页算法

分页是一种比较常见的功能,分页的原理其实也很简单,首先要知道没有需要展示的项目数量 pageSize,然后还得知道当前所在的页数 currentPage, 设所有的 item 都在一个数组 array 里,每页需要展示 5 个 item,那么当 currentPage = 1 时,第一页要展示的所有 item 为 array.slice(0, 4), 第二页要展示的 item 为 array.slice(5, 9), 以此类推,那么第 n(n >= 0) 页需要展示的 item 应该为:array.slice(5n, 5n+4),推而广之,基本数字的分页公式就出来了:

阅读全文

Flex布局最后一行左对齐

用 flex 布局一时爽,一直爽,但是里面还是有些坑需要避一避的。比如说想要有间隔的布局,但是用 space-around 和 space-between 都会有一个瑕疵,那就是,最后一行并不是左对齐的,有人会说用 aligh-content,交叉轴对其啊,但是 jusfy-content 需要 flex-start 才能做到这种效果,这样子的话,就没有居中效果了,因此,只能另辟蹊径。我采用的方法比较笨拙,就是在最后一个块级元素的后面,加多两个空的等宽的块级元素,高度设置为 0,完美实现想要的效果。

阅读全文

Css2下块级元素垂直水平居中

前几天有人问我给定一个这样的结构:div => div,如何让里面的元素水平垂直居中?给出 css2 代码。这对于一直用 css3 布局方式的我来说,一时还有点蒙蔽,只知道左右居中一般用 margin:0 auto,至于垂直居中,还真没用 css2 实现过。于是动手实践,发现以下的方式而已完美达到想要的效果。

阅读全文

Centos7 安装 MySQL

系统环境

1
centOS7 64位

阅读全文

一键生成响应式表格

这是一个一键生成响应式表格的方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
table {
width: 100%;
border-collapse: collapse;
text-align: center;
line-height: 40px;
table-layout: fixed;
color: #333;
font-weight: normal;
font-size: 14px;
margin: 5% 0;
td{
padding: 10px;
}
thead {
background-color: #cce5ff;
font-weight: 500;
}
}

table-bordered {
border: 1px solid #e0e0e0;
}

.table-bordered {
th {
background: #e4efff;
border: 1px solid #e0e0e0;
font-weight: normal;
height: auto;
}
td {
background: #e4efff;
border: 1px solid #e0e0e0;
font-weight: normal;
height: auto;
}
thead {
th {
border-bottom: 1px;
font-weight: 500;
height: auto;
}
td {
border-bottom: 1px;
font-weight: 500;
height: auto;
}
}
}

阅读全文

网页或Html元素在浏览器上全屏解决方案

  1. 全屏是什么

    个人理解,全屏指的是去掉浏览器的导航栏,浏览器的全部空间被页面所占有,网页即 html 文档,网页全屏即 dom 全屏

  2. 不同的浏览器又不同的全屏事件可以调用,但是不同浏览器的全屏事件并不一致,因为还没被写入规范中,所以需要判断在特定的浏览器下,哪个事件可以用,以下是全屏事件的封装:

阅读全文

Key值在vue组件中的作用

  1. key 值在 vue 组件中的作用:

    高效利用 dom

  2. 分析:

阅读全文