今天看一個網站的頁面布局可以切換，覺得挺好玩兒的，就查資料自己簡單的實現了一個。下面是我的代碼，給新手們參考一下： 
我的CSS代碼： 
 <style type="text/css">
        .page-head{
            float: left;
            clear: both;
            background-color: #e8eb2e;
            width: 100%;
            height: 20%;
         }
       .page-meddle{
            float: left;
            clear:both;
            background-color: #74fff3;
            width: 100%;
            height: 80%;
        }
       .page-head2{
            float: left;
            background-color: #e8eb2e;
            width: 20%;
            height: 100%;
       }
       .page-meddle2{
        float: right;
        clear:right;
            background-color: #74fff3;
            width: 80%;
            height: 100%;
       }
    </style>
上面的東西都是css里面基礎的東西，不說了： 
我的html代碼： [url=#]切換布局[/url]
<div class="page-head">
    <h1>頭部</h1>
</div>
<div class="page-meddle">
    <h1>底部</h1>
</div>

<script type="text/javascript">
          $(function(){
        $("#switch")._toggle(function(){
            $(".page-head").fadeOut("flow",function(){
                $(this).fadeIn("fast").addClass("page-head2");
            });
            $(".page-meddle").fadeOut("flow",function(){
                $(this).fadeIn("fast").addClass("page-meddle2");
            });
        },function(){
            $(".page-head").fadeOut("flow",function(){
                $(this).fadeIn("fast").removeClass("page-head2");
            });
             $(".page-meddle").fadeOut("flow",function(){
                $(this).fadeIn("fast").removeClass("page-meddle2");
            });
        });
    });
</script>

有一點要注意，在這個文件中我用的是jquery語言，要導入jquery文件。在附件里有，你可以把html文件跟jquery文件放在一起，通過：<script type="text/javascript" src="jquery.js"></script>調用就ok了！