在《Web布局连载——两栏固定布局(一)》中,使用了两种不同的结构,配合不同的CSS浮动方法,实两了两种最为常见和最基础的两栏固定布局效果:侧栏在左边,主内容在右边(demo1,demo3),主内容在左边,侧栏在右边(demo2,
CSS布局是一个很老的话题了,网上这方面的教程可以说是随处可见,本站前面也有一些相关的布局教程,但都是一些特殊的,比如说《等高布局》、《左定宽度右边自适应的等高布局》、《960网格布局》、《固定footer布局》和《中间固定两边自适应布局》等等。
前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果。那么今天在这篇文章中我们一起来体会一下“appearance”的使用。
前段时间在《@font-face制作Web Icon》一文收集了三种webfont通过CSS3的@font-face来制作Icon图标。现在在网上最为流行的是@robmadole和@supercodepoet两位大师制作的Font Awesome:
有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果,不过留下了一上问题,就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。
大家首先来看一个DEMO:
CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目,为了实现iPhone和iPad横板与竖板的风格,让我还是头疼了一翻。
一开始按照CSS3 Media Queries模板中的介绍来运用,虽然帮我解决了iPad的横板与竖板的风格渲染问题,但在iPhone4上还是存在问题的。后来结过网上的查找,总算是问题解决了,下面就来看看问题是如何解决的。
在具体开始之前,先来看看他的源码:
为了让Web页面在手机上显示流畅,现在国外很多网站都使用Responsive设计和CSS3 Media Queries的结合来实现。这样的实例到处可见,那么今天我想和大家一起学习的是有关于这种方法实现手机布局中的导航制作。
如果你的导航选项比较多,放到手机上来浏览就会挤到一起,造成美观性的不足。下面为了解决这样的问题,我们就一起跟随Nick La写的教程《Mobile Navigation Design & Tutorial》学习如何使用jQuery来解决刚才所说的问题。