十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用,觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家能喜欢。 在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考: HTML Markup

表单button的outline问题

outline的使用,大家都喜欢在reset样式表中直接重置: * { outline: none; } Eric Meyers在他的CSS Reset是这样重置的:

表单button的text-indent问题

昨天在《表单button的行高问题》一文中简单的描述了一下表单中的“button”(包括input[type="submit"]/input[type="reset"]/button)行高在Firefox和Opera中不以按设置值解析。今天我想和大家一起来说表单中“button”的“text-indent”属性在IE中的bug。首先我们来看一个实例:HTML Markup <input type=”submit” value=”Submit” id=”btn” /> CSS Code

表单button的行高问题

昨天下午为之给我发了一个有关于buttonline-height问题的文章——《The Firefox Input Button Line-Height Bug》。看后明白了许多,顺便整理了一下,与大家一起知道这个问题。下面我们先来看一个Demo的实例:HTML Code <input type="submit" id="button" value="engage"/> CSS Code

Responsive设计的关键三步

最近一直在学习这个Responsive设计相关知识点,前面我在本站陆续发布了与“Responsive”设计的相关伟德1946网页版:

CSS3制作 Progress Bars

Progress Bar直译过来就是“进度条”,也就是说今天要和大家一起探讨进度条的作方法。我想进度条大家都有看到过,而且还随处可见,他们表示的是某个过程,显示目前完成状态。最常见的是文件的上传和下载,有一个动态的进度条,通过这个进度可的动态变化告诉我们文件上传或下载的完成程度。换而言之,无论在某一个点或一个桌面程序,或者说我们的Web应用程序或,我们都需要使用到进度条的UI制作。那么在这篇文章中,我和大家一起来学习如何使用CSS3的相关属性来创建一个时尚的、动态的进度条,而且还将扩展一部分jQuery代码,让其从0至100%动态完成。我们首先来看一看下面的DEMO效果:下面我们针对上面的DEMO来说说其制作过程。

CSS选择器的优化

前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器CSS属性选择器以及CSS伪类选择器。那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化。因为对性能这一块一直都是很弱的,所以今天先从选择器开始入手,加强自己。如果你也感兴趣那就跟我一起来吧。

了解Responsive网页设计的三个特性

CSS3制作共享工具栏

今天使用CSS3的伪类“:before”和":after"animation等相关属性创建一个简单的共享工具提示栏效果。关键的一点是,我使用最少的HTML标签,以及不使用任何jQuery和javaScript脚本。但兼容性就惨了,这个大家都懂的。所以下面的效果只适合Firefox、Safari、Chrome和Opera浏览器。不过这种效果大家在平时制作中肯定常常使用到。那下面我们一起来看如何制作吧。

目标

使用纯CSS代码实现下面的DEMO效果:

Responsive设计和CSS3 Media Queries的结合

Responsive这个词,这段时间公司老是在提,致使我大量的查找相关方面的资料学习。总算是能做出小小的东西出来,也让自己有点满足感。今天我想和大家一起来学习web designer wall的《Responsive Design with CSS3 Media Queries》伟德1946网页版。从这篇伟德1946网页版中,我们可以学会如休何使用CSS3的Media Queries属性来实现Responsive设计。

页面

返回顶部