设计您的页面大约一个jQuery界面主题

在jQuery的用户界面 1.5版本带来了它的Themeroller，这是一个快速，轻松地定制和下载jQuery的“部件设置在网页上使用”。

只需选择一个预先构建的主题，或调整您自己的喜好设置和下载的主题。 您的下载将包括所有必需的文件，所有这些部件的工作，并在一个页面上的所有这些演示文件。

事实上，这些预建的主题可以为您服务以及新设计的起点。 让我们成为一个基本的操作使用标签和手风琴的网站下载一个主题。

清洁楼

我们将利用我们的网站主要内容区的选项卡部件，和侧栏手风琴。 一个很好的第一步将是让您的文件夹，然后开始组织清除HTML和CSS文件额外的代码。

我开始了重新命名，demo.html文件index.html和CSS文件的style.css文件 。

然后，我删除从CSS文件，都和选项卡以外的任何手风琴和其他所有CSS。 有一个额外的多余文字在默认的CSS文件，包括关于元素吨重置，不真正需要的，如果您使用的是全球复位很多。 清洁房子会在这里。

然后做在HTML文件中同样的事情，清除所有代码不基本结构或制表符或手风琴的一部分。 下面是我的网页看起来清理后：

结构

这些选项卡明智，以此作为一个网站主要内容区。 的标签都可以基本上是该网站的不同区域。 首先，让包装在一个div同一个网页ID的整个网站，因此我们可以包装中心，并设定一个固定的宽度。 然后，因为两者的标签和手风琴已经在包装股利的，我们可以利用CSS他们的目标，设置静态的宽度和浮动他们任何一方。 这是CSS的可能如下所示：

#page-wrap { width: 900px; margin: 0 auto; } #accordion { width: 280px; float: right; } #tabs { width: 600px; float: left; } 

现在，标签上更多的是主要内容的外观和手风琴采取就像一个侧栏。 每个标签页可以作用相当于一个网站的不同部分，只是它的一个非常酷的动态的方法，因为它的网页切换不需要在所有页面加载！

以下是我的页面看起来像经过重组位：

充实了内容

让我们摆脱那里，默认的内容，并开始在我们自己的东西堵塞。 那么，这仍然是一个演示，所以我将离开这个Lorem存有东西最...但现在照顾我扔在几个图形和插件一些更现实的内容：

决赛

这整个网站需时约20分钟扔在一起。 它没有以任何方式的杰作，但它是一个好的开始就非常干净的寻找网站。 一切都说明：如何快速你可以开始建立网页，甚至还通过jQuery和用户界面themeroller很酷的动态功能。

观看演示

下载文件