フロントエンドの実践デモ: 1 枚の画像で 1 ページのレイアウトを完成_html/css_WEB-ITnose

デザイナーから設計図や素材を受け取り、必要に応じてカットするのはフロントエンドプログラマーにとって必要な基礎スキルですが、一般的なプログラマーは写真のカットにあまり慣れていない可能性があります。 Photoshop を使用するのに多くの時間が費やされるため、カットの手間を軽減する方法を紹介します。つまり、1 枚の画像を使用してページ全体のページ レイアウトを完成させます。もちろん、画像をカットするコストを節約するだけでなく、特に HTML や CSS を使用して復元するのが難しく、実際にはそれほど多くの要素が存在しない派手なデザインの場合には、非常に効果的なフロントエンド開発方法です。操作可能な要素。

実際、これは単なる文です。空の HTML 要素を使用して、操作する必要がある画像要素を選択します。例

ボタン、入力ボックス、入力ボックス クラスなど、操作する必要があるコンポーネントは 1 つまたは 2 つだけです。 、画像内の他の要素は静的な表示デザインとしてのみ存在するため、これらのいくつかの要素を具体的に切り取ってページに書き込むことは明らかに少し複雑であり、それらの間には相対的に重複するなどの問題が発生する可能性もあります。位置や過剰な間隔。次に、空の div タグを使用して、上の図の入力領域とボタン領域を囲み、入力要素またはボタン要素を空の div に追加できます。もちろん、スタイルは設計図面と一致している必要があります。

したがって、上の図の例では、私が指定したページのメインコードは次のようになります:

Html コード:

<div class="container">    <div class="btn">        <input id="tel" type="text" placeholder="">    </div></div>

CSS コード:

.container{    position: absolute;    background:url("imgs/1.jpg");    background-size: 100% 100%;    background-repeat: no-repeat;    }.btn{    position: absolute;    margin-top: 40%;    margin-left: 20%;<br />　　 width: 55%;<br />　　 height: 20%;    display: none;  }

ここでは空の div が使用されているため入力領域またはボタン領域で画像を枠付けします。元の画像スタイルを維持するには、実際の入力領域またはボタン領域の表示をなしに設定する必要があります。もちろん、JavaScript 設定を使用する必要があります。入力領域とボタン領域にフォーカスがあると、入力領域とボタンが表示されます。 inline input の onfocus 属性を直接記述することもできます:

onfocus="this.style.display='block'"

もちろん、上の 2 つの写真は比較的単純なデザインの写真ですが、もっと複雑な写真だったらどうでしょうか。

実際、操作方法は同じですが、空のdivの位置、幅、高さを写真のデザインに合わせて調整するだけです。

なぜ位置、幅、高さのサイズ測定にパーセンテージを使用するのかと疑問に思う人もいるかもしれません。もちろんレスポンシブデザインです。ピクセルを使用する場合は、1 つの画面アスペクト比と解像度にのみ適用できます。パーセンテージを使用する場合は、さまざまな画面特性の下でも高度なデザイン復元を維持できます。

上記はHTML要素のonfocus属性を利用していますが、実はjQueryを利用することもできます。