search

Home >Web Front-end >HTML Tutorial >CSS排版页面_html/css_WEB-ITnose

CSS排版页面_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:37:501073browse

创建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>

　　最终实现效果如图:

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题_html/css_WEB-ITnoseNext article：img与特殊布局下对浏览器渲染的剖析_html/css_WEB-ITnose

Related articles

See more