CSS排版页面实例代码

2020-11-27 来源：小侦探旅游网

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

最终实现效果如图:

CSS排版页面实例代码

显示全文

全部栏目

CSS排版页面实例代码