CSSレイアウトのテクニックとは何ですか？-CSSチュートリアル-php.cn

CSSレイアウトのテクニックとは何ですか？

php中世界最好的语言

リリース： 2017-11-23 14:07:17

オリジナル

2010 人が閲覧しました

CSSはどのように配置すればよいですか? CSSレイアウトを設計する際に注意すべき点は何ですか? CSSレイアウトのテクニックとは何ですか？今日はそれらを一つずつまとめていきます。適切な CSS レイアウトを作成する方法。

グラフィックデザイナーから取得した PS (画像) を CSS 再構成ツールでリファクタリングする場合、Web ページのアート画像を分析する必要があることは誰もが知っています。

そのため、Webページのアート写真を分析する際には、DIV CSSレイアウトが大きな割合を占めますが、写真が見栄えが良いかどうかを分析するのではなく、CSSレイアウトに基づいてWebページのアート写真を分析します。、CSS レイアウト分析は、HTML ページの将来の CSS 再構築に直接影響します。これは簡単な手順で記述できますか?

レイアウトの知識:

DIV+CSSレイアウト、CSSレイアウトは、divタグ+cssスタイルシートコードによって開発および制作されたWebページ(html)の総称です。

div+css レイアウトの利点: 保守が簡単、SEO に有益 (Google は Web ページを開く速度をランキング要素および SEO 要素として使用します)、Web ページを開く速度が速く、Web 標準に準拠します。

div+css ウェブページを作成する前にレイアウトを考えます:

まずウェブページのアート画像を取得し、上下、上部、中央と下部、左と右、上部と下部のレイアウトの枠組みからそれを考えます。真ん中（左右含む）。

以下は、CSS レイアウト分析を説明するための例です。

まず、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 "> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css布局案例实验页面</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 ソースコードを追加していきます。

CSS レイアウトの重要性と説明は皆さんすでに理解されていると思います。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注目ください。

HTMLテーブルスタイル

CSSでmin-heightとmax-heightを使用する方法

css3で円形画像を表示する方法

以上がCSSレイアウトのテクニックとは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。