Css HTML5导航、结构和语义

Css HTML5导航、结构和语义,css,html,menu,navigation,structure,Css,Html,Menu,Navigation,Structure,我最近问了很多问题,但希望这将是一段时间内的最后一个问题 我举了一个例子: 基本上,这都是关于我的新网站的菜单,结构设计,这是有点不同于你通常看到的,语义和所有这些东西 基本上,它由许多选项卡组成,这些选项卡不是实际的链接,尽管它们可能是。 下面是一个预定义的区域,用于两个目的之一 假设用户未浏览菜单,则该区域将用于与导航无关的内容。例如,显示横幅图像。定义为主要内容。 使用菜单时,将不显示此主要内容。该区域将用于子菜单 我认为这很简单,假设新浏览器不存在严重的浏览器兼容性问题,而新浏览器目前不

我最近问了很多问题,但希望这将是一段时间内的最后一个问题

我举了一个例子:

基本上,这都是关于我的新网站的菜单,结构设计,这是有点不同于你通常看到的,语义和所有这些东西

基本上,它由许多选项卡组成,这些选项卡不是实际的链接,尽管它们可能是。 下面是一个预定义的区域,用于两个目的之一

假设用户未浏览菜单,则该区域将用于与导航无关的内容。例如,显示横幅图像。定义为主要内容。 使用菜单时,将不显示此主要内容。该区域将用于子菜单

我认为这很简单,假设新浏览器不存在严重的浏览器兼容性问题,而新浏览器目前不包括ie8和旧版本。我可能会选择支持ie8,所有这些都是适时的,但实际上,这将更多地支持WindowsXP

现在这一切都很好,很有效,但有些问题我想回答,有些问题我想解决

首先,如果我能避免使用div,我愿意。如果还有其他更合适的元素,请告诉我

其次,它很快就被所有的悬停和不悬停弄糊涂了。CSS本身就是一团乱,所有的建议都是非常受欢迎的

第三,我发现,对于显示为表格单元格的li元素的定义宽度,它们的行为相当怪异。如果我将宽度设置为100%,则第一个单元格将尽可能宽,同时仍显示其他单元格,但如果我将绝对像素值设置得太高,则所有单元格都将完美对齐。我认为这实际上相当不错,这就是为什么当前将宽度设置为等于导航区域的宽度,但这是一种好方法吗?我能期望它在其他never浏览器中也能工作吗?还是只计算适当的宽度更好

最后,在未使用导航时显示的main div实际上与导航无关,但我还没有弄清楚如何在不将该元素放置到元素中的情况下执行该操作。对此的评论也将不胜感激

可能有一些我没有注意到的问题,或者我忘记提出的问题,所以再次强调,任何评论都是非常受欢迎的

我确实希望在这里得到一些高质量的反馈,我希望我会;)

现在就这样

提前感谢并致以最良好的问候

编辑: 听了你的一些建议,想了想,我稍微改变了一下结构:

我仍然没有找到更好的替代显示的方法:表格单元格 不管怎样,我最终会有奇怪的边距/填充物或不整洁的边框

编辑2: 我现在已经尝试了我能想象的一切,但仍然无法解决一个小问题

我被告知表格单元格属性是不允许的。虽然这一切都很好,但它实际上也完全按照我现在想要的那样工作,使用table cell display属性

因为表格单元格不好,显然,我已经试着让它与内联一起工作,这导致了一个奇怪的顶部1.5px填充或边距,我无法消除,但更重要的是,我无法设置li元素的宽度。此外,如果你想让它们看起来完美,那么边界很难管理。显然,as表格单元格只是将两个单元格之间的边界作为一个单元格来处理

当然,我也尝试过内联块,虽然我不得不删除html中的某些空格和换行符,这很烦人,但我仍然无法设置固定的宽度,虽然我显然应该可以,而且边框还是一团糟

当然我也试过摆弄花车,但那只会让我头疼。所以我想要10个标签。好的,取总宽度除以10。是的,它可以工作,除非你不能设置宽度或想使用边框。。。jabba jabba jabba jabba吹毛求疵

我没有生气或其他什么,但我感到困惑、疲惫和放弃

请告诉我为什么我不能只使用实际有效的属性,主要是表格单元格属性,并且假设有一个很好的理由,请详细地向我解释替代方法是什么,因为我看不到它

上次编辑的最新工作草稿示例


致以最诚挚的问候。

特别是,HTML5规范定义了一些“突出”的新元素,我相信您在这里引用了这些元素

(和
)、
等等,如果您愿意的话,它们都只是语义容器。 从语义上讲,有些元素可以嵌套,比如用于文章级导航的
中的
元素(比如跳转到脚注)

需要记住的是,它们与它们的父元素有着内在的联系,因此

<body>
<header>Hi there!</header>
<nav>This would be site-level navigation</nav>
<article>
<header>Welcome to *this page*</header>
<nav>This would be page-level navigation</nav>
<p> Here is the actual page content </p>
</article>

你好!
这将是站点级导航
欢迎来到这个页面*
这将是页面级导航
这里是实际的页面内容

您可以想象,这段代码在语义上表示站点在说“Hi There!”,而页面在说“Welcome to this page”

请更具体一些,以获得更好的示例/解释

快速提示:不要将非表单元格定义为“显示:表单元格”,除非您想在浏览器中看到非常奇怪的行为。坚持显示:{none,block,inline,inline block}


Div代表*Div*ision

特别是,HTML5规范定义了一些“突出”的新元素,我相信您在这里引用了这些元素

(和
)、
等等,如果您愿意的话,它们都只是语义容器。 从语义上讲,有些元素可以嵌套,比如用于文章级导航的
中的
元素(比如跳转到脚注)

要记住的是,它们天生就是-l