html – CSS样式菜单标记的最佳实践是什么？

概述所以,我一直在“收集”CSS菜单一段时间(另一个术语是“借用”,另一个术语是’公然扯掉’),向他们学习,并可能重用我自己的一些leetness项目. 作为一个oldschool HTML纯粹主义者,我喜欢样式< ul> s和< ol> s的想法,并且更好的菜单和标签界面倾向于使用这种方法,用于可访问性或语义健全性或任何原因.我主要喜欢这个方法,因为它让我的HTML源码保持干净整洁. 现在,我实际上 所以,我一直在“收集”CSS菜单一段时间(另一个术语是“借用”,另一个术语是’公然扯掉’),向他们学习,并可能重用我自己的一些leetness项目.

作为一个oldschool HTML纯粹主义者,我喜欢样式< ul> s和< ol> s的想法,并且更好的菜单和标签界面倾向于使用这种方法,用于可访问性或语义健全性或任何原因.我主要喜欢这个方法,因为它让我的HTML源码保持干净整洁.

现在,我实际上已经重构了我的CSS菜单集合,以适应我从最灵活的例子中推断出的一个“主”标记模式,例如CSS Zen Garden.它看起来像这样：

<div ><ul>    <li ><a href="#" title="Page 1"><span>Home</span></a></li>    <li><a href="#" title="Page 2"><span>Toys</span></a></li>    <li><a href="#" title="Page 3"><span>About Us</span></a></li>    <li><a href="#" title="Page 4"><span>Contact</span></a></li></ul></div><span  /><br />

(最后的’clearit’跨度用于设置清除：在需要它的菜单之后)

无论如何,我已经在很多网站上看到了这个标记的变体,有些带有额外的封闭< div&gt ;,有些使用与当前不同的单词,有些将当前类附加到< a>.标记而不是< li>,有些遗漏了内部< span>.每个人似乎都有自己的菜单标记方式,这只是一点点不同.

无论如何,在修补了很多菜单后,上面就是我想出来的,但我想弄清楚是否有一个实际建立的最佳实践.我想在某些时候建立一个简单的CSS菜单代工厂,并且在继续之前获得对标记的一些输入会很好.

编辑：问题不是关于JavaScript菜单.我知道有很好的脚本菜单,它们允许你有子菜单,更高级的动画和悬停时间,快捷键,阴影和其他一切.但是90％的菜单不需要这些功能,并且使用CSS进行样式设置和悬停效果要好得多.

解决方法 除了剥离span标签,我认为它很好.

没有理由将它们与您的设置相提并论,您可以根据需要设置文本样式

li a {/*styles*/}

你也应该能够删除

<span  /><br />

部分也是如此.如果你试图只漂浮div中的ul,你可能会废弃div.如果由于其他原因你需要清除,你可以做一个

<br clear="all"/>

总结

以上是内存溢出为你收集整理的html – CSS样式菜单标记的最佳实践是什么？全部内容，希望文章能够帮你解决html – CSS样式菜单标记的最佳实践是什么？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。