Write the Code. Change the World.

5月 24

仅仅看表象,以为是 js 实现的效果,却是 css 实现的。这里有一个例子,利用 radio 的单选特性,实现单选效果。

步骤

  1. 创建 input标签,邻居创建 span标签。
  2. 父容器相对定位,input绝对定位,left,top为0,opacity为0。看不见看不见。
  3. 利用 + ,~ 处理邻居 div。
  4. 利用 checked 实现变化。

让 input 透明掉,其实就是让你去美化 span,不再需要 radio 那难看的容颜。是不是有点不道德啊。

请看 code:

<div class="box">

  <div class="tags-select">
    <label class="tag-select">
        <input type="radio" name="bye-type" value="1" checked>
        <span class="name">官方标配</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="2">
        <span class="name">官方标配 + 蓝牙耳机</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="3" disabled>
        <span class="name">官方标配 + 充电宝</span>
    </label>
  </div>

</div>

<!-- 利用radio唯一性,实现了不用js也能实现的效果。右边是 scss -->

.tags-select{
  font-size: 0;

  > .tag-select{
      position:relative;
      display:inline-block;
      font-size: 14px;
      margin: 5px;
      color: #fff;


     .name{
         display: block;
         line-height: 20px;
         padding: 8px 10px;
         border-radius: 5px;
         background-color: #FE7D91;
         cursor:pointer;
     }

     .name:hover{
         background-color: #FE3591;
     }

     input[type="radio"]{
         position:absolute;
         z-index: -1;
         opacity: 0;

         //选中
         &:checked +.name{
             background-color: #FE3591;
         }

         //禁用
         &:disabled +.name{
           background: #eee;
           color: #999;
           cursor: not-allowed;
         }
     }
  }
}

.box{
    display:flex;
    width:100%;
    height:100px;
    justify-content:center;
    align-items:center;
}

记得,上边使用了 scss。

效果

https://jsfiddle.net/vini123/ad30qpyb/

5月 24

在传统 div 排版中。padding竟会占用父容器的宽高,这个很影响心情和需要。

比如下边这个布局:

.group{
   margin:20px;
}

.item{
    display:inline-block;
    width:250px;
    height:40px;
    line-height:40px;
    background-color:#FE7D91;
    color:#fff;
    border-radius:3px;
 }

.item label{
    float:left;
    width:35%;
    text-align:right;
    font-size:16px;
  }

.item label ~div{
    float:left;
    width:65%;
    font-size: 14px;
  }

<div class="group">
  <div class="item"> 
    <label>神奇</label>
    <div>动物在哪里</div>
  </div>
</div>

使用 box-sizing,容器宽度都不会被撑开。

还有一种方法,就是使用 flex 布局。

完整的demo:https://jsfiddle.net/vini123/kbecxju7/1/

参考

http://www.w3cplus.com/content/css3-box-sizing

5月 17

随着互联网的普及,人们的上网行为每天都产生着海量的数据,这些数据蕴含着巨大的价值,清楚的刻画着社会的方方面面,现如今,数据已经成为一种商业资本,一项经济投入,政府和企业都在研究如何从海量数据中获得新的认知、新的方法和创造新的价值,这就促进了大数据的发展,企业用大数据技术往往运行在Linux环境下,大数据工程师需要掌握一定的Linux技术,以下是老男孩教育归纳的大数据工程师需要掌握的Linux技术

一、VMware Workstation

  1. VMware软件安装与配置,网络连接模式,NAT、桥接、OnlyHost
  2. 宿主机、虚拟机、客户机异同,虚拟机完全克隆、虚拟机链接克隆

  3. mac地址修改,虚拟网卡设置,虚拟网络编辑器,虚拟机移除

二、CentOS

  1. Linux系统简介,CentOS,Ubuntu,Windows

  2. CentOS下载、安装与配置
    继续阅读

5月 02

linux 执行定时任务的软件很多。如cron、anacron、at和batch,其中cron和anacron用来定期重复执行指令,At和batch则用来在特定时间执行一次性的指令。这里使用 cron来操作定时任务。

假如我们想每个月更新一下yum包。就可以刚好用到 cron 。

https://blog.csdn.net/chichuduxing/article/details/68491023
https://www.cnblogs.com/shuaiqing/p/7742382.html
https://blog.csdn.net/ggxiaobai/article/details/53505195
https://blog.csdn.net/u010170644/article/details/53408231
继续阅读

5月 02

使用服务器的小伙伴,为了增强服务器的安全性,禁用root用户使用ssh方式登录服务器就很有必要了。这里,拿自己的centos7.4系统的服务器做小白鼠,一步一步记录操作的过程。

操作过程

  1. 创建新用户
useradd ecs-user
  1. 如果需要的话,可以设置密码(先不设置)
passwd ecs-user

继续阅读