问题标签 [css]

当谈到网页设计时，我对制作任何看起来很漂亮的东西都很糟糕。值得庆幸的是，有很多免费的设计模板资源。然而，这些设计的一个问题是它们只覆盖一个页面，并且没有很多用例。如果你看一下CSS Zen Gardens，他们有 1 个 HTML 文件，只需更改 CSS 文件就可以从根本上改变它的样式。

现在我想知道是否有一个标准的 HTML 布局（标签和 ID），它涵盖了很多用例，并且可以用不同的 CSS 文件（如 Zen Garden）进行通用主题。我想象的是一组关于如何编写 html 以及应该使用哪些框、列表、菜单和样式的规则。可以创建一组涵盖各种用途的标准测试页面，并创建一个新的 CSS 文件，同时必须以漂亮的视图支持所有不同的页面。

是否有任何项目涵盖与我所描述的内容类似的内容？

鉴于下面的代码，我如何将单选按钮设置为位于标签旁边，并将所选单选按钮的标签设置为与其他标签不同的样式？

另外让我声明我使用 yui css 样式作为基础。如果您不熟悉它们，可以在这里找到它们：

• 重置字体-grids.css
• base-min.css

他们的文档都在这里：Yahoo！用户界面库

@pkaeding：谢谢。我尝试了一些漂浮的东西，看起来很乱。样式化的活动单选按钮似乎可以通过一些 input[type=radio]:active 提名在谷歌搜索中实现，但我没有让它正常工作。所以我猜想的问题更多：这在当今所有的现代浏览器上是否可行，如果不可行，需要的最小 JS 是多少？

例如，我有这样的情况（人为的）示例：

在任何元素上都没有设置宽度的地方，我想要的是#inner1，#inner2并且#inner3在内部水平地彼此相邻出现，#outer但正在发生的事情是，#inner1并且#inner2彼此相邻出现，然后#inner3换行到下一行。

在发生这种情况的实际页面中，还有很多事情要做，但是我已经用 Firebug 非常仔细地检查了所有元素，但不明白为什么#inner3元素没有出现在同一行，#inner1并且#inner2导致#outer变宽。

所以，我的问题是：有什么方法可以确定浏览器为什么按原样调整#outer 的大小，或者为什么#inner3即使有足够的空间将其放在前一个“行”上，它也选择换行？对于这个问题的具体解决方案，对于那些发现自己在前端工作的可怜的后端开发人员，你的核心 HTML/CSS/Web UI 人员有什么技巧或技术？

Is there a way to select a parent element based on the class of a child element in the class? The example that is relevant to me relating to HTML output by a nice menu plugin for http://drupal.org. The output renders like this:

My question is whether or not it is possible to apply a style to the list item that contains the anchor with the active class on it. Obviously, I'd prefer that the list item be marked as active, but I don't have control of the code that gets produced. I could perform this sort of thing using javascript (JQuery springs to mind), but I was wondering if there is a way to do this using CSS selectors.

Just to be clear, I want to apply a style to the list item, not the anchor.

鉴于此 HTML：

这个CSS：

我将如何将topnav列表转换为内联列表？

简短版本：在 Web 开发人员和 Web 开发人员的最终用户使用的所有浏览器中，对于一致的表示和 AJAX 功能，最简洁和最可维护的技术是什么？

• 即 6、7、8
• 火狐 2、3
• 苹果浏览器
• 谷歌浏览器
• 歌剧

长版：我写了一个针对其他 Web 开发人员的 Web 应用程序。我希望我的应用程序在演示和 AJAX 行为方面都支持主要的网络浏览器（加上 Google Chrome）。

我从 Firefox/Firebug 开始，然后在 IE 6 和 7 下添加了条件注释以保持样式一致。接下来，令我惊讶的是，我发现 jQuery 在 IE 中的行为并不相同。所以我使用条件和不太纯的 jQuery将我的 Javascript 更改为在 FF 和 IE 上可移植。

今天，我开始在 Webkit 和 Google Chrome 上进行测试，发现不仅样式与 FF 和 IE 不一致，而且 Javascript 根本没有执行，可能是由于语法或解析错误。我期待一些 CSS 工作，但现在我有更多的 Javascript 调试要做！在这一点上，我想在为所有情况编写成堆的特殊情况之前退一步思考一下。

我不是在寻找灵丹妙药，我只是在寻找使事情尽可能易于理解和维护的最佳实践。如果这在没有服务器端智能的情况下工作，我更喜欢；但是，如果有优势，例如检查用户代理，然后将不同的文件返回到不同的浏览器，那么如果 Web 应用程序的总体可理解性和可维护性较低，那就没问题了。非常感谢大家！

我见过人们在他们的 HTML 中做这样的事情：

这是否适用于所有现代浏览器，是否有一个浏览器类型列表可以与这种 if 语句一起使用？

编辑

谢谢罗斯。_ 有趣的是了解gt、lt、gte 和 lte。

刚开始使用Google Chrome，注意到我们网站的某些部分，例如页面上的所有链接，都是鲜红色的。它们应该是带有虚线下划线的黑色。

渲染中是否存在一些问题，WebKit无论样式如何，都会将所有链接变为红色？

经过大量尝试和搜索，我从未找到使用 CSS2 的令人满意的方法。

实现它的一种简单方法是将其包装成一个方便<table>的，如下面的示例所示。您知道如何避免表格布局并避免古怪的技巧吗？

我想知道的是如何在没有固定宽度和块的情况下做到这一点。

我正在尝试提高 Web 应用程序的性能。我有一些指标可以用来优化返回主 HTML 页面所需的时间，但我担心这些 HTML 页面中包含的外部 CSS 和 JavaScript 文件。这些是静态服务的，带有 HTTP Expires 标头，但在应用程序的所有页面之间共享。

我担心浏览器必须为显示的每个页面解析这些 CSS 和 JavaScript 文件，因此将站点的所有 CSS 和 JavaScript 共享到公共文件中会对性能产生负面影响。我应该尝试拆分这些文件，以便从每个页面链接到该页面所需的 CSS 和 JavaScript，还是我的努力几乎没有回报？

是否有任何工具可以帮助我为此生成指标？