响应式布局之案例--常见电商类页面效果

本博客由于字数原因从作者上一篇博客摘分出来进行讲解，如果想了解响应式布局可以点此链接进入了解响应式布局–知识点+案例详细讲解。

响应式布局的布局特点为确保一个页面在所有终端上，都能显示出令人满意的效果，用一句话来概括就是 一套方案，处处运行。
废话不多说，先来看看页面在移动端和pc端的效果
pc端：

移动端：
可以看出来，最上面是banner区，左侧导航，右侧内容展示，妥妥的电商平台网页，实现方法就是调整布局的宽高占比、横纵排列以及细节优化。怎么具体实现请看代码：
html部分很简单，只有div盒子以及li标签。

    <div id="layout">
        <div id="top"></div>
        <div id="main">
            <div>
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li>
                <li>分类5</li>
                <li>分类6</li>
            </div>
            <div