div+css Webページの大まかなレイアウト_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

div+css Webページの大まかなレイアウト_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:21 AM

ブラウザを開いて、図に示すように主要な 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を作成しました:

声明

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

HTMLの目的：Webブラウザがコンテンツを表示できるようにするMay 03, 2025 am 12:03 AM

HTMLの中心的な目的は、ブラウザがWebコンテンツを理解して表示できるようにすることです。 1。HTMLは、タグなどのタグを介してWebページの構造とコンテンツを定義します。 3.HTMLは、ユーザーの相互作用をサポートするフォーム要素を提供します。 4. HTMLコードの最適化は、HTTP要求の削減やHTMLの圧縮など、Webページのパフォーマンスを改善できます。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。

お使いの携帯電話でネイティブセレクトを使用することにより、どのような問題が発生しますか？Apr 30, 2025 pm 03:15 PM

携帯電話でネイティブセレクトを使用する際の潜在的な問題は、モバイルアプリケーションを開発するときに、ボックスを選択する必要があることがよくあります。通常、開発者...

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？Apr 30, 2025 pm 03:12 PM

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？モバイルデバイスでアプリケーションを開発する場合、適切なUIコンポーネントを選択することが非常に重要です。多くの開発者...

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 中国語版

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

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。