0

矢印

だから私はzurbのファンデーションを使っていて、上の画像のデザインを完成させようとしています. 私はいくつかの異なる方法を考え出しましたが、最も信頼できる方法は単にこのようなものです.

.large-2.columns
  %h3 Our Products
.large-10.columns
  .arrow

ご覧のとおり、これにより、製品セクションと会社概要セクションの矢印が同じ幅になります。私が探しているのは、これらのニーズが確実に満たされるようにするための最も効率的な方法です。

  • 矢印と h3 は可変幅です
  • 矢印の品質は可変幅で変化しません (線/矢印/その他はすべて同じ幅です)
  • トンのマークアップやトンのサスを持っていないことが望ましいです。

ありがとう！

4

1 に答える 1

0

これを実現するには、:before および :after 疑似要素 (コンテンツと共に) を使用することをお勧めします。IE6/7 をサポートする必要がない限り、もっと醜いことをしなければならないと思います。

:before は、ターゲット要素内にコンテンツを挿入することに注意してください (ただし、ターゲット要素内の子要素の前、および :after 要素についても同じことが言えます - 子要素の後にコンテンツを挿入するだけです)。ただし、絶対配置を使用すれば、hr 要素を 1 つだけ使用することもできます。

CSS:

h3 {
  font-size: 0.85em;
  float: left;
}
hr {
  clear: none;
  background-color: #fff;
  margin-top: 0.75em;
  border-style: solid;
  border-color: green;
  border-width: 0 0 1px 0;
}
hr:before {
  content: '';
  position: absolute;
  background-color: red; /* can remove this, only for testing */
  display: block;
  width: 20px;
  height: 10px;
  margin-top: -5px;
  background-position: 0 0; /* set to correct pos for your sprites.gif background-image */
}
hr:after {
  position: absolute;
  background-color: red; /* can remove this, only for testing */
  right: 0.9375em;
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background-position: 0 0;
}

HTML

<div class="row">
  <div class="large-12 columns">
    <h3>OUR PRODUCTS</h3><hr>
  </div>
</div>

矢印に背景画像のスプライトを使用し、正しい xy 座標を入力します。(背景色: 赤は、これが機能することを示すためのものです)

于 2013-09-21T16:02:23.110 に答える