现代 CSS

trick

CSS的陷阱

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

Select最佳设置

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

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

10个实用的CSS3技巧

CSS3的运用是越来越成熟了,在QQ群时常能看到朋友讨论这方面的技术,我也学习CSS3的相关技术也有一年之久了,收获也不少。在我的blog中也收集了不少这方面的教程。为了更方便的与大家分享,我今天特意将本站的有关于CSS3的运用罗列一下,并列出10个常用的相关属性,最后在以一个实例来与大家再次学习相关的CSS3的应用,希望大家能喜欢。

20个实用的CSS技巧代码

大家非常的清楚CSS是我们Web制作中不可或缺的一部分。HTML提供了Web制作的结构,但他不能让我们实现美丽的页面制作,此时我们需要CSS的帮助。CSS虽然能帮我们完善Web制作的效果,但其在不同的浏览器下是有不可预知的效果,为了让你的CSS能解决这些不一致下,今天给大家介绍25个CSS技巧代码,我相信这些对你肯家有很大的作用。

一、使用text-indent来隐藏文本

这个常用在图片替换文本中,最常见的就是使用使用图片来替换Logo,这个是非常有用的,使用“text-indent”我们可以达到图片替换文本的效果,而且方便搜索引擎的优化,还能支持阅读器阅读网页内容:

			h1 {
				text-indent:-9999px;
				margin:0 auto;
				width:400px;
				height:100px;
				background:transparent url("images/logo.jpg") no-repeat scroll;
			}
		

当然,这个只是使用“text-indent"替换文本的一种效果,其实他还有更多的方法。

扩展阅读:

纯CSS制作缩略图片

在这篇教程中,主要是跟着Alen Grakalic学习3种CSS制作缩略图的方法。我们在Web页面中时常碰到缩略图的应用,那么下面我将学习三种使用CSS的技巧来主内容显示图像的一部分。这几种技巧贵在于,我们不需要去切图片,而只要使用CSS代码,能帮我们在页面中显示我们需要显示的部分图像出来,而图像的其他部分将被隐藏起来。

另外需要提醒大家的是,我们这里所说的图片是指内容图像(<img>)而不是背景图片,下面我们一起来学习一下如何通过简单的CSS技巧,达到切图的效果。

十种图片替换文本CSS方法

很多网站的logo都使用图片替换文本来实现,而且在一些情况下也有使用图片效果来替换难以实现的文本效果。这些制作我想大家在平时制作中都或多或少的碰到过,那么今天我老话重谈,整理了十种图片替换文本的制作方法。希望对大家有所帮助。

制作原理:

使用图片替换文本,其原理是相当的简单:就是在样式中使用背景图片来替换掉HTML模板中的文本内容,从而达到一种样式无法实现的页面渲染效果。使用图片替换有其优点也有其缺点,优点就是能实现一些特殊的页面效果,缺点就是需要加载图片,而且一些不好的替换方法给残障人员浏览网页会造成一定的不良之处,另外据说会对搜索引擎的搜索有影响,对于这一点没有考究过。那么我们也不去控寻这方面的问题,我们一起来看今天所要说的图片替换文本的制作方法

完美的页面背景图片制作

随着现在的大显屏越来越多,实现整个页面的背景相对来说是越来越困难。前段时间在《如何用CSS实现大背景样式》中和大家一起学习了web designer wall大师介绍的几种实现大背景制作的样式方法。但我们有时需要整个页面放一张大的背景图,而且让他适应任显屏的大小。听起来好像蛮复杂的一样,因为我们不知道我们的用户使用多大的显屏,所以我们也不知道我们要制作多大的背景图片才能适合。大家不用担心,今天给大家提供几种另个的大背景图的制作方法,用来帮助大家制作完美的页面背景。

如何用CSS实现大背景样式

Web页面的大背景制作有时的确烦人,今天看到了web designer wall写了一篇有关于这方面的教程《How to: CSS Large Background 》。从中学习了一下,特意整理一下贴上来与大家分享。

让你的CSS更尽完美的技巧

CSS要学会并不是一件难事,但要在一个大项目中写好CSS和管理好CSS还是有一定的难度的。不过并不可怕,如果你遵循一定的方法,还是很容易写出一个较好的CSS,也能很好的管理好你的CSS样式。下面搜集了几个这方面的技巧,希望能帮助大家写出一个更好的CSS样式。

11个让你代码整洁的原则

写Web页面就像我们建设房子一样,地基牢固,房子才不会倒。同样的,我们制作Web页面也一样,一个良好的HTML结构是制作一个美丽的网站的开始,同样的,良好的CSS只存在同样良好的HTML中,所以一个干净的,语义的HTML的优点很多,那么平时制作中,我们做到了这一点吗?我们一起来看一张图片:

上图展示了两段代码,我想大家都只会喜欢第一种,我们先不说其语义,至少他的结构让我们看上去清爽,而第二种呢?一看就是糟糕的代码的代码,让人讨厌的代码。那么要怎么样才能写出一个好的代码,整洁的代码呢?下面我们就从以下十二个方面一起来学习,只要大家以后在写代码的时候能坚持下面的十二个原则,保准 你的代码质量能上去,而且你写的代码会人见人爱。

一、DOCTYPE的声明

如果我们想做好一件事情,首先要知道我们有哪些权利去做,就如“DOCTYPE”的声明,我们没有必要去讨论是否使用HTML4.01或者XHTML1.0或者说现在的HTML5都提供了严格版本或者过渡版本,这些都能很好的支持我们写的代码:

十个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将和字体颜色是一样的。

页面

返回顶部