Heim > Artikel > Web-Frontend > CSS排版页面_html/css_WEB-ITnose
CSS排版页面_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:501035Durchsuche
创建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>
最终实现效果如图:
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题_html/css_WEB-ITnoseNächster Artikel：img与特殊布局下对浏览器渲染的剖析_html/css_WEB-ITnose