ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSレイアウトで注意すべきいくつかのポイント
Web ページのレイアウトは、ユーザー エクスペリエンスと Baidu のランキングに大きな影響を与えます。Web サイトのコンテンツがどれほど優れていても、デザインから画像を取得する場合は役に立ちません。画像を分析して初めて適切な CSS レイアウトを作成できます。
Webページのアート写真を分析する際には、その写真が見栄えが良いかどうかを分析するのではなく、CSSレイアウト分析に基づいてWebページのアート写真を分析します。後続の HTML ページの CSS 再構築ステップが記述しやすいかどうかに直接影響します。
レイアウトの知識:
DIV+CSSレイアウト、CSSレイアウトは、divタグ+cssスタイルシートコードによって開発および制作されるWebページ(html)の総称です。
div+css レイアウトの利点: 保守が簡単、SEO に有益 (Google は Web ページを開く速度をランキング要素および SEO 要素として使用します)、Web ページを開く速度が速く、Web 標準に準拠します。
div+css ウェブページを作成する前にレイアウトを考えます:
まずウェブページのアート画像を取得し、上下、上部、中央と下部、左と右、上部と下部のレイアウトの枠組みからそれを考えます。真ん中(左右含む)。
以下は、CSS レイアウト分析を説明するための例です。CSS レイアウトを分析するために DIVCSS5 リスト ページを使用します。
まず、DIV CSS レイアウトを分析し、このページの構造フレームワークを再構築することができます。上部、中央、下部の構造には左右の構造が含まれます。 そのため、このページの CSS と HTML を記述するときは、まず CSS と HTML を上から下、外側から内側に記述する必要があります。 最初に Web フォルダーを作成し、このフォルダー内にindex.html という名前の新しい HTML ページと、index.css という名前の CSS ファイルを作成します。ここでのコツは、テンプレートをインポートして CSS と HTML の初期ページを構築し、次に CSS ファイルを HTML に参照します。これは、テンプレートで紹介した CSS テンプレートです。その後、CSS テンプレートに基づいて CSS を記述して追加します。 以下は、index.html の HTML コードです: 以下は引用内容です:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css布局案例实验页面-www.divcss5.com.cn</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">我是头部(上)</div> <div id="centers"> <div class="c_left">我是中的左</div> <div class="c_right">我是中的右</div> <div class="clear"> </div> </div> <div id="footer">我是底部(下)</div> </body> </html> index .css的CSS代码如下:以下は引用内容です:
body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;} ol, ul ,li{list-style: none;} img {border: 0;} body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;} .clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;} .clear{clear:both;height:1px; margin-top:-1px; width:100%;} .dis{display:block;} .undis{display:none;} /*此上面代码是初始CSS模板,下面是新写CSS布局框架代码*/ #header ,#centers ,#footer{ width:100%; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;} #header{ height:68px; border:1px solid #CCCCCC; } #centers{ padding:8px 0;} #footer{ border-top:1px solid #CCCCCC; background:#F2F2F2;} #centers .c_left{ float:left; width:230px; border:1px solid #00CC66; background:#F7F7F7; margin-right:5px; } #centers .c_right{ float:left; width:500px;border:1px solid #00CC66; background:#F7F7F7}これら 2 つのコードを試して、新しいコードを作成することができます。上記のアートページCSSとHTMLフレームワークをレイアウトし、それぞれのコンテンツに応じてCSSとHTMLソースコードを追加していきます。
超軽量 Web フロー レイアウト JS プラグイン Macy.js
HTML のレイアウト タグとリスト タグの図による詳細な説明
以上がCSSレイアウトで注意すべきいくつかのポイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。