欢迎光临
我们一直在努力

解决部分浏览器不支持space-evenly兼容性问题

ziyoukeji阅读(13)

本篇文章讲解一下部分浏览器在flex布局中justify-content不支持space-evenly的兼容性问题

解决方案我们用space-between 代替

//原始样式,只写关键其他样式不写了
.flexbox{
     justify-content: space-evenly;
}

改成如下样式
.flexbox{
     justify-content: space-between;
}
.flexbox::after, .flexbox::before { 
     content: ""; 
     display: block; 
}

解决百度浏览器fixed定位不显示的问题

ziyoukeji阅读(16)

本篇文章讲解一下H5页面在百度浏览器中fixed定位  不显示的问题

不显示的原因主要是百度浏览的广告屏蔽机制导致到。以下我整理出来的一些思路,能不能解决还需要看个人的页面代码情况

思路一:fixed渲染的窗体不要添加width:100%  如果做遮罩可以有考虑left、top  right  bottom全设置成0

思路二: 不用给有position的设置高度  在里面套一个div  用里面的高度撑起来

思路三:  上面都处理了还不行  .可以考虑body上加height:100%

Secure Nginx with Certbot Let’s Encrypt on CentOS 7

lizhihong阅读(57)

1. 登录Centos服务器

    Nginx中已经配置好三个域名
    ***.cn
    www.***.cn
    a.***.cn

2. Install snapd

    $ sudo yum install epel-release
    $ sudo yum install snapd
    $ sudo systemctl enable --now snapd.socket
    $ sudo ln -s /var/lib/snapd/snap /snap

3. Ensure that your version of snapd is up to date

    $ sudo snap install core
    $ sudo snap refresh core

4. Remove certbot-auto and any Certbot OS packages

    $ sudo yum remove certbot

5. Install Certbot

    $ sudo snap install --classic certbot

6. Prepare the Certbot command

    $ sudo ln -s /snap/bin/certbot /usr/bin/certbot

7. Choose how you’d like to run Certbot

    $ sudo certbot --nginx -d ***.cn,www.***.cn,a.***.cn
    ##增加域名
    $ sudo certbot --expand -d ***.cn,www.***.cn,a.***.cn,b.***.cn

8. Test automatic renewal

    $ sudo certbot renew --dry-run

 

在Linux中使用USB作为安全密钥

lizhihong阅读(53)

1. 使用命令查询vendor ID and device ID

$ lsusb

2. As root, create a new file named 80-usb.rules in /etc/udev/rules.d/ directory and paste these lines –

ACTION=="add", SUBSYSTEMS=="usb", ATTR{idVendor}=="<vendor-id>", ATTR{idProduct}=="<device-id>", RUN+="/usr/local/bin/usb-lock.sh unlock"
ACTION=="remove", SUBSYSTEMS=="usb", ENV{ID_VENDOR_ID}=="<vendor-id>", ENV{ID_MODEL_ID}=="<device-id>", RUN+="/usr/local/bin/usb-lock.sh lock"

3. Create the usb-lock.sh file in /usr/local/bin/ directory, and paste this –

#!/bin/bash
session=$(loginctl|grep '<username>'|awk '{print $1;}')
if [ ${1} == "lock" ]
then
loginctl lock-session ${session}
elif [ ${1} == "unlock" ]
then
loginctl unlock-session ${session}
fi

4. Replace <username> in 2nd line with your username.

chmod +x /usr/local/bin/usb-lock.sh
sudo udevadm control --reload

h5页面解决ios中safari浏览器伪元素hover点击两次的问题

ziyoukeji阅读(45)

本篇文章记录一下h5页面在ios中safari浏览器伪元素hover点击两次的问题

我遇到的问题是了父元素中有个hove样式  子元素有checkbox控件,  在ios上总是需要点击两次,   第一次触发hove事件  第二次才触发checkbox的click事件

解决方案:

我是用 fastclick.js 解决的

https://blog-static.cnblogs.com/files/sjns/fastclick.js

 

github 地址 : https://github.com/ftlabs/fastclick

C#写csv文件 使用Excel打开 中文乱码

ziyoukeji阅读(83)

本篇文章记录一下C#创建csv文件后,用Excel打开是乱码的问题

FileStream fs1 = new FileStream($"D://统计.csv", FileMode.OpenOrCreate, FileAccess.Write);//创建写入文件 
StreamWriter sw = new StreamWriter(fs1,Encoding.UTF8);
sw.Write("第一列,第二列");
sw.Close();
fs1.Close();

h5移动端line-height字体偏上问题

ziyoukeji阅读(80)

本篇文章记录一下在h5开发时用line-height导致字体偏上的问题,尤其是安卓手机.

解决这个问题我总共有4个方案.

代码

<a target="_blank" href="/aaa.html" class="btn">这是按钮</a>

这里的整理两个效果明显的方案

方案一:用flex布局

display: inline-flex; 
justify-content: center;
align-items: center;

 

方案二: display: table-cell; 布局

<a target="_blank" href="/aaa.html" class="btn">
<span style="  display: table-cell;  vertical-align: middle; height: inherit;">这是按钮</span>
</a>

 

js设置光标始终在文本最后

ziyoukeji阅读(72)

本篇文章记录一下 div利用contenteditable=”true”模拟输入框时, 获取焦点时光标定位在文本的首位,这里我们需要把光标挪移到最后

此方法的参数就是模拟输入框的div 不过这里的传入的 jquery 对象

function setFocus(el) {
    el = el[0]; // jquery 对象转dom对象  
    el.focus();
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    //判断光标位置,如不需要可删除
    if(sel.anchorOffset!=0){
        return;
    };
    sel.removeAllRanges();
    sel.addRange(range);
};

 

ie中sort提示语法错误, ie中无效的解决方案

ziyoukeji阅读(87)

本篇文章记得一下sort在ie中提示语法错误, 在ie中无效的解决方案

兼容性比较好的写法如下

var shuzu=[5,9,2,3,1,6];


//倒序
shuzu= shuzu.sort(function (a, b) { return b - a });
console.log(shuzu);

//正序
shuzu= shuzu.sort(function (a, b) { return a - b });
console.log(shuzu);

 

 

css布局上下高度固定中间自适应,且内容超出高度时出现滚轴

ziyoukeji阅读(88)

本篇文章记得一下css 布局上下固定高度  中间自适应高度   且内容 超出高度时出现滚轴

这里用的flex布局的方案实现布局

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>css flex 上下固定中间自适应例子</title>
  <style>
    body {padding: 0;margin: 0;}
    #boxs {
      width: 90%;
      height: 300px;
      border: 1px solid #333;
      display: flex;
      flex-direction: column
    }
    .dheight {
      height: 50px;
      min-height: 50px;
    }
    .center {
      flex: 1;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div id="boxs">
    <div class="dheight" style="background-color:#ffc5c5;">上边固定宽度</div>
    <div class="center" style="background-color:#b9f;">
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
    </div>
    <div class="dheight" style="background-color:#7171f7;">下边固定宽度</div>
  </div>
</body>
</html>

自由技术,自由自在

项目合作联系我们