摘自《网页开发手记》
1、效果图:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIyVGduV2QvwVe0lmdhJ3ZvwFM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2LcZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39DM4QDNzQTNwAzMycDM1EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
2、xhtml代码:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml: >
<head>
<title>xhtml+css简单布局</title>
<style type="text/css">
*{
margin: 0px; padding: 0px;
}
#all{
width: 400px;
height: 300px;
margin: 0px auto;
color: #f00;
}
#top, #bt{
height: 50px;
background-color: #ccc;
color: #00f;
font-weight: bold;
}
#list{
width: 25%;
height: 200px;
float: left;
background-color: #ddd;
}
#content{
width: 75%;
height: 200px;
background-color: #fff;
}
</style>
</head>
<body>
<div id="all">
<div id="top">顶部</div>
<div id="mid">
<div id="list">列表</div>
<div id="content">内容</div>
</div>
<div id="bt">底部</div>
</div>
</body>
</html>