先看效果：
就是【商铺】与【江湖】的样式效果。
教程开始：
1.复制下面代码：
1.1这个是商铺的效果代码
<li id=”menu-item-7100e2″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-7100e2″><a href=”#”>商铺<small class=”b2small shop-tips”>上新</small></a></li>
1.2这个是【江湖】的效果代码：
<li id=”menu-item-63939″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-63939″><a href=”#”>江湖<small class=”b2small info-tips”>交流</small></a></li>
2.把代码粘贴到导航标签下面的方框中
3.把这一段<a href=”#”>江湖<small class=”b2small info-tips”>交流</small></a></li>[/rihide]代码中的【#】换成自己导航网址或目录，把【江湖】和【交流】换成自己实际名称。
代码解释：以商铺为例
【<li id=”menu-item-7100e2″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-7100e2″><a href=”#”>商铺<small class=”b2small shop-tips”>上新</small></a></li>】具体功能和结构解析如下：
1. 核心标签与属性解析
| 标签 / 属性 | 名称 | 作用与说明 |
|---|---|---|
<li> | 列表项标签 | 定义无序列表（<ul>）或有序列表（<ol>）中的单个选项，此处用于导航菜单的 “商铺” 选项。 |
id="menu-item-7100e2" | 唯一标识属性 | 给当前列表项分配唯一 ID，通常用于： – 配合 CSS 精准控制该菜单项的样式（如颜色、间距）； – 配合 JavaScript 实现交互（如点击事件、显示 / 隐藏效果）。 |
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7100e2" | 类名属性 | 多个类名用空格分隔，用于批量控制样式或功能： – menu-item：通用菜单项类，统一所有菜单项的基础样式（如字体、对齐）；– menu-item-type-custom：标识该菜单项为 “自定义类型”（非系统自动生成的页面 / 分类链接）；– menu-item-object-custom：与menu-item-type-custom对应，明确菜单项关联的 “对象类型” 为自定义；– menu-item-7100e2：与 ID 呼应的类名，用于更灵活的样式复用。 |
<a href="#"> | 超链接标签 | 导航菜单的点击入口： – href="#"：表示 “空链接”，点击后默认不会跳转页面（仅占位），通常需要通过 JavaScript 补充实际跳转逻辑或交互；– 若需指向具体页面，可将 #替换为目标 URL（如href="/shop"）。 |
<small class="b2small shop-tips">上新</small> | 小型文本标签 | 附加在 “商铺” 文字旁的提示信息： – <small>：HTML 语义标签，默认渲染为较小字体，用于次要信息；– class="b2small shop-tips"：自定义类名，用于控制提示的样式（如红色背景、右上角定位，常见于 “上新”“热点” 等标识）；– “上新”：提示内容，告知用户 “商铺” 板块有新内容更新。 |
2. 实际功能与场景
这段代码通常会嵌套在网页的导航栏（如顶部菜单、侧边栏菜单）中，示例完整结构如下：
html
预览
<!-- 导航菜单容器 -->
<ul class="nav-menu">
<!-- 其他菜单项（示例） -->
<li class="menu-item"><a href="/home">首页</a></li>
<!-- 当前菜单项 -->
<li id="menu-item-7100e2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7100e2">
<a href="#">商铺<small class="b2small shop-tips">上新</small></a>
</li>
<!-- 其他菜单项（示例） -->
<li class="menu-item"><a href="/about">关于我们</a></li>
</ul>
用户在网页中看到的效果通常是：导航栏里的 “商铺” 文字，旁边带着一个小样式的 “上新” 提示，点击 “商铺” 后会触发预设的交互（如跳转到商铺页面、展开下拉菜单等）。
3. 常见修改方向
- 修改跳转链接：将
href="#"改为实际 URL（如href="/shop-list"），实现点击跳转； - 调整提示样式：通过 CSS 修改
b2small或shop-tips类，例如将 “上新” 改为红色背景：css.shop-tips { background: #ff4400; color: white; padding: 2px 6px; border-radius: 3px; margin-left: 5px; } - 移除提示：直接删除
<small class="b2small shop-tips">上新</small>，即可去掉 “上新” 标识。
编辑分享
