现代 CSS

HTML

表单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

CSS选择器的优化

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

CSS的Float之二

说起浮动大家并不陌生,因为有 Word 中看到太多的浮动围绕现象。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”

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的Float之一

Float在CSS中是一个重中之重的东西,因为他是一个强大的,极有作用的一个CSS属性,但如果你没有理解透这个Float的话,那将是一个难搞的事情,特别是对于初学者来说,更是一个棘手事情。那么从今天开始我们一起来探讨这个Float

刚才说过了,Float是一个极有用的属性,首先表现在布局上,全前提是你要清楚他,了解他。这样才能达到知已知彼,方能百战百胜。下面我们先来看一段代码:

HTML Markup

纯CSS制作缩略图片

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

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

十种图片替换文本CSS方法

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

制作原理:

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

完美的页面背景图片制作

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

页面

返回顶部