0

私がやろうとしていることのサンプル...

したがって、上司は、このデモページ（上記）で作成したウィザードナビゲーションのスタイルを本当に気に入っています。しかし、私がそれを構築したとき、メソッドはやや静的です。つまり、5、6、または10のウィザードステップにはうまく拡張されません。ただし、自然にそれらのステップに拡張する必要があります。

より柔軟に機能するようにcssコードを変更する方法に関するいくつかの推奨事項を入手できますか？私はそれをいじって数時間過ごしましたが、満足のいく結果は得られませんでした。

4

1 に答える 1

2

bordersと疑似要素を使用することが可能です：

.selected:before, .selected:after {
  position: absolute;
  top: 0;
  content: "";
  border-top: 20px solid rgba(0, 0, 0, 0.5);
  border-bottom: 20px solid rgba(0, 0, 0, 0.5);
  border-left: none;
  border-right: 20px solid transparent;
}
.selected:before {
  left: 0;
}
.selected:after {
  right: 0;
  border-right: none;
  border-left: 20px solid transparent;
}

デモ（ChromeとFirefoxでテスト済み）

この例ではSASSを使用していることに気付くでしょう。このように、3つまたは12の場合、1つの場所で1つの変数を変更するだけで済み（$wizard-steps）、他のすべての値が計算され、全幅（および流動的！）に保たれます。これは、動的にする必要がある場合はJavascriptを使用して実行することもできます。

于 2012-10-15T15:04:33.720 に答える