简单的 CSS 面包屑导航如何工作
我试图模仿这个关于创建一个简单的苹果主题面包屑的教程: http:// www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx
即使在查看更新的示例并从此处下载源代码之后: http://www.lostsockdesign.com.au/apple-breadcrumb/index.html html
我不知道如何只有 HTML 和 CSS“知道”当前是哪个页面。
显然,如果您的浏览器指向“http://www.lostsockdesign.com .au/apple-breadcrumb/index2.html”浏览器知道您在这个页面上,但是 HTML 或 CSS 的哪一部分指定面包屑应该忽略后续页面的图形,并淡出当前页面图形?
抱歉,这个简单的问题.. xD
更新:
好的,现在问题已经解决了,有人可以建议最简单的方法来实现脚本与此图一起工作吗?
I am trying to imitate this tutorial about creating a simple Apple-themed breadcrumb found here:
http://www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx
Even after looking at the updated example and downloading the source code from here:
http://www.lostsockdesign.com.au/apple-breadcrumb/index.html
I cannot tell how only the HTML and CSS "knows" which page it is currently.
Obviously, if your browser is pointed to "http://www.lostsockdesign.com.au/apple-breadcrumb/index2.html" the browser knows you are on this page, but what part of the HTML or CSS specifies that the breadcrumb should leave out the graphics for the subsequent pages, and fade out the current page graphic?
Sorry for the simple question.. xD
UPDATE:
OK, now that that's solved, anyone have a suggestion for the simplest way to effect a script to work with this tut?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
事实并非如此。
该教程只是用于样式设置,而不是用于生成面包屑;您必须自己通过某种脚本或手动完成该部分。
回复:更新
面包屑本质上是您网站树上的当前路径。从站点地图开始(不是 XML、SEO 意义上的,而是站点的实际页面结构。例如:
因此,如果您在“CSS 重置文件”页面上,您可以从(不是显示)根目录,并显示您在面包屑中找到的每个级别,结果是:
此数据可以存储在数据库中并使用您选择的服务器端语言提取,也可以使用服务器根据目录结构自动生成端或客户端脚本,或者您可以将它们手动编码到每个页面中,
具体操作方式完全取决于您,但这是基本概念。
It doesn't.
That tutorial is simply for styling, not for generating the breadcrumbs; you have to do that part yourself, through some sort of scripting or manually.
Re: Update
Breadcrumbs are essentially the current path down the tree that is your site. Start with a site map (not in the XML, SEO sense, but in the actual page structure of your site. For instance:
So, if you're on the page "CSS Reset Files", you follow the tree from the (not shown) root, and show every level you find in the breadcrumbs, resulting in this:
This data can be stored in the database and pulled out using the server side language of your choice, or it could be automatically generated based on directory structure using server-side or client-side scripts, or you could manually code them into each of your pages.
How you do it is entirely up to you, but this is the basic concept.
您不使用 HTML 和 CSS(CSS3 有一些像这样的有限功能,但我认为它们还没有完全准备好迎接黄金时间)来确定您所在的页面。通常,服务器端软件(例如 CMS)用于输出面包屑,并附有 CSS 类名称,指示哪个页面是当前页面等。
You don't use HTML and CSS (CSS3 has some limited features like this, but I don't think they're quite ready for prime time yet) to figure out what page you are on. Usually server side software (such as a CMS) is used to output the breadcrumbs, complete with CSS class names that indicate which page is the current one etc.