ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS レイアウト page_html/css_WEB-ITnose
CSS レイアウト page_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:37:501058ブラウズ
CSS ファイルを次のように作成します:
1 @charset "utf-8"; 2 /* CSS Document */ 3 *{ 4 margin:0px; 5 padding:0px; 6 border:0px; 7 } 8 #box{ 9 width:1100px;10 height:760px;11 margin:auto;12 }13 #hen14 {15 width:1100px;16 height:160px;17 background-color:#936;18 }19 #zuo{20 width:250px;21 height:500px;22 margin-top:10px;23 background-color:#03C;24 float:left;25 margin-bottom:10px;26 }27 #zhong-1{28 width:262px;29 height:300px;30 margin-top:10px;31 margin-left:10px;32 float:left;33 background-color:#000;34 }35 #zhong-2{36 width:262px;37 height:300px;38 margin-top:10px;39 margin-left:10px;40 float:left;41 background-color:#000;42 }43 #xia{44 width:544px;45 height:190px;46 background-color:#03C;47 margin-top:10px;48 float:left;49 margin-bottom:10px;50 }51 #you{52 width:295px;53 height:500px;54 margin-left:10px;55 margin-top:10px;56 background-color:#3F6;57 float:right;58 margin-bottom:10px;59 }60 #dibu61 {62 width:1100px;63 height:50px;64 margin-top:10px;65 background-color:#CF3;66 clear:both;67 } 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=utf-8" /><title>CSS排版页面</title><link href="css/63301.css" rel="stylesheet" type="text/css" /></head><body><div id="box"> <div id="hen"></div> <div id="zuo"></div> <div id="zhong-1"></div> <div id="zhong-2"></div> <div id="you"></div> <div id="xia"></div> <div id="dibu"></div> </div></body></html>
最終的な効果は以下のようになります:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。