ホームページ ウェブフロントエンド htmlチュートリアル フロントエンドの実践デモ: 1 枚の画像で 1 ページのレイアウトを完成_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:20 AM

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

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

を直接例として挙げます。一般に、一般的なアプリや WeChat ページには、次のようなページのログイン ページがよくあります:


ボタン、入力ボックス、入力ボックス クラスなど、操作する必要があるコンポーネントは 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を利用することもできます。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles