如何在Blogger中的页面选项卡之间添加分隔符(" /")?

时间:2014-04-08 04:38:38

标签: css blogger

我想在我的博客上的页面标签之间添加一个分隔符,所以它看起来像这样:

关于我/我的工作/联系/博客

我不希望斜线在被割掉时变成绿色。

这是我的博客:http://clairestrick.blogspot.com/

我是新手,我正在使用Simple模板。这是标题和标签的代码:

/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
  padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);
}

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

2 个答案:

答案 0 :(得分:0)

请尝试

<ul>
    <li><a href="http://clairestrick.blogspot.in/p/about-me_25.html">About Me</a>
    <span>/</span></li>
    <li><a href="http://clairestrick.blogspot.in/p/my-work_25.html">My Work</a><span>/</span></li>
    <li class="selected"><a href="http://clairestrick.blogspot.in/p/contact_25.html">Contact </a><span>/</span></li>
    <li><a href="http://clairestrick.blogspot.com/index.html">Blog</a></li>
</ul>

答案 1 :(得分:0)

这有助于您在标签之间添加分隔符

.tabs .widget li:after {
    content: "/";
}