CSS排版页面_html/css_WEB-ITnose
程序员文章站
2022-04-26 16:15:23
...
创建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文件如下:
CSS排版页面
最终实现效果如图: