CSS简单页面布局

来源：互联网发布：nginx ssl 硬件加速卡编辑：程序博客网时间：2024/05/16 07:40
更多的CSS简单页面布局可以去css布局下载啊，资源来自CSS彻底设计与研究。
<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>单列布局</title>        <style>                        body{                background: #fff;                font: 13px/1.5 arial;                margin: 0;                padding: 0;            }            .rounded{                background: url(pages/layout/images/left-top.gif) top left no-repeat;                width: 100%; /*IE6下重新计算宽度*/            }            .rounded h2{                background: url(pages/layout/images/right-top.gif) top right no-repeat;                padding: 20px 20px 10px;                margin: 0;            }            .rounded .main{                background: url(pages/layout/images/right.gif) top right repeat-y;                padding: 10px 20px;                margin: -2em 0 0 0;            }            .rounded .footer{                background: url(pages/layout/images/left-bottom.gif) left bottom no-repeat;            }            .rounded .footer p{                color: #888;                text-align: right;                display: block;                padding: 10px 20px 20px;                margin: -2em 0 0 0;                background: url(pages/layout/images/right-bottom.gif) right bottom no-repeat;            }            #header, #content, #pagefooter{                width: 760px;                margin: 0 auto;            }        </style>    </head>    <body>        <div id="header">            <div class="rounded">                <h2>Page Header</h2>                <div class="main">                    <p>                        这是一行文本，这里作为样例，显示在布局框中。<br/>                        这是一行文本，这里作为样例，显示在布局框中。 </p>                </div>                <div class="footer">                    <p>                        查看详细信息>>                    </p>                 </div>            </div>        </div>        <div id="content">            <div class="rounded">                <h2>Page Content</h2>                <div class="main">                    <p>                        这是一行文本，这里作为样例，显示在布局框中。<br />                        这是一行文本，这里作为样例，显示在布局框中。                    </p>                    <p>                        这是一行文本，这里作为样例，显示在布局框中。<br />                        这是一行文本，这里作为样例，显示在布局框中。                    </p>                </div>                <div class="footer">                    <p>                        查看详细信息>>                    </p>                 </div>            </div>        </div>        <div id="pagefooter">            <div class="rounded">                <h2>Page Footer</h2>                <div class="main">                    <p>                        这是一行文本，这里作为样例，显示在布局框中。                    </p>                </div>                <div class="footer">                    <p>                        查看详细信息>>                    </p>                 </div>            </div>        </div>    </body></html>