手机上网站导航的制作

为了让Web页面在手机上显示流畅,现在国外很多网站都使用Responsive设计和CSS3 Media Queries的结合来实现。这样的实例到处可见,那么今天我想和大家一起学习的是有关于这种方法实现手机布局中的导航制作。

如果你的导航选项比较多,放到手机上来浏览就会挤到一起,造成美观性的不足。下面为了解决这样的问题,我们就一起跟随Nick La写的教程《Mobile Navigation Design & Tutorial》学习如何使用jQuery来解决刚才所说的问题。

修复iPhone上submit按钮bug

自从完成上次iPhone的几个页面效果后,一直在没有制作iPhone的页面效果了,今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子:

初载入页面后,表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子:

奇怪的是你点击以后就会正常:

对比一下,你也会觉得怪,怪都算了,还不知道如何下手:

@font-face制作Web Icon

@font-faceCSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上,不过这样一来很多人担心影响性能问题。鱼和熊掌不能兼得嘛,我们就不在为这个问题说太多的话了,不过我今天要与大家分享的主题和这个@font-face还是有很在关系的,使用他配合一定的字体来制作Web页面中的Icon图标。初一看有点不实际,以前的Icon都是依靠图片来完成,怎么可能用字体就能实现呢?如果你以前有用过HTML的实体符,我想就不会那么惊奇了。

CSS3 Media Queries模板

最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。随着Responsive的响应式设计的兴起,前面跟大家一起学习了:

Pure CSS3 Ribbons

前面在CSS3 Ribbons一文中介绍了一个纯CSS3制作的“Ribbons”效果,今天收集了更多的“Ribbons”效果,以供大家参考与学习,希望大家能喜欢。

在看具体每个demo之前,我们一起来看下面一个截图:

jQuery Timeline

TimelineVeriteCo写的一个jQuery插件。它将一连串的事件集合到一起,按时间轴的顺序展示这些发生的事件。你可以将各种媒体、图片、视频、地图等相关信息插入到timeline。结合设计可以完美的展示你的工作效率或者更强的信息。比如说你一年,或者多年下来人生中的大事等。

CSS3制作表单动态帮助信息

前几天在W3cplus Demo站上放了一个CSS3 Sliding Form Helps效果。

今天我们就一起来看看他是如何实现的。

CSS3制作菜单的Hover效果

最近一直在整理W3cplus Demo站点,收集和写了一些CSS3的Demo效果。今天整理了一下写的《How to spice up your menu with CSS3》效果,整理一下与大家一起学习。

CSS的陷阱

我们写CSS的在写CSS总会碰到一些这样那样的问题,为了应付这些问题,我们需要一些特殊的技巧才能解决。今天这篇文章我收集了几个怪异的问题,放上来给大家分享,希望大家以后碰到这样的问题能得心应手的解决。

Select最佳设置

昨天在携程UED中看到一篇关于表单元素中的Select的设置的文章,写的很有意思,详细的不多说,截了里面的一张图来说明Select的在各浏览器的测试情况:

最终得到select的最佳设置的值:

CSS3制作iPhone的Checkbox

iPhone上的UI的确是精致,让人爱不释手。今天用CSS3写了一个Checkbox的效果,采用了两种不同的方法来实现,另外在此基础上写了一个我们常用的checkbox的效果。

众所周知,想要美化表单中的元件,都少不了jQuery的帮忙,有关于这方面的介绍,本站也有过几篇相关的文章,比如说《美化表单——自定义单选按钮和复选按钮》、《自定义表单——JQuery制作个性化Checkbox》和《美化表单——自定义Checkbox和Radio样式》。那么有没有办法不使用jQuery呢?就是大家所说的纯CSS?如果你看了这篇文章后,你就会说,原来也可以实现呀。

页面

返回顶部