LMLPHP后院

前端技术之导航栏浮动最佳实践技术

maybe yes 发表于 2015-05-29 00:28

关于网页的导航菜单,特别是后台,最古老的做法就是使用 FrameSet。到现在 FrameSet 的这种做法已经过时,并且会带来很多安全问题。于是很多网站在前台都使用浮动的方式来解决这个问题,当页面向上滚动时,到了一定的位置,DIV 导航栏会固定住,这样用户在页面任何位置都能看到重要的导航区域。另外有一种做法用户体验也比较好,比如在腾讯网,当用户稍微向上滚动的时候会出现横向的导航栏,向下滚动导航栏不会出现,这样用户也能很方便的找到导航栏,只是很多人不知道,或者不习惯这样的方式。

我开始在做 LMLPHP 官方网站的文档的时候,也遇到了这样的问题,如何用更好的方式来展示左侧菜单导航区域。LMLPHP 官方文档的做法是计算导航左侧和右侧主体内容的高度,结合浏览器窗口可见区域 viewport 的高度,最后得出左侧 DIV 的最佳高度,采用悬停展示滚动条(如果菜单被展开,高度超出范围)的方式和页面向下滚动固定左侧导航的方式来提升用户体验。这样的做法还算能够接受,唯一的不好就是会鼠标悬停时会出现滚动条,并且高度计算很难做到合适,兼容性比较麻烦,为了兼容大部分浏览器也是花费了很大的精力,偶尔会发现导航消失的问题。

VirtualBox 虚拟机 Ubuntu 磁盘扩容技术

maybe yes 发表于 2015-05-21 01:20

本文将讲解在 Mac OS X 下如何为 VirtualBox 虚拟机系统 Ubuntu 扩大磁盘容量。

我第一次使用 VirtualBox 装虚拟机的时候,由于分区的时候没有注意,主分区才给了 4 个 G,导致后面越来越麻烦,软件都没法装了,最后还是删除掉重装了个系统。分区的时候需要特别留意,主分区最好要给到足够多的空间,最好是 40G 左右,虽然知道有办法可以解决这个问题,但是会很麻烦。后期如果在使用过程中,空间不够了,可以再次创建存储然后挂载到系统其他目录上。

在 VirtualBox 的菜单栏中,设置->存储->控制器:SATA 处点击添加,此操作要求虚拟机为关机状态才可以添加,如下图所示。

VirtualBox增加Ubuntu存储-LMLPHP后院

HTML5 表单新属性 pattern 的使用技术

maybe yes 发表于 2015-05-13 23:01

HTML5 的表单属性增加了很多功能,如 placeholder,pattern,multiple,autocomplete,autofocus,list,novalidate, required 等。这些新属性让网站的开发更加方面和简单。但是现实总是残酷的,若是要开发出真正用户体验非常好的网站,这些自带功能往往都是排不上用场的。

前段时间在一个网站上提交表单时 input 输入框提示 “请与所请求的格式保持一致。”,这样的提示让我不知怎么回事。于是审查元素查看到输入框的属性中含有 pattern,由于是一个邮箱字段,pattern 写的过于严格,导致不能通过校验。这样的提示对于一般的用户来说,是不会明白怎么回事的。

HTML5 pattern effects on chrome-LMLPHP后院
HTML5 pattern effects on firefox-LMLPHP后院

使用 CSS 3 transition 实现动画效果技术

maybe yes 发表于 2015-05-12 23:52

使用 CSS3 的新特性 transition 可以很方便的实现像 JQuery 的 animate 方法一样的动画效果,但是有点遗憾的是,transition 只支持一个属性,重复定义后面的属性会覆盖前面的属性。

transition 有四个参数,分别是 transition-property(规定设置过渡效果的 CSS 属性的名称),transition-duration(规定完成过渡效果需要多少秒或毫秒),transition-timing-function(规定速度效果的速度曲线),transition-delay(开始过滤效果的延迟时间)

请看下面的例子,下面的例子中,红色的区域鼠标悬停后的动画效果是完全 CSS 实现的,鼠标悬停延迟一秒才开始运动,请使用鼠标悬停查看完整的粉红区域内的完整内容。

命令行模式下快速移动光标快捷键技术

maybe yes 发表于 2015-05-11 22:30

如何在命令行模式下快速移动光标。?

移动到命令行文本最前面,使用 Ctrl + a。

移动到命令行文本最后面,使用 Ctrl + e。

如何在命令行模式下快速清空当前文本字符。?

删除当前光标位置前面所有命令行文本,使用 Ctrl + u。

删除当前光标位置后面所有命令行文本,使用 Ctrl + k。

在 Linux 下开发时,加上 GIT 不同分支的频繁切换,发现所有的 IDE 都不好用了,只有使用 VIM 作为首选编辑器。开发过程中,熟悉上面的一些快捷键技巧,可以帮助提高工作效率。

2024-03-29 14:40:05 1711694405 0.006551