CSS排版页面_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:37:501032검색
创建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으로 문의하세요.