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>我的模板</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>