ホームページ > 記事 > ウェブフロントエンド > CSS レイアウト_html/css_WEB-ITnose についての話
CSS レイアウト_html/css_WEB-ITnose についての話
- WBOYオリジナル
- 2016-06-24 11:50:59997ブラウズ
はじめに
このレイアウトは断面図に基づいて HTML ページに変換していますが、導入の目的はこの特定の例に限定されるものではなく、その後のすべてのレイアウト プロセスに使用できます。
始める前に、道を誤ったり、迷走したり、過度に毒されたりすることを防ぐために、いくつかのガイドラインが必要です。
一度に 1 つのステップを実行し、一連のブラウザを使用してそれぞれをテストします。ステップ レイアウトの最初のステップを踏むのは簡単ですが、途中で問題が発生することは予想外です。このような事態を避けるために、私たちが行うすべてのステップは一連のブラウザーでテストされます。こうすることで、レイアウトがどのようになっているのかを明確に確認でき、いくつかの問題を回避できます。
最新のブラウザに基づいて構築するが、上位互換性も持たせる 標準に準拠したブラウザに基づいてレイアウトを構築することが最善ですが、一部の古いブラウザとの互換性も確保します。
HTML コードと CSS を確認する 多くのレイアウトの問題を解決できるように、HTML コードと CSS を頻繁に確認します。
次の 2 つのアドレスが役に立ちます:
① WC3 HTML バリデーター
② WC3 CSS バリデーター
ステップ 1. ブラウザーのサポートを検討してください:
CSS レイアウトの設計を開始する前に、必要なブラウザーについて検討する必要があります。サポートするか、またはどの程度サポートしたいか。顧客、ユーザー、テスト ログ ファイルなどが役立つかもしれません。
ステップ 2. コンテナーのレイアウトを表示する
デザインを見て、主にどのコンテナーで構成されているかを考えます。
ステップ 3. コンテナーに名前を付ける
上記のコンテナーは、ページ レイアウト内でコンテンツが配置されるコンテナーとなるため、
これらのコンテナがページに固有である場合は、クラスの代わりにタグ コードの最後に ID を使用します。これは、他の要素のスタイルを記述するときに重要です。競合が発生すると、ID で識別されるスタイルがクラスで識別されるコードをオーバーライドするためです。
Step4. スタイルとコードを書き始めます
ここではHTML4.01strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">を使用します
その後、ヘッダー情報や文字エンコーディングなどを追加し、外部スタイルにstyle.css
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Page title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> <!--[if IE 6]> <link rel="stylesheet" href="ie6.css" type="text/css" media="screen"> <![endif]--> </head>を付けます
最後に、上で分析した要素のいくつかを追加します:
6c04bd5ca3fcae76e30b72ad730ca86d ba47b51c1d9a4677225a86e24d2d9e29 483fd430d978f2d013b8aa7b8f5be738 dc97c77decd4263fc555f4b3a1fe8199efdd781c51f44595792a60a60e0d283eSkip to content5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68 4a249f0d628e2318394fd9b75b4636b1 Sitename 473f0a7621bec819994bb5020d29372a 16b28748ea4df4d9c2150843fecfba68 008bd371ec9a48c83864687f6f53aa57 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Section 15db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Section 25db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Section 35db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Section 45db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 16b28748ea4df4d9c2150843fecfba68 3e3c05952ed41d38147759ed4980cf51 684271ed9684bde649abda8831d4d355 Archives 39528cedfa926ea0c01e69ef5b2ea9b0 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4December 20145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4November 20145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4October 20145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4September 20145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4August 20145db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 684271ed9684bde649abda8831d4d355 Last 10 Entries 39528cedfa926ea0c01e69ef5b2ea9b0 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Entry 120 (4)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Entry 119 (0)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Entry 118 (9)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Entry 117 (3)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 16b28748ea4df4d9c2150843fecfba68 550837d8de2366c0b1fcae8dc4e335a6 7e594b31ea2ed98c8daf53251aec0770 c1a436a314ed609750bd7c7d319db4da 93de5eb615c25610247f2399cddaee46Heading here5db79b134e9f6b82c0b36e0489ee08ed 2e9b454fa8428549ca2e64dfac4625cd 684271ed9684bde649abda8831d4d355 Sunday, 24 August 2014 39528cedfa926ea0c01e69ef5b2ea9b0 e388a4556c0f65e1904146cc1a846bee 69ea336ffe0af410570543696a3c6d55 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 9dba6f1f949f5e07bed667bf670fd9c4Duis autem vel eum5db79b134e9f6b82c0b36e0489ee08ed iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent. 94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 94b3e26ee717c64999d7867364b1b4a3 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Comments (4)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c69dba6f1f949f5e07bed667bf670fd9c4Pingbacks (1)5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6Category: 8bf4b24366211183bf4e17ceb3fb5ce5CSS5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 33a922c0ba3c41a8b1829949e269a139 Copyright © e71c46e55e88870dbc2cd6d282a5443b文波の小站5db79b134e9f6b82c0b36e0489ee08ed 2014,All Rights Reserved. 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956
Step6. スタイルを指定します
body { margin: 0; padding: 0; background: #ddd; } #container { margin: 1em auto; width: 650px; background: #fff; } #header { background: #CF3; } #mainnav { background: #9F3; } #menu { float: right; width: 165px; background: #6F9; } #contents { float: left; width: 440px; background: #9FC; margin: 0 0 0 20px; } #footer { clear: both; background: #FF9; } Step7. 最後に、いくつかの調整作業が必要です
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。