如何做用html 面包屑导航 例如 百度知道>>电脑网络>>程序设计>>其他语言 像这样的面包屑导航

如何做用html 面包屑导航 例如 百度知道>>电脑网络>>程序设计>>其他语言 像这样的面包屑导航,第1张

3L基本正确,不过一般路径不会是直接的链接,因为用户使用网页一直在改变当前页面,所以可以给<a>标签一个target属性,当用户点击不同的<a>标签时用js控制target具体指向的页面。

首先,我们打开自己电脑上的网页编辑器,我以DW软件为例。我们新建一个HTML文档。

然后我们在HTML的body部分开始写我们的代码。面包屑导航是横排的几个文字和图片的组合。

我们可以用ul>li,或者dl>dt>dd来实现。因为这两个都可以横着在一行显示。

我以dl>dt>dd为例。我们在html页面中写入dl和dd标签。这个导航的class我们一般使用breadcrumb,这个比较通用。

我们在dd标签中输入部分文字。按下F12,查看不写样式页面在浏览器中的效果。可以看到不写样式,三段文字是竖着排列的。

我们需要让三个dd标签横着排列,我们在style中将dd标签设为行内元素。默认情况下dd是有margin-left的,我们需要将其设为0;

这样一个简单的面包屑导航就做好了,一般导航是可以点击的链接,我们可以再为其添加上a标签。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7574436.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-07
下一篇 2023-04-07

发表评论

登录后才能评论

评论列表(0条)

保存