布局之美

    最近看了网易云课堂里面一个前端开发面试官提到，如果想要进网易前端开发，其实不一定要做过多少项目啥的，最关键的是要有扎实的基本功底，于是我又开始审视自己，自己会什么。。

    该开发工程师，提到的问题有很多，本文主要从页面布局这一点说起。

    页面布局算是前端开发（样式）的敲门砖，如果这些都不能信手拈来，看来是得好好补补课才行。针对网易前端开发提出的几个问题，我也花了点时间整理了一番，写的不好的地方，欢迎拍砖。闲话不多说，进入正题。（本文关注应用，由来在此不提）

  •       两个层固定宽度排列

     method1： 两个层分别设置浮动；

     method2：将层设置成inline-block；

  •      一列固定，一列自适应

     最优方案是优先加载重要的.main，然后再加载侧栏。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main 先加载，左侧栏固定 右侧自适应</title>
    <style type="text/css">
        .containter{width: 100%;}
        .main{float: left;margin-left: 200px;}
        .side{width: 200px;margin-left: -100%;float: left;}
    </style>
</head>
<body>
    <div class="containter">
        <div class="main">111111111Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, odio, error, ullam, explicabo inventore accusamus nisi at dolorum reiciendis qui ipsum corrupti minus eveniet praesentium vel dolore fuga. Inventore, tempore.</div>
    </div>
    <div class="side">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto facilis voluptate architecto tenetur eveniet sint. Quia, ut, perferendis, optio ipsam id amet odio cumque excepturi provident esse libero iste quaerat.</div>
</body>
</html>
View Code
  •      中间列自适应，两边侧栏固定

    最优方案是优先加载重要的.main，然后再加载侧栏。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中间列自适应，两边侧栏固定</title>
    <style type="text/css">
        body{margin: 0 auto;}
        .container{width: 90%}
        .outerMain{width: 100%;}
            .main{background: red;margin: 0 210px;float: left;}
        
        .lSide{float: left;width: 210px;margin-left: -100%;}
        .rSide{float: left;width: 210px;margin-left: -210px;}
    </style>
</head>
<body>
    <div class="container">
        <div class="outerMain">
            <div class='main'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, voluptas, nemo amet ipsum rem eveniet alias pariatur atque eius nam expedita molestiae ipsam eligendi delectus placeat mollitia praesentium necessitatibus sint.</div>
        </div>

        <div class="lSide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, nesciunt, temporibus, iure et quas debitis tempora id reprehenderit nam ut delectus nulla at dolorum deleniti expedita ad ducimus adipisci quia.</div>

        <div class="rSide"> rSide Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, nisi, inventore, atque incidunt fuga dolore tempora voluptas dolorum asperiores magnam natus enim id ipsam totam doloremque nesciunt porro accusamus repellendus!</div>
    </div>
</body>
</html>
View Code
  •      两列宽度变化，一列固定
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列变宽一列固定</title>
    <style type="text/css">
        .container{width: 90%;}
        .outerWrap{width: 50%;margin-left:-200px;float: left;background: red;}
            .navi{margin-left: 200px;}

        .sideWrap{width: 50%;margin-right:-200px;float: left;}
            .side{margin-right: 200px;background: blue;}

        .content{width: 400px;float: left;background: green;}
        #footer{clear: both;}
    </style>
</head>
<body>
    <div class="container">
        <div class="outerWrap">
            <div class="navi">navi</div>
        </div>
        
        <div class="content">content</div>

        <div class="sideWrap">
            <div class="side">side</div>
        </div>
    </div>
    <div id="footer">footer</div>
</body>
</html>
View Code
  •     一列宽度变化，一列宽度自适应
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一列宽度变化，一列宽度自适应</title>
    <style type="text/css">
        .container{    width: 100%;}
            .outSide{width: 40%;background: green;float: left;}
            .content{background: red;margin-left:40%}
    </style>
</head>
<body>
    <div class="container">
        <div class="outSide">
            <div class="side">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, aut, dolorem sunt nemo eius nulla id repudiandae soluta sit nihil illo ea quae quisquam deleniti ipsa odio est optio rem.</div>
        </div>
        <div class="content">content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, dolor, repellendus numquam laudantium nemo culpa tempora voluptate ad magni vitae corporis dignissimos molestiae porro minima dolores vel eos modi distinctio.</div>
    </div>
</body>
</html>
View Code

tip：这里涉及的布局其实大都跟margin的设置有关，尤其是margin为负值的情况。需要理解上述布局之美，首要是要先理解margin设置，

推荐博客：http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

 

 

    

 

posted @ 2015-04-24 13:59  xiaozhanglang  阅读(203)  评论(0)  编辑  收藏  举报