0

PSDファイルをコードに変換しようとしていますが、これらのヘッダーに問題があります。ヘッダーには、ヘッダーの名前と、名前の末尾の右側からdivの末尾まで伸びる紫色の水平バーが含まれます。Foundation（レスポンシブフレームワーク）を使用しているため、ヘッダーの幅を3列にしました。コードをいくつか書きましたが、タイトル名の下に紫色の線が表示されないようにする方法がわかりません。

現在、紫色の線をタイル化可能な画像として保存し、h3タグの背景として設定しています。背景の位置で遊んでみましたが、タイトル名の下に線が出ないのがわかりません。

これはPSDファイルの一部のスクリーンショットです。明確にするために、、、の横にある紫色のバーHoursは、ユーザーが情報を入力するためのものではありませんPhone。Locationこれは、情報のさまざまな領域を分離するために使用される装飾的な部分です。

ここに画像の説明を入力してください

私のコード：

<div class="row">
    <div class="three columns offset-by-one contact">
        <h3>Hours</h3>
    </div>
</div>

.contact h3 {
    color: #444;
    background: url(../img/purpleLine.jpg) bottom right repeat-x;
}
4

2 に答える 2

0

必要な紫色と厚さの下の境界線を持つdivを作成するだけです。それからそれを左に浮かせてください、そしてそれはあなたにあなたの望ましい効果を与えるでしょう。必要に応じて、そのdiv内にテキストボックスを配置することもできます。

于 2012-10-07T22:47:57.100 に答える
0

これは、HTML要素を使用するのに最適な時期<span>です。これは、本来の目的とほぼ同じです。要素の後に、を追加<span></span>し、必要な幅を指定して、スパン要素の背景画像を設定します。フレームワーククラスを使用して幅を定義する方法がわからないため、その部分に「何でも」を入れます。スパン要素にクラスを割り当てて、その幅を定義できる場合もあります。

HTML：

<div class="row">
    <div class="three columns offset-by-one contact">
        <h3>Hours</h3><span></span>
    </div>
</div>

CSS：

.contact h3 {
    color: #444;
}
.contact span {
width:whatever;
background: url(../img/purpleLine.jpg) bottom right repeat-x;
}
于 2012-10-08T02:31:30.350 に答える