css自适应布局

CSS菜鸟学习笔记  我是新手 我也不知道这是不是自适应布局 刚开始学习的,希望与大家多多交流,共同进步,希望大家指点,这是我的学习笔记,以后会继续附上我的心得和笔记

.w-a1 .w-11{width:100px;background:#aaa;padding:0 5px;}
.w-a1 .w-12{width:100px;background:#ccc;padding:0 5px;}
.w-a1 .w-13{padding:0 10px;margin:0 110px;background:#bbb;}
.w-a1,.w-a2,.w-a3,.w-a4,.w-a5,.w-a6{padding:10px 0;background:#fadada;margin:10px 0;}
.w-a2{}
.w-a2 .w-21{width:100%;height:100%;}
.w-a2 .w-21 div{margin-right:220px;background:#aaa;padding:0 5px;}
.w-a2 .w-22{width:100px;background:#ccc;margin-left:-220px;padding:0 5px;}
.w-a2 .w-23{width:100px;background:#bbb;margin-left:-110px;padding:0 5px;}
.w-a3{}
.w-a3 .w-31{width:100px;background:#aaa;padding:0 5px 0 10px;}
.w-a3 .w-32{margin-left:115px;}
.w-a3 .w-32 .m-a{width:100%;}
.w-a3 .w-32 .m-a div{margin-right:115px;background:#bbb;padding:0 5px;}
.w-a3 .w-33{width:100px;background:#ccc;margin-left:-115px;padding:0 10px 0 5px;}
.w-a4 .w-41{width:100px;padding:0 5px 0 10px;background:#aaa;}
.w-a4 .w-42{width:100px;padding:0 5px;background:#bbb;}
.w-a4 .w-43{margin-left:225px;padding:0 10px 0 5px;background:#ccc;}
.w-a5 .w-51{float:left;}
.w-a5 .w-51 div{margin:0 110px;background:#bbb;padding:0 5px;}
.w-52,.w-53{width:100px;padding:0 5px;background:#cba;}
.w-a5 .w-52{margin-left:-100%;}
.w-a5 .w-53{margin-left:-110px;}

.w-a6{*position:relative;*zoom:1;}
.w-a6 .ra{position:relative;height:0px;}
.w-61,.w-62{width:100px;padding:0 5px;background:#bbb;_display:inline;}
.w-a6 .w-62{}
.w-a6 .ra .w-63{margin:0 110px;*margin:0 0px;background:#aaa;padding:0 5px;position:absolute;}

.w-a7{position:relative;}
.w-71,.w-72{width:100px;position:absolute;background:#bbb;}
.w-a7 .w-71{left:0;padding:0 0 0 10px;}
.w-a7 .w-72{right:0;padding:0 10px 0 0;}
.w-a7 .w-73{margin:0 110px;background:#aaa;padding:0 10px;}

<h1><center>自适应布局w-a1</center></h1>
    <div class="w-a1 clf">
        <div class="w-11 fl">让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        <div class="w-12 fr">让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        <div class="w-13">2004年超级女生成都赛区亚军,2004年超级女生全国总决赛季军 有人说张含韵是跃上中国首度偶像歌手的漂亮女生，是的，这个《超级女声》比赛中最受关注的人气小精灵，未出道已经被数十万人追捧。一首节奏欢快动感、洋溢着青春气息的《酸酸甜甜就是我》，让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。</div>
    </div>
    <h1><center>自适应布局w-a2</center></h1>
    <div class="w-a2 clf">
        <div class="w-21 fl">
            <div>200411年超级女生成都赛区亚军,2004年超级女生全国总决赛季军 有人说张含韵是跃上中国首度偶像歌手的漂亮女生，是的，这个《超级女声》比赛中最受关注的人气小精灵，未出道已经被数十万人追捧。一首节奏欢快动感、洋溢着青春气息的《酸酸甜甜就是我》，让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。</div>
        </div>
        <div class="w-22 fl">22让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        <div class="w-23 fl">33让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
    </div>
    <h1><center>自适应布局w-a3</center></h1>
    <div class="w-a3 clf">
        <div class="w-31 fl">11让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        <div class="w-32 clf">
            <div class="m-a fl"><div>22004年超级女生成都赛区亚军,2004年超级女生全国总决赛季军 有人说张含韵是跃上中国首度偶像歌手的漂亮女生，是的，这个《超级女声》比赛中最受关注的人气小精灵，未出道已经被数十万人追捧。一首节奏欢快动感、洋溢着青春气息的《酸酸甜甜就是我》，让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。</div></div>
            <div class="w-33 fr">33让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        </div>
    </div>
    <h1><center>自适应布局w-a4</center></h1>
    <div class="w-a4 clf">
        <div class="w-41 fl">让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        <div class="w-42 fl">让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        <div class="w-43">
            <div>2004年超级女生成都赛区亚军,2004年超级女生全国总决赛季军 有人说张含韵是跃上中国首度偶像歌手的漂亮女生，是的，这个《超级女声》比赛中最受关注的人气小精灵，未出道已经被数十万人追捧。一首节奏欢快动感、洋溢着青春气息的《酸酸甜甜就是我》，让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。</div>
        </div>
    </div>
    <h1><center>自适应布局w-a5</center></h1>
    <div class="w-a5 clf">
        <div class="w-51 fl">
            <div>2004年超级女生成都赛区亚军,2004年超级女生全国总决赛季军 有人说张含韵是跃上中国首度偶像歌手的漂亮女生，是的，这个《超级女声》比赛中最受关注的人气小精灵，未出道已经被数十万人追捧。一首节奏欢快动感、洋溢着青春气息的《酸酸甜甜就是我》，让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。</div>
        </div>
        <div class="w-52 fl">让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        <div class="w-53 fl">让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
    </div>
    <h1><center>自适应布局w-a6</center></h1>
    <div class="w-a6 clf" id="w-a6">
        <div class="w-61 fl">让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        <div class="w-62 fr">让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        <div class="ra"><span class="w-63" id="w-63">2004年超级女生成都赛区亚军,2004年超级女生全国总决赛季军 有人说张含韵是跃上中国首度偶像歌手的漂亮女生，是的，这个《超级女声》比赛中最受关注的人气小精灵，未出道已经被数十万人追捧。一首节奏欢快动感、洋溢着青春气息的《酸酸甜甜就是我》，让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。
        </span></div>
    </div>
    <h1><center>自适应布局w-a7</center></h1>
    <div class="w-a7 clf">
        <div class="w-71 fl">让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        <div class="w-72 fr">让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。一夜之间，她以甜美的声线、乖巧的外型</div>
        <div class="w-73">2004年超级女生成都赛区亚军,2004年超级女生全国总决赛季军 有人说张含韵是跃上中国首度偶像歌手的漂亮女生，是的，这个《超级女声》比赛中最受关注的人气小精灵，未出道已经被数十万人追捧。一首节奏欢快动感、洋溢着青春气息的《酸酸甜甜就是我》，让更多的人喜欢上了张含韵“酸酸甜甜” 的歌声。
        </div>
    </div>