CSS排版页面实例代码

创建CSS文件如下：

@charset "utf-8";
/* CSS Document */
*{
    margin:0px;
    padding:0px;
    border:0px;
}
#box{
    width:1100px;
    height:760px;
    margin:auto;
}
#hen
{
    width:1100px;
    height:160px;
    background-color:#936;
}
#zuo{
    width:250px;
    height:500px;
    margin-top:10px;
    background-color:#03C;
    float:left;
    margin-bottom:10px;
}
#zhong-1{
    width:262px;
    height:300px;
    margin-top:10px;
    margin-left:10px;
    float:left;
    background-color:#000;
}
#zhong-2{
    width:262px;
    height:300px;
    margin-top:10px;
    margin-left:10px;
    float:left;
    background-color:#000;
}
#xia{
    width:544px;
    height:190px;
    background-color:#03C;
    margin-top:10px;
    float:left;
    margin-bottom:10px;
}
#you{
    width:295px;
    height:500px;
    margin-left:10px;
    margin-top:10px;
    background-color:#3F6;
    float:right;
    margin-bottom:10px;
}
#dibu
{
    width:1100px;
    height:50px;
    margin-top:10px;
    background-color:#CF3;
    clear:both;
}

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>
<p id="box">
    <p id="hen"></p>
    <p id="zuo"></p>
    <p id="zhong-1"></p>
    <p id="zhong-2"></p>
    <p id="you"></p>
    <p id="xia"></p>
    <p id="dibu"></p>
    
</p>
</body>
</html>

最终实现效果如图:

以上就是CSS排版页面实例代码的详细内容，更多请关注其它相关文章！

相关文章：

你感兴趣的文章：

标签云：