dw で Web ページを作成するには 2 つの方法があります。1 つはグラフィカル インターフェイスで、もう 1 つはコードです。初心者の場合は、グラフィカル インターフェイスを使用できます。ほぼ完了したら、効率を向上させるコード。
現在の CSS3 と以前の CSS2 の間には大きな変更点があるため、CSS2 から始めましょう。
(作者は Dreamweaver CS6 を使用しています。クラック版のダウンロード アドレス: http://www.aa25.cn/download/954.shtml)
1. 単一列レイアウトWeb ページ作成者は、最初にフレームワークは次の図のようになります:
Web ページをヘッダー タイトル部分、ナビゲーション ナビゲーション部分、記事本文、フッター フッターの 4 つの部分に分割するだけです
これは 1 列のレイアウトです。
div を通じてこれら 4 つの構造を作成し、css でレイアウトしてスタイルを追加します
以下に示すように、dw を使用して div をすばやく作成します:
以前は、div は次の目的で使用されていました。この構造を直接作成し、この構造の作成に ID が使用されました。レイアウト用にこの div を見つけます。
画像の右側にある新規ボタンをクリックして、中央のタイプを選択することに注意してください。スタイルを選択するためのルール。ID は ID カードのようなもので、それぞれ異なります。もちろん、状況に応じて、CSS クラスセレクター、疑似クラスを選択することもできます。確認ポップアップページで CSS スタイルを設定します。
レイアウトに色を追加し、固定サイズの幅と高さを設定します。結果は次のようになります。 :
この問題は、初心者にとっても疑問に思われやすいものですが、これに似たものがたくさんあります。 ,
そのため、一般に Web ページを作成するときは、いくつかの属性を最初に初期化する必要があります。次のように記述します: body { margin:0 auto; font-family:Verdana; }
ul,dl,dd,h1,h2,h3,h4,h5,h6; ,p {padding:0; margin:0;}
ここで白いマージンをキャンセルするには、次のように記述します: body { margin:0}
<span style="font-size:18px;color:#006600;"><strong><!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">#header { background-color: #0F9; height: 100px; width: 500px;}#nav { background-color: #F00; height: 50px; width: 500px;}#article { background-color: #93C; height: 300px; width: 500px;}#footer { background-color: #F99; height: 50px; width: 500px;}</style></head><body><div id="header">header</div><div id="nav">nav</div><div id="article">article</div><div id="footer">footer</div></body></html></strong></span>上記は固定幅です。ブラウザのサイズが変わったときに幅を変更したい場合は、次のように % 単位を使用します。 width: 70%
div を中央に配置する属性: margin 属性を auto に変更します。 以上がhtml4とcss2の書き方です。
HTML5では、新しい構造タグの追加により、多くの場所でdivのブロックレベルの構造を記述する必要はなく、CSSを追加するときに
<span style="font-size:18px;color:#006600;"><strong><header>header</header><nav>nav</nav><article>article</article><footer>footer</footer></strong></span>
を直接追加します 2. 複数列レイアウト
div はブロックレベルの要素であるため、名前が信じられないほど優れており、一度に 1 ブロックずつ、各ブロックは 1 行を占有します1 行に複数のブロックを入れたい場合は、CSS を使用して複数の列にレイアウトする必要があります。
<span style="font-size:18px;color:#006600;"><strong><!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">#left { background-color: #3FC; float: left; height: 400px; width: 100px;}#center { background-color: #9C0; float: left; height: 400px; width: 100px;}#right { background-color: #F9F; height: 400px; width: 100px; float: left;}</style></head><body><div id="left">header</div><div id="center">nav</div><div id="right">article</div></body></html></strong></span>
float をボックスに配置します。 属性は left に設定されます
float: left;
このメソッドには欠点があります。たとえば、記事を投稿する場合、float を使用して記事を 3 つの列に分割すると、いずれかの列にコンテンツを追加すると、この列が他の列よりも長くなるため、修正するのが非常に面倒になります。css3 に新しく追加された複数列レイアウトとボックス レイアウトは、この問題を完全に解決します。
まず、ボックス レイアウトを使用してコードを確認します。効果は上の図と同じです。自分で実装することもできます。 CSS2 の float+position レイアウトで、float の問題なく位置合わせを自動で実現できます。
例で実装されているように、複数列レイアウトは主に記事に適しており、レイアウトを変更せずに自由に変更できます。ウェブページの外観。もちろん、このレイアウトにも制限があります。各列の幅は同じです。
そして、列の合計幅を記述する必要があります。そうすれば、複数の列が必要な場合に自動的に均等に配分されます。
コードは次のとおりです:
<span style="font-size:18px;color:#006600;"><strong><!doctype html><html><head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> #layout{ display: -moz-box; display: -webkit-box; } #left { background-color: #3FC; height: 400px; width: 100px; } #center { background-color: #9C0; height: 400px; width: 100px; } #right { background-color: #F9F; height: 400px; width: 100px; } #left,#center,#right{ -moz-box-sizing:border-box; -wdbkit-box-sizing:border-box; } </style></head><body> <div id="layout"> <div id="left">header</div> <div id="center">nav</div> <div id="right">article</div> </div></body></html></strong></span>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
