<!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>我的模板</title>
<style type="text/css">
body {
background: #eee;
margin: 0;
}
.header {
background: red;
position: fixed;
width: 100%;
height: 60px;
color: white;
}
.middle {
background: white;
padding-top: 60px;
margin-left: 120px;
margin-right: 120px;
padding-bottom: 30px;
}
.footer {
background: blue;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
color: white;
}
.left {
background: orange;
float: left;
width: 200px;
margin-left: 90px;
margin-top: 20px;
}
.right {
background: purple;
margin-left: 290px;
margin-right: 90px;
padding-left: 100px;
padding-right: 100px;
}
.left ul {
list-style: none;
}
</style>
</head>
<body>
<div class="header">
<div style="height: 18px;"></div>
<div style="width: 30px; margin: 0 auto 0 auto;">header</div>
</div>
<div class="middle">
<div class="left">
<ul>
<li><a href="#">this is item 0</a></li>
<li><a href="#">this is item 1</a></li>
<li><a href="#">this is item 2</a></li>
<li><a href="#">this is item 3</a></li>
<li><a href="#">this is item 4</a></li>
<li><a href="#">this is item 5</a></li>
</ul>
</div>
<div class="right">
<div>I am div</div>
<p>I am p</p>
<ul>
<li>this is other item 0</li>
<li>this is other item 1</li>
<li>this is other item 2</li>
<li>this is other item 3</li>
<li>
<div>Hello JavaHello JavaHello JavaHello JavaHello JavaHello JavaHello JavaHello JavaHello JavaHello JavaHello JavaHello JavaHello JavaHello JavaHello JavaHello JavaHello Java</div>
</li>
<li>
<div style="background: #6F0;">我是li內部的div0</div>
<div style="background: #60F;">我是li內部的div1</div>
<div style="background: #F0F;">我是li內部div2</div>
</li>
<li>this is other item 0</li>
<li>
<form>
<label>請輸入用戶名</label><input type="text"/>
<label>請輸入密碼</label><input type="password" />
<input type="submit" />
</form>
</li>
<li>this is other item 2</li>
<li>this is other item 3</li>
<li>this is other item 4</li>
<li>this is other item 5</li>
<li>this is other item 0</li>
<li>this is other item 1</li>
<li>this is other item 2</li>
<li>this is other item 3</li>
<li>this is other item 4</li>
<li>this is other item 5</li>
<li>this is other item 0</li>
<li>this is other item 1</li>
<li>this is other item 2</li>
<li>this is other item 3</li>
<li>this is other item 4</li>
</ul>
<div>i am div</div>
</div>
<div style="background: yellow; clear:both;">div3
</div>
</div>
<div class="footer">
<div style="width: 30px; margin: 0 auto 0 auto;">footer</div>
</div>
</body>
</html>
