ホームページ > 記事 > ウェブフロントエンド > div+css Webページの大まかなレイアウト_html/css_WEB-ITnose
div+css Webページの大まかなレイアウト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:21:191170ブラウズ
ブラウザを開いて、図に示すように主要な Web サイトのナビゲーション ホームページを表示します。
たとえば、基準オブジェクトを見たとき、最初からそれを描画するのではなく、まず幾何学的な下書き線を決定し、オブジェクトのおおよその範囲と比率を決定します。 Web ページも同様で、div+css レイアウトになります。
ここで、ide や notepad++ などの編集ツールを開いて、コードの作成を開始します
と、カラーピッキングや測定などに使用されるスクリーンショット測定ツール faststone Capture を使用します
まずはコーディングを急がなくて、ラフを描きましょうフレームワークをレイアウトする方が便利です
設計図を作成したら、比例サイズに従って div+css レイアウトを書き始めます
測定ツールを開き、定規を取り出し、そして編集ツール
HTMLコードを書いて下書きエフェクトのようにし、別の.cssを作成して後で書きます
<html><head><link rel="stylesheet" type="text/css" href="home.css"/> <!--外联css的固有格式，href指向调用的.css文件--><meta http-equiv="content-type"type="text/html charset=utf-8"/> <!--字符编码设置成utf-8--><title>home</title> <!--标题设置--></head><body><div id="spe">火狐主页</div> <!--div+css盒子模型,id选择器复用性低，但优先级高，class选择器，反之亦然--><div id="sea">搜索栏</div><div id="ads">广告</div><div class="diva"><div class="div1">网页导航</div><div class="div2">洋葱新闻</div><div class="div1">官方新闻</div><div class="div2">读书推荐</div></div><div id="spt">关于我们</div></body></html>
今すぐ.cssファイルを書き始めます
*{margin:0px; /*外边距初始值置0*/padding:0px; /*内边距初始值置0*/} 測定作業が始まり、幅と高さのホームページバー
#spe{ /*id选择器以#打头*/width:1366px;height:39px;border:1px solid black; /*边框为1px，黑色*/background:#00A2E8; /*颜色的hex值，16进制*/} 検索バーの計測
#sea{width:1366px;height:109px;border:1px solid black;background:#99D9EA;} 広告の計測
#ads{width:1016px;height:63px;border:1px solid black;background:#ED1C24;} このとき、広告ボックスが当初の予想から逸脱していることがわかりました。
reft左マージンからターゲットピクセルまでの距離を測定するために、他のボックスを配置するために大きなDCボックスをセットアップします。最後のDCボックス
#ads{width:1016px;height:63px;border:1px solid black;background:#ED1C24;margin-left:169px;} 全体的な効果が出ます
CSSコードの全体的な効果
.diva{ /*class选择器以.开头*/width:1016px;height:583px;border:1px solid black;margin-left:169px; /*外边距右移*/} ボックスの概念については、次のようなpptを作成しました:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。