Rumah >hujung hadapan web >html tutorial >面包屑 CSS_html/css_WEB-ITnose

面包屑 CSS_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 12:26:561009semak imbas

首先祝大家,在新年里,好的、善良的都都马上有。

关于css实现面包屑已经是一个典型例子了。不过今天还是与大家分享一下实现的原理。
原理:每一段元素固定宽度并向左浮动,头尾突出部分相对父元素用相对定位固定位置,默认为同一颜色,高亮设置指定样式。

详解见下图:


合并小图标,减少链接请求数量



DEMO:

面包屑
  • 1 第一项
  • 2 第二项
  • 3 第三项
  • 1 第一项
  • 2 第二项
  • 3 第三项
  • 4 第四项
  • 1 第一项
  • 2 第二项
  • 3 第三项
  • 4 第四项
  • 5 第五项

运行代码

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn