将cute slider与HTML5Boilerplate集成

Question

当使用HTML5Boilerplate优化包含可爱滑块的页面时，幻灯片显示会下降大约15px，列表样式的光盘会返回。这可以在http://www.quailparkoflynnwood.com/dev/index.htm (未压缩)和http://www.quailparkoflynnwood.com/dev/publish/index.htm (压缩)中看到。如能深入了解这一问题的原因，我们将不胜感激。我的退路是简单地不压缩包含滑块的页面。

Answer 1

我看不到滑块，带有光盘的图像实际上是列表项中的图像，所以你在div#slideshow中得到了一个无序列表；，也许normalize.css没有覆盖无序列表的样式规则。

将以下代码添加到style标记或css文件中以删除该样式

#slideshow ul {
list-style-type: none !important; /*remove disc !important to override other rules */
padding: 0; 

}

您的站点的页面速度得分为51/100 :(您有大量的404(对非现有资源的错误请求)和大图片(也未优化)。84c8a31.css它是巨大的和缩小的，并且似乎有重复的风格规则。

就我个人而言，我不会使用js/css小型化，因为它使得非常复杂的进一步维护，以换取节省一些kb和几个请求，在我看来，这是非常划算/有效的(对于常规大小的网站)。

如果你想优化你的网站，开始优化你的图片并调整大小，找到并删除你所做的所有不好的请求，试着只加载一两个css文件和你实际使用的样式规则，把脚本放在最后。

准备就绪时: gzip文件，并使用.htaccess文件添加缓存头

祝开发人员好运！

Answer 2

问题是可爱的滑块样式没有包含在最终的压缩输出中。这是通过使用main.css保存所有css文件的导入语句来解决的。在HTML5boilerplate的早期版本中，这是正确的编码。我对HTML5bp v4.1.0的阅读似乎暗示这不再是预期的设置，但最新版本的构建(v1.0)仍然支持导入语句。