html - 显示用于网页导航的平铺 Sprite 图像

Question

我正在尝试对我网站的导航栏进行编程，以便在选择该页面时， Sprite 索引会发生变化，以像按钮一样突出显示其背后的背景。

Sprite 是垂直平铺的，所以第一个按钮在第一个平铺中突出显示，第二个按钮在下一个平铺中突出显示。

但是我也在使用 weebly 并且我正在尝试自己编写越来越多的程序来学习，所以导航代码是自动完成的因此我不确定如何实现它所以当选择页面时后面的按钮突出显示。

理论上我知道如何去做，我只是不确定要使用什么函数，因为我是 CSS 的新手。我会怎么做是: 1.找出哪个代码将当前网页作为变量返回 2. 使用以下方法计算平铺背景的新位置:(网页位置)* Sprite 高度，或输入:if webpage = menu sprite_position = 1 * sprite_height

关于导航的当前代码是:

#navigation {
  font-family: Ethnocentric, arial, sans-serif;
  position: relative;
  width: 1082px; /*For adjusting the navigation's usable width*/
  height: 29px;
  z-index: 2;
  padding: 11px 0px 0px 45px; /*Fourth argument changes the starting navigation postion*/
  background: url(Ngbck.png) no-repeat;
  _bbbackground: none;
  _fffilter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='files/theme/navigationbg.png', sizingMethod='crop');
}

#navigation ul li {
  float: left;
  font-size: 16px;
  text-transform: uppercase;
  padding: 0px;
  margin: 4px 0px 0px 40px;
}

#navigation ul li a {
  color: #0bf;
}

#navigation ul li a:hover, #navigation ul li#active a {
  color: #f00;
}

#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 13px 0px 0px 0px; }
#weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
#weebly-menus .weebly-menu li { float: left; clear: left; width: 168px; text-align: left; }
#weebly-menus .weebly-menu li a { position: relative; display: block; width: 148px; background: #001020; border-top:  none; border-bottom: 1px solid #404a51; border-right: 1px solid #404a51; border-left: 1px solid #404a51; text-decoration: none; font-size: 12px; font-weight: normal; line-height:1; padding: 8px 6px 8px 12px; color: #0bf; }
#weebly-menus .weebly-menu li a:hover { background: #131f28; color: #c00; }

Answer 1

Weebly 的引擎添加了

#active

当前所选菜单的 LI 元素的标识符。此标识符应用于菜单中的列表元素，并且会根据您当前所在的页面而变化。

所以我认为为了修改此类菜单的外观，您需要添加选择器，例如 #navigation ul li#active 或 #navigation ul li#active a (取决于效果)在模板编辑器中 CSS 文件的末尾 - 所以您的自定义样式被选中。

人们还没有太多机会访问呈现 Weebly 页面的代码 - 但有一些特定的规则 - 所以人们已经为 Weebly 设计了客户模板(企鹅的模板？)

彼得