前端布局思维（实例）

总体思想

1.先确定较大的几个板块。

2.从最顶层的板块开始编写

3.每个板块都需要一个版心用于板块的基础设置

        版心不需要设置高度由内容撑开

顶部板块编写

先是一个大的板块

然后在内部编写一个版心，用于基础样式的编写（板块内部的文字居中等操作）

板块的内部的小板块也是先整体布局，再从上到下从左到右依次编写

例子

1.先编写顶部板块topbar

2.在其内部编写版心container(居中作用，宽度设置)

3.对板块的内部进行整体布局（左右两个float模块）

4.对左模块进行了行内元素、行内块元素的空格问题进行处理居中等操作

5.对右模块进行了li元素的float和第一个元素和最后一个元素进行细微调整处理

        <!-- 顶部导航条 -->
        <div class="topbar">
            <!-- 版心:作用让主要元素在中间 -->
            <div class="container clearfix">
                <!-- 左侧:通过float:left实现 -->
                <div class="welcome leftfix">
                    <span class="hello">欢迎</span>
                    <span>请</span>
                    <a href="#" class="login">登录</a>
                    <a href="#" class="register">注册</a>
                </div>
                <!-- 右侧：通过float:right实现 -->
                <div class="topbar-nav rightfix">
                    <ul class="main-nav-list leftfix clearfix">
                        <li><a href="#">尚品超市</a></li>
                        <li><a href="#">优惠卷</a></li>
                        <li><a href="#">尚品家电</a></li>
                        <li><a href="#">尚品生鲜</a></li>
                        <li><a href="#">plus会员</a></li>
                        <li><a href="#">进口好物</a></li>
                        <li><a href="#">品牌闪购</a></li>
                        <li><a href="#">拍卖</a></li>
                        <li><a href="#">五金商店</a></li>
                    </ul>
                </div>
            </div>   
        </div>

 样式调整

/**
 * 基础设置发（用于居中）:不需要高度，由内容撑开
 * 
 */
.container{
    width: 900px;
    margin: 0 auto;
    background-color: aqua;
}
/* 顶部导航条宽度设置*/
.topbar {
    height: 30px;
    background-color: #ececec;
}
/* 用于子块的居中*/
.welcome {
    height: 30px;
    line-height: 30px;
    font-size: 0px;//行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符问题
    color: #666;
    background-color: orange;
}

/*先设置其子模块中的共通属性*/
.welcome span,.welcome a {
    font-size: 12px;
}
/*再通过不同的子元素特点设置对应的效果*/
.welcome .hello {
    margin-right: 24px;
}
.welcome .login {
    padding-right: 20px;
    border-right: 1px solid #666
}
.welcome .register {
    margin-left: 20px;
}

/**把li都进行left浮动*/
.topbar-nav .main-nav-list li {
    float: left;
}
/**居中*/
.topbar-nav .main-nav-list {
    background-color: #fad;
    height: 30px;
    line-height: 30px;
}
/* 设置全部的a标签 */
.topbar-nav .main-nav-list li a {
    padding:0px 10px;
    border-right: 1px solid #000000;
}
/* 前后两个标签进行微调，通过伪类元素*/
.topbar-nav .main-nav-list li:first-child a {
    padding-left:0px ;
}
.topbar-nav .main-nav-list li:last-child a {
    border: 0;
    padding-right: 0;
}

效果图：