ブラウザを開いて、図に示すように主要な Web サイトのナビゲーション ホームページを表示します。
たとえば、基準オブジェクトを見たとき、最初からそれを描画するのではなく、まず幾何学的な下書き線を決定し、オブジェクトのおおよその範囲と比率を決定します。 Web ページも同様で、div+css レイアウトになります。
ここで、ide や notepad++ などの編集ツールを開いて、コードの作成を開始します
と、カラーピッキングや測定などに使用されるスクリーンショット測定ツール faststone Capture を使用します
まずはコーディングを急がなくて、ラフを描きましょうフレームワークをレイアウトする方が便利です
設計図を作成したら、比例サイズに従って div+css レイアウトを書き始めます
測定ツールを開き、定規を取り出し、そして編集ツール
HTMLコードを書いて下書きエフェクトのようにし、別の.cssを作成して後で書きます
<html><head><link rel="stylesheet" type="text/css" href="home.css"/> <!--外联css的固有格式，href指向调用的.css文件--><meta http-equiv="content-type"type="text/html charset=utf-8"/> <!--字符编码设置成utf-8--><title>home</title> <!--标题设置--></head><body><div id="spe">火狐主页</div> <!--div+css盒子模型,id选择器复用性低，但优先级高，class选择器，反之亦然--><div id="sea">搜索栏</div><div id="ads">广告</div><div class="diva"><div class="div1">网页导航</div><div class="div2">洋葱新闻</div><div class="div1">官方新闻</div><div class="div2">读书推荐</div></div><div id="spt">关于我们</div></body></html>
今すぐ.cssファイルを書き始めます
*{margin:0px; /*外边距初始值置0*/padding:0px; /*内边距初始值置0*/} 測定作業が始まり、幅と高さのホームページバー
#spe{ /*id选择器以#打头*/width:1366px;height:39px;border:1px solid black; /*边框为1px，黑色*/background:#00A2E8; /*颜色的hex值，16进制*/} 検索バーの計測
#sea{width:1366px;height:109px;border:1px solid black;background:#99D9EA;} 広告の計測
#ads{width:1016px;height:63px;border:1px solid black;background:#ED1C24;} このとき、広告ボックスが当初の予想から逸脱していることがわかりました。
reft左マージンからターゲットピクセルまでの距離を測定するために、他のボックスを配置するために大きなDCボックスをセットアップします。最後のDCボックス
#ads{width:1016px;height:63px;border:1px solid black;background:#ED1C24;margin-left:169px;} 全体的な効果が出ます
CSSコードの全体的な効果
.diva{ /*class选择器以.开头*/width:1016px;height:583px;border:1px solid black;margin-left:169px; /*外边距右移*/} ボックスの概念については、次のようなpptを作成しました:
＆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;の目的は何ですか 要素？Mar 21, 2025 pm 12:33 PMこの記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？Mar 21, 2025 pm 12:35 PMこの記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？Mar 20, 2025 pm 05:56 PMこの記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？Mar 17, 2025 pm 12:27 PMこの記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？Mar 12, 2025 pm 04:05 PMこの記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？Mar 17, 2025 pm 12:20 PM記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？Mar 20, 2025 pm 06:05 PMこの記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
ホットトピック
7439
15136952