默认分类
只是一个默认分类

CSS实验:搜索框

前端学习就要多实践,这个周末在改自己博客,准备自己做个主题,关于搜索框我看中文教程不多,找到了一篇不错的英文教程,在这个基础上对代码和描述都有改动。原文在此

一、 Background Fade

首先完成最基础的搜索框的html骨架

<div class="box">
  <div class="container-1">
      &lt;span class="icon"><i class="fa fa-search"></i></span>
      &lt;input type="search" id="search" placeholder="Search..." />
  &lt;/div>
&lt;/div>

可以看出我们把搜索框分为四个部分,最外层的container-1用来确定搜索框在整个页面的位置和搜索框的大小,icon和search实现搜索框内部样式。

第一步为container-1添加样式,由于只是演示搜索框,所以我们只简单加上宽高就可以了。

.container-1{
    margin: 100px auto;
    width: 300px;
    height: 50px;
}

第二步我们为input添加基本样式

.container-1 input{
    width: 300px;
    height: 50px;
    background: #2b303b;
    border: none;
    color: #63717f;
    padding-left: 45px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
   }

第三步为icon添加样式
其中line-height: 50px;为了使图标居中(这个属性设置的居中岁字体大小变化是有一点偏差的,居中只是一般我们看不出偏差)

.container-1 .icon{
    box-sizing: border-box;
    position: absolute;
    line-height: 50px;
    margin-left: 15px;
    color: #4f5b66;
}

到现在整个搜索框已经基本完成了,只是看起来还是还不是很炫,接下来我们再加点特效~

第四步通过伪元素:hover:focus实现鼠标经过和获得焦点是背景变化

.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
    outline:none;
    background: #ffffff;
}

第五步之前的变化瞬间完成比较生硬,最后在加上过渡效果。
在input元素上加入

-webkit-transition: background .55s ease;
-moz-transition: background .55s ease;
-ms-transition: background .55s ease;
-o-transition: background .55s ease;
transition: background .55s ease;

注意,需要要在发生变化的元素上添加,而不是在:hover:focus,可以这样理解:hover:focus存放的是结果,他告诉transtion
我要变成什么样负责触发过渡,而transtion则负责控制过渡的细节,比如时间和速度。

如果我们把上面第五步中的background其他属性那又是一种特效,比如我们想让鼠标悬停时搜索框自动伸长,那就换成width,当然:hover和原始宽度也要发生相应改变。

.container-1 input#search:focus, .container-1 input#search:active,.container-1:hover input#search{
    width: 300px;
}
.container-1:hover .icon{
    color: #93a2ad;
}

最后把input的宽度改成50px,看下效果是不是更炫了~

药不能停,继续加特效。

既然我们的图标是个放大镜,哪我们给这个图标再加个放大效果,用户体验会更好。
我们给.icon加入过渡控制:

-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;

再给.container-1:hover .icon加入过渡后的结果:

-webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
    transform:scale(1.5);

看看效果吧

关于base64

之前做雪碧图,还记得就是为了减少http请求,哪你有没有脑洞过,如果不要请求直接把图片编码成字符串嵌入在html中,那不就更省事了吗,所以就有了题目中的base64编码。

先看完优点,在看她的缺点,这样我们才能正确选择使用它的场合,base64既然把图片变成了字符串,所以比一般比原文件大一些,而且在css里写的可是编码啊,要是一个大图代码量也太大了吧,所以这就决定了base64一般只用在像小图标这种指甲盖大小的图片上。

图片怎么转换成base64?
很简单,用你的chrom浏览器就够了,在source里查看你的图片,显示的就是base64编码了。另外用gzip还能对编码进行进一步的压缩。

怎么引入到css/html中?

background: url(data:image/gif;base64,图片编码) no-repeat center;

<img src="data:image/gif;base64,图片编码">

关于linux

最近在弄vps,学来了一写命令

作为前端,你的开发环境要逐渐从windows逐渐过渡到linux,为啥,因为你是程序员啊。
而这个过渡,最好的选择是用Cmder,这个东西比黑洞洞的windows的cmd好用百倍,而且自带了很多linux命令。我相信你之前应该没怎么用过windows的cmd命令,所以你就用它开始你的命令行之旅。比起龟速虚拟机,或者安装双系统,而且最后要面对黑洞洞的linux...而且,用linux网也不会连你是得有多大毅力,所以一步一步来,一天学一个命令。

wget 下载文件
rm 删除 -rf(全部删除且无提示,没有后悔药哦)
cd 切换目录
ls ll 列出目录文件
ssh 链接服务器
mkdir 创建文件夹
find 查找
cp 复制
mv 移动
vi 编辑器(按i进入,esc结束编辑,:wq保存并退出)

关于页面

关于页面的一些东西一直没有弄清楚,今天来个大扫除。

1.目录式的跳转
换一个高大上的叫法是锚点跳转。
实现锚点跳转有两种方式,一种是a标签和name属性,还有一种就是使用标签的id属性。百度百科就是使用的a标签的name属性实现锚点跳转的。
例如:
但是总感觉有点不搭调啊,“#”在css里不就是id选择器吗,所以我还是喜欢id属性实现跳转。

一些问题:如果我们页面有个固定的header,如果跳转位置正好是窗口顶端,那不就被header挡住了吗,怎么让a标签被点击时跳转的锚点的位置往下偏移一点哪,挺简单,加上下面样式就好了。
.target{

padding-top: 50px;
margin-top: -50px;

}

2.监听页面滚动
都监听了,肯定要用到js了,上面说了单击一个标签跳转到指定位置,那如果反过来,当我们滚动到指定位置就出发一些效果怎么实现?这种应用其实不少,比如滚动到底部自动加载或者淘宝商品详情
jQuery提供了一个监听页面滚动的函数:.scroll(),我们一般都是监听整个页面的滚动 $(window.document).scroll(function (){});
计算到顶部或底部距离的函数$(selector).scrollTop();$(selector).scrollLefft();
有了这两个函数我们就能设完成各种页面滚动效果了。

我们扩展一下,当跳转的不是标签,变成网页目录,那我们如何实现,这就提到了单页web,和多页web,多页自然是在有文件目录来跳转,但是作为前端我们有强大的js可以控制页面的生成,遵循前后端分离的观念,还是把页面都交给前端来控制的好,另外单页应用不用刷新,这对关注用户体验的前端来讲很重要,也帮助后端减少了服务器压力。但是单页应用也肯定存在的一些缺点,比如SEO、前进后退等问题,但是相信随着时代的发展未来一定会有所改变的。

那又要问了,单页如何跳转哪,这就需要一些强大的js框架了,比如交给Angular的路由模块来管理。

关于vps

这个站目前是放在阿里云虚拟主机上运行的,虚拟主机说是方便,但是只能跑php,而且要是国内的话备案还要花不少功夫。所以一直有换成vps的打算,而且最近一直在用的ss越来越慢了,终于下决心还是自己租个vps,自己搭建ss,毕竟自己的就是放心,还能强迫自己学习Linux。租个vps要是只用来科学上网,那就太浪费了,作为原生前端当然不能满足于现在的php博客系统,node才是真爱。
所以,开始进阶学习Linux和node。我立志不让我的vps白租,一定要花完所有流量!
给大家分享一下我是如何搭建ss的吧。
如果你是windows用户,首先安装ssh命令,其是很多教程里用putty这个工具,但是据说这个中文版还存在后门,所以两种选择安装ssh或者使用putty英文版。
链接到服务器后,我用的是一键安装包,注意一行一行的执行哦

wget --no-check-certificate https://raw.githubusercontent.com/teddysun/shadowsocks_install/master/shadowsocks-go.sh
chmod +x shadowsocks-go.sh
./shadowsocks-go.sh 2>&1 | tee shadowsocks-go.log

这个是来自秋水溢冰,具体可以去看他的博客,此外还用其他版本的ss供你选择。

另外还可以安装锐速对你的vps加速,在执行下代码过程之前还要先去官网注册一个账号。

wget http://my.serverspeeder.com/d/ls/serverSpeederInstaller.tar.gz
tar xzvf serverSpeederInstaller.tar.gz
bash serverSpeederInstaller.sh 

然后一路回车,是否全选是,就安装完成了。
很简单吧~