trick

十个CSS小技巧

最近一直在整理一些CSS的知识,稍加整理放上来与大家分享,希望对有需要的朋友有所帮助,别的不说,感兴趣的就接着往下看吧:

一、默认边框植

通常我们写一个元素的border属性会这样的写:

		border: border-width border-style border-color;
	

例如“border:3px solid #000;”我们将元素的边框值设置为3px的黑色实线边框效果,然而这里唯一需要的值是“border-style”,因此,你要是这样写边框样式将会没有任何效果:

		.elm {border: 3px red;}
	

此时浏览器将“border-style”解析成“none”。如果你这样设置又是一个不同的效果:

		.elm {border: solid;}
	

此时元素的边框是实线效果,粗线将是其默认值。但是,什么是其默认值呢?边框border-width的默认值是“medium(大约等于3px~4px)”;而其默认颜色border-color将和字体颜色是一样的。

12个真正有用的CSS3技巧

CSS3的出现无疑是一个强大的新东西,我现在在一些Web项目中开始在使用,很方便,同也很高兴能开始使用这一种新的技术。其先进的功能,给我们Web的页面制作真的带来极大的方便,比如说圆角、阴影、渐变等。这里我总结了常用的12种CSS3属性的使用,来帮助大家一起学习CSS3的新功能。

一、圆角——border-radius

早期制作元素的圆角都是使用图片来实现,这样需要增加多个标签来实现,而且对于多色的圆角,给我们的页面制作会带来极大的不便。有了CSS3的圆角属性——border-radius后,我们不必会每种不同的圆角制作图片而烦恼了,我们可以直接使用CSS3来制作。

		.demo {
			-moz-border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
			-webkit-border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
			border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
		}
	

具体效果如下:

15个CSS技巧和窍门

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

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

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

一、显示文件类型图标

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

解决方法:

20个CSS实战技巧

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

一、跨浏览器的兼容

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

13个CSS技巧

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

7个不能遗忘的CSS样式

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

CSS3实现11种经典的CSS技术

在CSS2中,我们为了达到一定的设计效果,时常都需要添加额外的<div>或使用PNG图片等方法来实现。当CSS3的时代到来之际,我们不应该只局限于这些老技术,我们应该大胆的去尝试一些新技术。今天我们就跟随NettutsVasili的教程《11 Classic CSS Techniques Made Simple with CSS3 》。来学习使用CSS3新技术实现十一种经典的CSS样式效果。

页面

返回顶部