Question

我正在尝试对网站的导航栏进行编程，因此当选择该页面时，精灵索引会更改以突出显示其背后的背景，如按钮。

精灵垂直平铺，因此第一个按钮在第一个图块中突出显示，第二个按钮在下一个图块中突出显示。

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

理论上我理解如何去做，我只是不确定使用什么函数，因为我对CSS完全不熟悉。我怎么做的是： 1.确定哪个代码将当前网页作为变量返回 2.使用以下方法计算平铺背景的新位置:(网页位置）*精灵高度，或键入：如果网页=菜单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元素的标识符。此标识符将应用于菜单中的列表元素，并根据您当前的页面进行更改。

所以我认为为了修改这种菜单的外观，您需要在模板编辑器的CSS文件末尾添加#navigation ul li#active或#navigation ul li#active a（取决于效果）等选择器 - 这样您的自定义风格被选中。

一个人无法访问呈现Weebly页面的代码 - 但是有一些特定的规则 - 所以人们已经为Weebly设计了客户模板（Penguins的模板？）

彼得

显示用于网页导航的平铺精灵图像

1 个答案: