2013/11/11 淘宝首页，搜索框自适应布局（有好听的名字-双飞翼布局（圣杯布局））

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        .box{min-height:500px;background:gray;}
        .search{display: inline;float: left;width: 100%;}
        .searcher{width:100%;background:#E95935;height:50px;}
        .left{margin-left:-100%;background:#000;float:left;display: inline;}
        .right{margin-left:-52px;float:left;display: inline;}
        .left i{width:50px;height:50px;display:block;background:pink;}
        .right span{width:50px;height:50px;display:block;background:#000;}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="search">
                <div style="margin:0 200px;">
                    <div class="searcher"></div>
                </div>
            </div>
            <div class="left">
                <i></i>
            </div>
            <div class="right">
                <span></span>
            </div>
        </div>
    </body>
</html>

 

posted @ 2013-11-11 18:37  2公子  阅读(328)  评论(0)    收藏  举报