検索
ホームページウェブフロントエンドhtmlチュートリアル[転送] Div+CSSレイアウト入門tutorial_html/css_WEB-ITnose

出处:蓝色理想    责任编辑:moby

 

在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。

 

下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:

  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;
  2、内容部分又可分为侧边栏、主体内容;
  3、底部,包括一些版权信息。
  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:

根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。

  DIV结构如下:
  │body {} /*这是一个HTML元素,具体我就不说明了*/
  └#Container {} /*页面层容器*/
     ├#Header {} /*页面头部*/
     ├#PageBody {} /*页面主体*/
     │ ├#Sidebar {} /*侧边栏*/
     │ └#MainBody {} /*主体内容*/
     └#Footer {} /*页面底部*/

至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。

 

接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:

 

 





无标题文档 title >

head >


body >
html >

   

 

 

   

这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。

下面,我们在

标签对中写入DIV的基本结构,代码如下:

 


[color=#aaaaaa][/color]
  
  
[color=#aaaaaa][/color]
    
    
[color=#aaaaaa][/color]
    

  

  
  

今後、コードを読みやすくするために、css.css ファイルを開いて CSS 情報を記述します。



/* 基本情報*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*ページレイヤーコンテナ*/
#container {width:100%}

/* ページヘッダー*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*ページボディ*/
#PageBody {width: 800px;margin:0 auto;height: 400px;background:#CCFF00}

/*ページの下部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}


 

上記のファイルを保存し、ブラウザで開くと、これがページの基本構造を確認できます。

上記の CSS に関する説明 (詳細については、オンラインでダウンロードできる CSS2.0 の中国語マニュアルを参照してください):

1. コメントの習慣を身につけてください。これは非常に重要です。

2.ページ上のすべてのコンテンツはこのタグ ペア内に記述する必要があります。これ以上は説明しません。

ここでは略語が使用されています。コードは次のようになります。 font-size:12px; フォント サイズが 12 ピクセルで、フォントが Tahoma 形式であることを示します。完全なバージョンは次のようになります。


margin-top :0px;margin-right:0px;margin-bottom:0px;margin-left:0px

または

margin:0px 0px 0px 0px

順序は上/右/下/左です。 write margin:0(略称);

上記のスタイルは、ボディ部分の上下左右の余白が0ピクセルであることを示します

以下のようなものもあります。書き込みメソッド:

margin:0px auto;

上下のマージンが 0px であることを示し、左右は自動的に調整されます
将来使用するパディング属性はマージンと多くの類似点があります。 ,

ただし、マージンは外部距離、パディングは内部距離です。


text-align:center
テキストの配置は左、右、中央に設定できます。ここでは中央揃えに設定します。

background:#FFF

背景色を白に設定します。ここでの色には省略形が使用されます。完全な色は、background:#FFFFFF である必要があります。

background は、指定したレイヤーを背景色と背景画像で埋めるために使用できます。将来的には次の形式を使用します。
background:#ccc url('bg.gif') 左上 no-repeat; を意味します。 #CCC (グレースケール カラー) はレイヤー全体を塗りつぶし、背景画像として bg.gif を使用します。

左上

は画像が現在のレイヤーの左上端に配置されることを意味し、no-repeat は画像のみを意味します。レイヤー全体を塗りつぶさずにサイズが表示されます。
top/right/bottom/left/center
は、背景画像を配置するために使用されます。つまり、それぞれ、top/right/bottom/left/center を使用することもできます。
background:url('bg.gif') 20px 100px;
は X シートを意味します。マークは 20 ピクセル、Y 座標は 100 ピクセルの正確な位置決めです。
repeat/no-repeat/repeat-x/repeat-y
はそれぞれ、レイヤー全体を塗りつぶす/塗りつぶさない/X に沿って塗りつぶすことを意味します。 Y 軸に沿った軸/塗りつぶし。

height / width / color
はそれぞれ高さ (px)、幅 (px)、フォントの色 (HTML カラー システム テーブル) を表します。

4. ページを中央に配置するにはどうすればよいですか?

コードを保存すると、ページ全体が中央に表示されることがわかります。では、ページが中央に表示されるのはなぜでしょうか。

これは、 #container で次の属性を使用したためです:
margin:0 auto;

前の手順によると、上下のマージンは 0、左右のマージンは自動であることがわかります。そのため、レイヤーは自動的に中央に配置されます。

ページを左側に表示したい場合は、デフォルトで左側に表示されるため、自動値をキャンセルしてください。

margin:auto を使用すると、レイヤーを自動的に中央に簡単に配置できます。


5. ここでは一般的に使用される CSS プロパティのみを紹介します。その他については、CSS2.0 の中国語マニュアルを参照してください。



ページの大まかな DIV 構造を記述したら、各部分の詳細な作成を開始できます。

前の章では、いくつかのスタイルを作成しました。これらのスタイルは、css.css 内のすべてのスタイルをクリアし、次のスタイル コードを再作成しました:

/* 基本情報*/

ボディ { フォント: 12px マージン: 0px; テキスト整列: 背景: #FFF; }

a: リンク、a: 訪問済み { フォントサイズ: 12px; } :hover {}

/* ページレイヤーコンテナ*/

#container { width : 800px ; margin : 10px auto }


 

スタイルの説明:

a:link,a:visited {font -size:12px; text-decoration:none;}
a:hover {}

これらの 2 つの項目は、ページ内のハイパーリンクのスタイルを制御します。詳細については説明しません。

#container {幅:800px;マージン:10px 自動}

ページ全体の表示領域を指定します。
width:800px は幅を 800 ピクセルに指定し、実際のニーズに応じてここで設定します。
margin:10px auto、ページの上下の余白は 10 ピクセルで、ページは中央揃えになります。
前の章で説明したように、レイヤーのマージン属性の左右のマージンを自動に設定すると、レイヤーを中央に配置できます。

次に、TOP 部分の作成を開始します。TOP 部分には、ロゴ、メニュー、バナーが含まれています。以下は、FW で完成したスライスです。 TOP 部分は 2 つの部分に分かれており、最初の部分にはロゴと水平線が含まれます。ロゴ画像にはあまり多くの色がないため、この部分を GIF 形式で保存しました。パレットの選択は正確で、アルファ透明度が選択され、カラー バージョンは白 (ここの色は背景色と同じである必要があります) でした。ロゴ .gif としてエクスポートされ、画像の幅は 800 ピクセルです。

この時点で、何人かの友人が、 * なぜ GIF 形式を使用するのですか? JPEGを使ったほうがいいんじゃないでしょうか?

GIF 形式の画像ファイルは小さいため、ページの読み込みが速くなります。もちろん、GIF 形式を使用する場合は、画像に多くの色が使用されていないことを確認する必要があります。肉眼ではどの程度変化するかは写真では確認できないため、これは可能です。

* 次のバナー部分でも GIF 形式を使用できますか?

答えはノーです。バナー部分は詳細な画像なので、GIF形式を使用すると色が失われすぎるため、JPEG形式を使用してファイルをbanner.jpgとしてエクスポートする必要があります。

* 適切なスライス方法が CSS の記述の容易さとページの読み込み速度を決定するため、合理的なスライスは非常に重要です。


スライスを切り取った後、TOP 部分を分析し、ヘッダーに DIV 構造を書き込む必要があります。 コードは次のとおりです。メニューのフォームは後で簡単にカスタマイズできます。

そして、なぜ次のコードを追加する必要があるのでしょうか?

  • を使用してメニューを作成します

    このセクションを開始する前に、前のセクションを参照して、index.htm および css.css ファイルに DIV と CSS が書き込まれていることを確認してください。

    このセクションでは、list

  • を使用してメニューを作成する方法を説明します。

    li > a href ="#" > "menuDiv" > li >

    / a >/ li > li > > / a li > ;

    /a >/li > >について

     

    この部分の 2 つの HTML 要素

      および
    • の主な機能は、HTML 内のリストを使用して情報を表示することです。

      HTML で id="divID" として定義されている場合、HTML で class="divID" として定義されている場合、CSS での対応する設定構文は #divID{} になります。 、CSS の対応する設定構文は .divID です。

      如果id="divID"这个层中包括了一个[転送] Div+CSSレイアウト入門tutorial_html/css_WEB-ITnose,则这个img在CSS中对应的设置语法应该是#divID img {},同样,如果是包含在class="divID"这个层中时,则设置语法应该是.divID img {},这一点希望大家要分清楚了。

      另外,HTML中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中设置它们,则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。

      按照上面的介绍,我们先在css.css中写入以下代码:

      #menu ul { list-style : none ; margin : 0px ; }
      #menu ul li { float : left ; }

         

       

      解释一下:

      #menu ul {list-style:none;margin:0px;}
      list-style:none,这一句是取消列表前点,因为我们不需要这些点。
      margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。

      #menu ul li {float:left;}
      这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。

      到这一步,建议大家先保存预览一下效果,我们再添加下面的内容,效果如下:

      这时,列表内容是排列在一行,我们在#menu ul li {}再加入代码margin:0 10px

       

      #menu ul {list-style:none;margin:0px;}
      #menu ul li {float:left;margin:0 10px}

         

       

      margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px),预览的效果如下:

      现在,雏形已经出来了,我们再来固定菜单的位置,把代码改成如下:

      #menu { padding : 20px 20px 0 0 }
      /* 利用padding:20px 20px 0 0来固定菜单位置 */
      #menu ul { float : right ; list-style : none ; margin : 0px ; }
      /* 添加了float:right使得菜单位于页面右侧 */
      #menu ul li { float : left ; margin : 0 10px }

         

       

      这时,位置已经确定了,可是构思图中,菜单选项之间还有一条竖线,怎么办呢?
      别忘了,我们早就已经留好了一个空的

    • 声明
      この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
      HTMLを超えて:Web開発のための重要なテクノロジーHTMLを超えて:Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

      強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

      HTMLのブール属性とは何ですか?いくつかの例を挙げてください。HTMLのブール属性とは何ですか?いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

      ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

      HTMLコードをどのように検証できますか?HTMLコードをどのように検証できますか?Apr 24, 2025 am 12:04 AM

      HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

      HTML対CSSおよびJavaScript:Webテクノロジーの比較HTML対CSSおよびJavaScript:Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

      HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

      マークアップ言語としてのHTML:その機能と目的マークアップ言語としてのHTML:その機能と目的Apr 22, 2025 am 12:02 AM

      HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

      HTML、CSS、およびJavaScriptの未来:Web開発動向HTML、CSS、およびJavaScriptの未来:Web開発動向Apr 19, 2025 am 12:02 AM

      HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

      HTML:構造、CSS:スタイル、JavaScript:動作HTML:構造、CSS:スタイル、JavaScript:動作Apr 18, 2025 am 12:09 AM

      Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

      HTMLの未来:ウェブデザインの進化とトレンドHTMLの未来:ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

      HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

      See all articles

      ホット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衣類リムーバー

      Video Face Swap

      Video Face Swap

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

      ホットツール

      EditPlus 中国語クラック版

      EditPlus 中国語クラック版

      サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

      AtomエディタMac版ダウンロード

      AtomエディタMac版ダウンロード

      最も人気のあるオープンソースエディター

      MinGW - Minimalist GNU for Windows

      MinGW - Minimalist GNU for Windows

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

      ドリームウィーバー CS6

      ドリームウィーバー CS6

      ビジュアル Web 開発ツール

      SecLists

      SecLists

      SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。