现代 CSS

HTML

CSS布局——960gs

说起CSS的布局,有太多了,现在常见的有固定布局流体布局弹性布局,有关于这三种常见的布局,在《Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?》一文中做出了详细的对比介绍,而且Matthew James Taylor也给我们制作了很多个这方面的实例,大家还可以看看Float-less CSS layout带来的这三个类型的布局效果。随着CSS3Media Queries出现,给我们的布局带来一种全新的体验——适应于多媒价的布局响应

15个CSS技巧和窍门

前面我也发了几节内容收集了一些CSS的小技巧,比如说《20个CSS实战技巧》、《7个不能遗忘的CSS样式》和《13个CSS技巧》等,今天我又搜集了15个CSS的小技巧和窍门,或许和前面的部分有累同,但希望这些小技巧能帮您在平时的工作中带来些许的帮助。

八个制作Linking(链接)的技巧

“链接”对于一个Web制作人员来说一点都不会陌生,我们在来时的制作中,我们碰到过的“链接”有很多种,比如说文字链接、图片链接,有时甚至是图片和文字的混合链接。而这些链接是Web页面中最佳功能之一,那如何让你的链接在Web页面中尽可能的方便使用,有些就需要一些小技巧来帮助你了。今天我就搜集了一些这方面的小技巧,你会发现这些小技巧的实用性,同时也能使你的链接更好看,更可用。

一、显示文件类型图标

大家在平时的制作中都或多或少的碰到过文件类型的链接,比如说下载“.pdf”文件之类的。我平时都直接给他链接到文件上就完事了,其实我们少做了些工作,那就是我们为什么不能让用户直接通过链接就能了解它呢?现在许多优秀的Web前端攻城师在处理这样的问题时都会加上相应的文件类型,如下图所示:

解决方法:

CSS中强大的EM

使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”。主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从头对“em”学习了一回。稍为有一点理解,今天特意整理了一份博文与大家一起分享,希望对童子们有些许的帮助。

20个CSS实战技巧

前面我在《13个CSS技巧》和《7个不能遗忘的CSS样式》收集了一些实用的CSS技巧,主要是用来处理一些CSS的样式。今天在这篇教程,我依旧收集和整理了一些CSS技巧,其中有一些技巧大家可能已经使用过了,有些可能大家在实际项目中并碰到,另外有一些技巧我也在以前的教程中有单独提出来并做了详细的解说,今天主要是把他们放在一起,方便大家的查阅和学习。这些CSS技巧能帮大家解决一些恼人的问题,从而也能帮大家提高自己CSS方面的技术。别的先不说了,我们一起开始吧。

一、跨浏览器的兼容

浏览器的兼容问题,大家都有碰到过了。兼容问题对于新手来说都是一件棘手的事情。下面的一些hack写法,可能帮你解决浏览器的特定问题。

纯CSS制作的图形效果

今天这个教程中主要和大家一起来探讨和学习:如何使用CSS来制作图形,比如说圆形,半圆形,三角形等。前面有几个教程中都有使用了纯CSS使用border来制作三角形,今天我特意在网上查阅了一下,介绍这样的教程还是蛮多的,因此我也决定整理一份相关教程出来与大家一起分享。最早发现使用border制作三角形是人物Eric Meyer的发现的,但我没有找到Eric Meyer介绍的教程,可相关教程就很多,我在此就不列出来了,我们开始今天的学习之旅吧。

如何工作?

很少会有人意识到,当浏览器绘制的border,会有一个角度的问题。我们就是得用这样的一个技巧来制作三角的效果。我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变其大小来实现不同的效果。我们一起来看一段代码:

13个CSS技巧

大家说CSS很简单,三下五除二就能把CSS拿下,初学时,我也是这么认为的,也是这样给我很大的信心从事这一行,但后面随着相关知识面的提高,我越来越感觉CSS是蛮深的东西,而且越来越觉得自己掌握的CSS还是很薄弱。从而决心要先把CSS这座山头攻下来。大家平时在Web制作中碰到CSS的问题,总会觉得烦人,其实我个人认为最好的解决方案往往都是最简单的。今天在这篇教程中要和大家一起分享CSS的几种小技巧。

7个不能遗忘的CSS样式

今天要给大家介绍七个CSS样式片段,我认为这几个片段对我们项目的制作帮助还是蛮大的,如果你认真看完这篇教程后,我想你会喜欢这几个CSS样式,而且我相信你会马上运用到你即将要制作的下一个项目中,或者说会马上运用到你现在制作的项目中。在具体介绍之前先要告诉大家,这个几CSS样式片段是David WalshPaul IrishHTML5 Boilerplate项目中挖掘出来的。

浏览器兼容之旅的第五站:IE常见Bug——part3

有关于IE的Bug系列,我们前面一共介绍了四个部分:

浏览器兼容之旅的第四站:IE常见Bug——part2

浏览器兼容之旅的第三站:IE常见Bug——part1》中介绍了IE浏览器下十种经典的Bug产生的原因,以及如何在写代码中避免这些Bug的产生,或者说Bug发生后,又如何来解决这些Bug。这节我们接着来看IE下的相关Bug。尽量了解并掌握他们,只有知已知彼才能百战百胜。因为大家都尝过IE下的苦楚,有时为了一个Bug纠结一两天,或者更长的都有,以致于都想头撞南墙,不想活了,这都是IE给逼的呀。不过随着时间往后的推移,我也不觉得他有什么恐怖的,我认为写代码时,结构上多加注意,写样式时尽量避免。这样一来,也没有多少Bug会缠着你。别的不说了,我们继续下面的内容——IE的Bug处理。

页面

返回顶部