前沿视频教室————最好的CSS和Web设计与开发的视频教程

一个文本框旁边一个按钮是很经常用到的网页内容，比如搜索框等等，而如果旁边的按钮使用图像的话，他们竖直方向就很不容易对齐，即使使用vertical-align、padding和margin等都不行（特别是在IE中，Firefox中使用vertical-align还可以）。

例如有如下代码：

1
2
3
4

<form>
  <input type="text" name="foo" value="Test Field"/>
  <input type="image" src="images/button.gif" />
</form>

其效果是：

解决方案非常简单，上述代码修改为：

1
2
3
4

<form>
  <input type="text" name="foo" value="Test Field"/>
  <input type="image" src="images/button.gif" style="position:absolute" />
</form>

这时，在Firefox和IE中的效果分别是：

   

可以看到，在Firefox中，如果事先做好的图像和文本框的高度完全一致，那么他们就会完全对齐了；而在IE中，则按钮图像比文本框高一个像素。

因此可以针对IE浏览器稍作调整：

1
2
3
4
5

<form>
  <input type="text" name="foo" value="Test Field"/>
  <input type="image" src="images/button.gif" 
         style="position:absolute;+margin-top:1px" />
</form>

注意，这里在”margin-top”属性前面有一个加号，对于Firefox浏览器，这个属性设置就无效了；而对于IE浏览器，会忽略掉这个加号，因此针对IE浏览器，上面就会存在这1像素的margin了。在这时，在Firefox和IE中的效果分别是：

   

到这里，在竖直方向经对齐得很好了，水平方向上，在Firefox和IE中，还略有区别，在Firefox中二者紧靠在一起，在IE中，二者之间有一点点间隔。但是水平方向的控制就容易多了，这里就不再细调整了，读者可以自己试验一下。

=================快乐的分割线==============

2009年1月12日 补充：

看来网络的好处也在于它可以长久地被人发现，比如这片文章吧，在我贴出了10个多月以后，橘子 网友留言给出了一个简单而优雅得多的方法解决这个问题。

非常好用，方法是对需要对齐的input元素使用 vertical-align 属性比如：

.nav_r img,.nav_r input,.nav_r select{vertical-align:middle;}

这样确实对得很齐。

Good！

CSS开始进入布局领域，并逐渐开始广泛地被使用，越来越多的设计师转向CSS，然而随着使用的逐步深入，会发现使用CSS的一个问题是，懂得越多，遇到的问题就越多。在实际制做网站的时候，总会遇到以前没有碰到过的新问题。就好像我们学了十几年的英语，单词、语法都背了一大堆，但是真到用的时候，还是总遇到不会说的东西。

实际上这还是学习途中的一个阶段，算是成长的烦恼。毕竟每解决一个问题，功力就会精进一层。因此，除了彻底把CSS的原理搞清楚之外，就要尽可能多地实践，解决实际问题，这样终归是可以把问题都解决的。

在实践中，最关键的问题就是如何调试，也就是在遇到页面表现和预想的不一样的时候，怎么找到问题的关键。当然，前提是你对你写的代码基本上是清楚的，否则谈不上调试。

对于CSS而言，本质就是大大小小的盒子在页面上摆放，你不是设计师，而是排字工人，你眼中看到的不是文字，不是图像，就是一堆盒子！你要考虑的就是盒子与盒子之间的关系！标准流？并列？上下？嵌套？间隔？背景？浮动？绝对？相对？定位基准？等等等等……

技巧1：设置背景色或者边框，确认错误范围

归根到底，任何排版上的错误，都是由于你认为某个盒子应该在的位置和浏览器认为的位置不同，所以如果你本身就是浏览器，一切错误都不会出现。

因此，每当你发现表现页面不如你意的时候，比如希望在左边跑到右边了，希望在一行的变成两行了等等，都首先明确每个盒子的范围，这时你可以通过临时给盒子设置背景色，或者设置一个1像素边框的方法，清楚地了解浏览器认为和盒子范围和你认为的盒子范围是否一致。如果可以设置背景色最好使用背景色，因为设置边框会改变布局，这就好像我们使用温度表测量温度，前提是认为温度表本身不会影响被测物体的温度，实际上物理学告诉我们，任何两个物体都是相互影响的，即所谓测不准原理。但有时对于复杂的页面，背景色可能无法看出范围，还是需要使用边框来完成这项任务，但你要排除增加的临时边框引入新的问题的可能性。

当某个盒子的范围不是你所希望的，恭喜你，你已经找到错误所在了，接下来就是分析为什么浏览器要把它放在这里，而不是按照你的意愿去放置？你经过这一步仔细计算，你的所有代码都是符合CSS规范的，那么你需要确认这是浏览器错了，而不是你错了。不过你应该相信，99%的可能是你粗心算错了，1%的可能是浏览器有错误。就好像你回忆一下，上学时参加过的所有考试，老师确实有时会把你答对的题目判错，但是这种概率很低。

技巧2：删除无关代码，暴露核心矛盾

经过上一步的排查，你已经怀疑浏览器有问题了，那么就需要确认这一点。而这时你的网页很可能很复杂，内容很多，各种因素互相影响，都会干扰你的判断。解决方法就是把仅和你有问题的部分相关的代码提取出来，或者把无关代码全部删除，总之目的就是尽可能找到出现问题的最小代码集合，这样你才能找到问题的本质原因。事实上，很多情况下，从一个复杂的网页一点点删除代码的过程中，你的问题就解决了，这样你一定要注意，删了哪些代码，你的问题就解决了，这就是问题的原因，如果你是个聪明人，一定要把这个问题真正搞懂，不要只管结果，不问为什么。遇事多问几个为什么，你的提高会快得多。

事实上，调试能力是非常重要的，任何人在实际工作中，肯定都会遇到做出来的效果和自己希望的不一致的情况，这时就要看调试能力了。

就好像，家里停电了，你一定会首先出门看看邻居家的是不是有电，这样就判断出问题出在自己家里，还是整个楼停电了。如果整个楼都停电了，那就只有等了；如果只是自己家停电了，那就要再分析一下是不是哪里短路了（比如水洒在电线上了），或者有什么电器过载了（比如你把家里的所有空调、热水器、电火锅这些东西都打开了），等等，这实际上就是在确定故障点，道理和作页面是完全类似的，第一步就是缩小范围，只是你可能没有意识到。因此，你可以把生活中的一些道理，移植过来，很多问题就好解决了。（如果一出问题，就找物业的人来修，应该是比较适合做领导的人，呵呵。）

技巧3：先用Firefox调试，然后使它兼容IE

关于Firefox和IE的差异问题，已经谈过很多了，这里不再细说，总之原则就是，Firefox对CSS规范遵守的最好，调试的时候先用Firefox调试，然后再使网页兼容IE；其次，不要在一种浏览器完全做好以后，再用浏览器调试，而是每一步都保证在各浏览器中这个正确显示。

技巧4：善于利用工具，提高调试效率

这里要说的是两个非常方便的工具，他们都是以Firefox的插件形式存在的，分别是“Web Developer Toobar”和“Firebug”。当然，他们都不能向傻瓜相机一样，只要按一下快门，就告诉你问题出在哪里。他们的作用都是可以帮助你尽可能方便地了解浏览器是如何看待你的代码的。比如，通过他们，可以方便地查看每一个盒子的范围，不需要你在人为地设置边框了，通过Firebug，可以实时动态地修改CSS属性设置，这都可以大大提高你调试的效率。这里暂时没有篇幅来讲解这两个工具的用法了，有兴趣的读者可以先查一查相关的介绍。

技巧5：善于提问，寻求帮助

互联网出现了，这个伟大的家伙给我们带来了太多的方便。有了Google，我们可以寻找答案，有了各种网站论坛，我们可以去向别人请教，这都是我们学习的最好途径。但是有一点，这也需要一些提问的技巧和艺术。这里给您的建议就是，在提问之前，一定要按照前面说的几点，自己亲自研究过你的问题，你的问题可以用一两句话很具体地说明，可以配有简洁的代码，使看到你的问题的人，可以很容易理解你的问题，并“重现”你的问题。这一点非常重要，千万不要把大段大段的代码，贴到某个论坛上，那样你得到帮助的机会会变得小得多。你要相信，热心人固然是很多的，但是热心到能够花很多时间一点点分析你的大段大段代码，然后大海捞针一样地找出某个地方存在问题的热心人就不多了。事实上，这些功课是你应该提前做好的，你至少应该尽可能缩小问题的范围，到一个合理的程度。互联网、Google、论坛都是工具，也仅仅是一个工具，谁能用得好，谁就能获得更快的提高，关键还是要看使用工具的主人。

好了，暂时写这5点，欢迎大家讨论和补充！没有仔细校对，如果您在文中发现错别字或者语法错误，敬请告知，谢谢！

使用CSS以后，读者会发现很多原来使用表格布局非常小儿科的问题，都变得不那么简单了。比如xiaoyh119读者希望实现一个如下的效果。

具体标题-1More

也就是在一行中，一个标题文字居左，又端放置另一个文字，以便制作一个详细内容的连接。这样的样式，如果使用表格表格布局非常简单，只要使用一个一行两列的表格就解决了，代码如下。

1
2
3
4
5

<table>
   <tr>
      <td>具体文章标题</td><td align="right">More</td>
   </tr>
</table>

而如果使用CSS又该如何实现呢？首先我们仍顺着使用表格的思路，把左右两端的文字分别置入一个span标记中：

1
2
3
4

<h4 id="main-1">
    <span class="title">具体标题-1</span>
    <span class="more">More</span>
</h4>

那么CSS又该怎么写呢？为了能够使两个span中的文字在同一行中，因此一定要CSS中的浮动的性质来实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#main-1 {
	font-size: 12px;
	width:300px;
        margin:0 auto;
	border:1px gray solid;
}
 
#main-1 span.title{
	float:left;
}
 
#main-1 span.more{
	text-align:right;
	display:block;
}

这里首先将左边的文字设置为向左浮动，从而脱离标准流，这时它后面的文字会围绕它排列，从而使右边的“More”文字出现在同一行，但是为了使“More”文字位于最右端，就需要时这个span变为块级元素，这样它才会自动扩展，然后通过text-align:right使文字能够右对齐。

现在回头思考一下，我们上面的思路是仍然沿用了表格布局的思路进行的，那么进一步考虑一下，这个案例是否可以简化呢，实际上如果我们对HTML代码稍稍修改，就可以使CSS代码大幅度化简，首先把左右两端的文字交换一下位置：

1
2
3

<h4 id="main-1">
    <span class="more">More</span>具体标题-1
</h4>

那么CSS又该怎么写呢？为了能够使两个span中的文字在同一行中，因此一定要CSS中的浮动的性质来实现：

1
2
3

#main-1 span.more{
        float:right;
}

可以看到，这种方法，代码就比前面的方法简单了很多。因此，这里例子代码很简单，但是从中可以看出一个很有用的道理，用CSS进行页面的设计和布局，无论是一个复杂的大布局，还是一个简单的小样式，关键实现要真正把CSS的核心原理搞懂，比如这里的“盒子模型”、“标准流”、“浮动”和“定位”等基本原理，都真正理解清楚。

今天先讲到这里，后面我们还会继续沿着这里的案例继续探索和深入，更好地理解CSS的奥妙。如果对这个案例感兴趣，但是对具体原理不是很理解的读者，建议您再仔细研究一下《CSS设计彻底研究》视频教程的第1~4课。

最后，在给读者朋友一个“思考题”，这是袁马飞读者提出的问题，他希望实现如下这个效果，也就是文字要分为左中右三段，左右两端分局左右两端，中间段靠着左段，并且要求，鼠标指针经过时，相应的列表行背景变色，有兴趣的读者可以考虑一下，应该如何实现呢？能够实现IE6/IE7/Firefox都兼容吗？必须使用Javascript吗？如果使用Javascript又该怎么写呢？

欢迎您来到前沿视频教室，下面列出的是我们“你问我答”栏目的目录。

回答读者提问(1)——用flash实现大摆角摆球的模拟
回答读者提问(2)——十六进制颜色值的含义与定义方法
回答读者提问(3)——在IE浏览器中去掉Flash激活的方法
回答读者提问(4)——动画与视频的区别
回答读者提问(5)——去掉网页内容和边框间的空白
回答读者提问(6)——如何去掉超级链接的下划线
回答读者提问(7)——绘图软件中的混合模式是怎么回事？
回答读者提问(8)——绘图软件中的混合模式是怎么回事？（续）
小测验（第1期）
回答读者提问(9)——学点什么技术好？
回答读者提问(10)——每天被问得最多的一个问题
回答读者提问(11)——CSS滑动门技术的简单应用
回答读者提问(12)——关于CSS在不同浏览器的调试经验
回答读者提问(13)——关于Web设计、制作、开发工作
回答读者提问(14)——鼠标指针经过时给图像加边框
回答读者提问(15)——关于HTML属性与CSS属性
回答读者提问(16)——最简单的CSS图片翻转效果
“你问我答”目录
回答读者提问(17) ——看似简单的问题其实不简单
CSS调试技巧五则，兼谈“提问的艺术”
回答读者提问(18)——如何对齐文本框和旁边的图像按钮
回答读者提问(19)——再谈浏览器的兼容性
回答读者提问(20)——关于“内容管理系统”（CMS）
你问我答(21)——破解Kai Laborenz的神秘海底世界
你问我答(22)——遵循Web标准的网页设计工作流程(一)
你问我答(23)——遵循Web标准的网页设计工作流程(二)
你问我答(24)——遵循Web标准的网页设计工作流程(三)
你问我答(25)——遵循Web标准的网页设计工作流程(四)
你问我答(26)——遵循Web标准的网页设计工作流程(五)
你问我答(27)——使用CSS定位页面的“footer”
你问我答(28)——关于网页设计软件对CSS支持的比较
你问我答(29)——用好代码视图的辅助功能
你问我答(30)——上大学，学什么？
你问我答(31)——行内元素与块级元素
你问我答(32)——自学是艰苦的
你问我答(33)——jQeury实现限定上限的多选表单
你问我答(34)——破解缝隙之谜
你问我答(35)——破解缝隙之谜(续)
你问我答(36)——带有纹理的渐变背景处理方法
你问我答(37)——jQeury实现回车键代替Tab键
你问我答（38）—— 问答精选集

今天有读者询问制作鼠标经过时切换图片的效果，这种效果也称为“翻转”效果(roll-over)。原来这种效果大多使用Javascript实现，实际上用CSS可以非常方便地制作出来的。

这里给出一个最简单的效果，在深入的复杂效果变化就非常多了，有兴趣的读者可以慢慢深入研究。

先看一下这个效果，将鼠标移到按钮图片上时，图片就会成另一个了。

这个效果实现其实非常简单，第一步：准备两个图片，大小完全相同即可，这里是128X34像素。

左边这个是通常状态时的图片，叫background.gif，右边这个市鼠标经过时的图片，叫background-hover.gif。

第二步，写HTML部分的代码：

1

<a href="#">Button Text</a>

就是一个非常普通的超链接文本，如果希望完全使用图片而不是用任何文字，也可以。

第三步：CSS部分的代码是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

a:link, a:visited{
	display:block;
	width:128px;
	height:34px;
	font-size:14px;
 
	font-family:Arial;
	line-height:34px;
	text-align:center;
	color:black;
	text-decoration:none;
 
	background:url('background.gif') no-repeat;
        }
 
a:hover, a:active{
	background:url('background-hover.gif') no-repeat;
	color:white;
        }

好了，这个效果就完成了，是不是非常简单。下面简单解释一下CSS代码的含义。

第1~14行代码是定义鼠标没有经过超链接时的CSS样式：

首先要把a元素变为块级元素，然后设定它的高度和宽度与图片相同。

然后是文字放到图片的中心位置。

最后设定背景图像的地址。

接下来的第16~19行代码定义鼠标经过时所需要变化的CSS样式。

把文字的颜色由黑色变为白色，并把图片换成另一个图片即可了。

说明与讨论：

1：如果对上面的解释还不清楚，比如什么是“块级元素”？如何设置背景图像？这些基本CSS设置方法还不清楚，这些内容很难用一两句话说清楚，请读者仔细看本站的视频教程或《精通CSS+DIV网页样式与布局》这本书，真正把基础掌握扎实永远比模仿着做出几个效果更重要。

2：读者在实验这个效果的时候，可能会发现这个效果目前有一个缺陷，鼠标移到图片上以后，很可能紫色的图片不会立即出现，而是几秒钟以后才出现，这是因为这个图片当时还没有下载到本地计算机上，因此这样对于访问者的感受就不太好了，解决方法是把上面两个图像和在一个图片中，通过使用背景图像的定位属性，来实现普通状态和hover状态显示图片上的不同区域，这样就不会有这样的停顿了。

3：这个例子还可以进一步改进，目前的做法中，按钮的宽度是固定的，如果希望按钮的宽度能够随着按钮上的文字的长度自动是适应，就要使“滑动门”技术了，可以参考《CSS滑动门技术的简单应用》这篇文章，先搞懂“滑动门”的原理，就可以应用到本例中了。