5月
24
仅仅看表象,以为是 js 实现的效果,却是 css 实现的。这里有一个例子,利用 radio 的单选特性,实现单选效果。
步骤
- 创建 input标签,邻居创建 span标签。
- 父容器相对定位,input绝对定位,left,top为0,opacity为0。看不见看不见。
- 利用 + ,~ 处理邻居 div。
- 利用 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
- VMware软件安装与配置,网络连接模式,NAT、桥接、OnlyHost
-
宿主机、虚拟机、客户机异同,虚拟机完全克隆、虚拟机链接克隆
-
mac地址修改,虚拟网卡设置,虚拟网络编辑器,虚拟机移除
二、CentOS
-
Linux系统简介,CentOS,Ubuntu,Windows
-
CentOS下载、安装与配置
5月
02
5月
02
使用服务器的小伙伴,为了增强服务器的安全性,禁用root用户使用ssh方式登录服务器就很有必要了。这里,拿自己的centos7.4系统的服务器做小白鼠,一步一步记录操作的过程。
操作过程
- 创建新用户
useradd ecs-user
- 如果需要的话,可以设置密码(先不设置)
passwd ecs-user
4月
12
4月
05
下载:https://nodejs.org/en/download/
cd usr/local/src
wget https://nodejs.org/dist/v8.11.1/node-v8.11.1-linux-x64.tar.xz
xz -d node-v8.11.1-linux-x64.tar.xz # 这样才有 .tar文件
tar -xvf node-v8.11.1-linux-x64.tar
mv node-v8.11.1-linux-x64 /alidata/service/nodejs
# 环境变量添加
vim /etc/profile
export NODE_HOME=/alidata/service/nodejs
export PATH=$PATH:$NODE_HOME/bin
export NODE_PATH=$PATH:$NODE_HOME/lib/node_modules
source /etc/profile
4月
04
linux在安装一些服务的时候,可能安装了 git,不过那 git 的版本太旧了。所以想安装个最新的。
卸载以前旧的版本
rpm -q git
# git-1.8.3.1-12.el7_4.x86_64
rpm -e --nodeps git-1.8.3.1-12.el7_4.x86_64
下载安装 git
git 官网:https://git-scm.com/ , 当前最新版本是 2.9.5
cd /usr/local/src/
wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.9.5.tar.gz
tar -xzvf git-2.9.5.tar.gz
cd git-2.9.5
./configure prefix=/usr/bin/git/ # 配置,设置安装目录
make && make install
4月
04
检查安装 Libevent
Memcached 的安装依赖 Libevent。所以,先检查系统是否安装了 Libevent。还有安装版本是否落后。
rpm -q libevent //检查是否安装了 libevent
# libevent-2.0.21-4.el7.x86_64
这里已经安装了,不过看了下 libevent 官网,目前最新版本是 2.1.8 先卸载旧的安装个新的。
libevent 官网: http://libevent.org/
安装 memcached 服务,再安装 php memcached扩展。