フロントエンドの実践デモ: 1 枚の画像で 1 ページのレイアウトを完成_html/css_WEB-ITnose
デザイナーから設計図や素材を受け取り、必要に応じてカットするのはフロントエンドプログラマーにとって必要な基礎スキルですが、一般的なプログラマーは写真のカットにあまり慣れていない可能性があります。 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を利用することもできます。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック









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

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

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

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

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

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

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

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