代码分享
使用代码将Photoshop中的设计草图转换为一个真正的网站是网站设计中非常重要的一步。下面文章的内容将涉及Xhtml、CSS以及PHP代码，开始学习吧！
标题看上去有些费解，到底是什么意思？很简单，假设你的博客中有许多文章，其中一部分文章都有着共同的标签”网页设计”，那么当别人访问你的博客，点击”网页设计”这个标签的时候，所有包含这个标签的日志都会显示在一个页面当中。那么，这个页面就是我们在这篇文章中所要创建的页面。在这个页面中，一般来说，日志会按照时间顺序排列，页面最上方的是最新发布的日志，最下方是最早发布的日志。
之前我就写过关于创建人性化的返回顶部链接的文章，讨论了返回顶部链接需要具备哪些特点才能称得上人性化。一直以来我都觉得停留在视觉区域内的返回顶部连接更为完美一些，但由于对javascript不熟悉，所以一直不知道如何在技术上实现，只能使用别人做好的javascript代码。最近一段时间学习了jQuery，发现其实用jQuery来写的话很简单，所以在这片文章里我会介绍一下如何自己动手创建简单而且很酷的返回顶部链接效果，让我们开始。
发现第一个问题的起因是我在<body>标签下创建了一个<div id=”wrapper”></div>容器，将页面中的全部内容都放到了这个容器之内，但是创建完主题之后却发现wrapper容器的顶部距离<body>标签，也就是浏览器顶部有大概25个像素。为了确认这个间隙的存在，我给<body>标签和wrapper容器添加上了1个像素的border属性，发现确实存在这个问题。然后我又仔细检查了CSS代码，看看是不是手误给wrapper容器添加了margin-top属性，发现代码一切正常，这就让人纳闷了，到底是哪里出了问题呢？
自从学习网页前端设计以来，我一直把主要的精力和时间放在研究Photoshop、Html以及CSS上面，很少学习JavaScript，原因是之前不知道网页的构成由三个部分，内容（Html）、外观（CSS）和行动（JavaScript）组成，而JavaScript作为代表行动的部分具有相当的重要性。没有JavaScript参与的网页如同是一本书，单方面的对用户灌输信息，而有了JavaScript的网页，才和用户有所互动。所以现在狠下心来恶补JavaScript，之前学习Html和CSS的时候阅读过O’Reilly公司出版的《Head First HTML with CSS &XHTML》，认为相当的不错，所以这次学习JavaScript还是选择了他们出版的《Head First JavaScript》这本书。截至目前已经看完了第四章，总体感觉还是很不错的，整本书依旧延续了深入浅出，通俗易懂的风格，很适合新手阅读。
飞鱼的声纳顶部的搜索框让我头疼了很长时间，原因是总不能获得跨浏览器的统一样式。主要的问题有这么两个：一是input标签的高度不能统一，Firefox和IE中的高度始终不能一致；二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示，而是靠输入框的左上角显示。
为了彻底解决搜索框的这些问题，我以GreenGaint主题搜索框的样式为准，重写了一遍代码并且以像素为单位测量了一下在没有任何样式表的情况下<input>标签在默认浏览器中的实际差别。
最近，在CSS-Tricks上发现它的侧边栏无序列表的鼠标悬停效果有点意思，列表会平滑的向右方滑动。仔细查看了一下背后的CSS代码，发现纯粹是用CSS3创建的效果，没有用到复杂的JavaScript。因此，就想一探究竟，学习一下如何使用CSS3来创建这种效果。经过进一步的了解发现实现这种效果的CSS3属性为transition。
关于CSS在不同浏览器的表现虽然平时有所了解，但是一直以来，我都没有进行过梳理总结。而且网上遍布的各种关于IE Bug的问题形形色色，有些堪称光怪陆离，越看越让人糊涂。于是我打算亲自动手测试，彻底了解CSS在不同浏览器的表现效果，结果还真是了解到不少真相，下面就是我通过测试后得出的结论。
尽管我们非常讨厌和IE bugs打交道，可还是要面对它，因为你的老板和访问者仍然在使用IE。由于不同版本IE的渲染引擎不一致，所以显示出来的页面也是不尽相同的，这让人感到非常沮丧。通常我们会使用有条件的注释来修复IE的问题。但其实还有更多的方法……