ホームページ > 記事 > ウェブフロントエンド > CSSレイアウトで注意すべきいくつかのポイント

CSSレイアウトで注意すべきいくつかのポイント

php中世界最好的语言オリジナル: 2017-11-20 17:07:181770ブラウズ

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ソースコードを追加していきます。

csslayout_divについて CSSレイアウトの重要性は非常に高いので、お役に立てれば幸いです。上記のケースについては詳しくは説明しませんが、実際に練習することでのみスキルを向上させることができます。

CSSレイアウトで注意すべきいくつかのポイント

関連記事