剖析页面布局思路

学成在线——剖析页面布局思路

页面布局思路

• 确定版心
• 纵标横浮
• 先确定大小，后确定位置
• 先结构，后样式

页面布局经典格式

• header
• banner
• main
• footer

Header

头部栏包括logo，导航，搜索栏，用户模块四个浮标组成。结构如下

<div class="header w">
        <!-- logo -->
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <!-- 导航栏 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索框 -->
        <div class="search">
            <input type="text" value="请输入关键词">
            <button></button>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <img src="images/user.png" class="img_user">
            qq-lilei
        </div>
    </div>
    

Banner

导航栏

主题内容部分

这部分的做法都是差不多的

Footer

遇到的困难以及排查方式

1. css外链式float全部失效
   
   这里涉及到了link语句，在html中直接调用css文件，要求写对位置。上图的错误就是没引用正确的位置，导致浮动不见了。还是得细心！！！
2. Html自动格式化问题
   
3. 清除浮动问题
   
   清除浮动前：父盒子是标准流，子盒子是浮动。由于父盒子未给高度height，所以当子盒子浮动的时候，父盒子无法被撑开，下一个盒子会直接顶到原本浮动子盒子的下方，如上图粉色方块到文字“精品推荐”下面。 清除浮动，我是用的是after伪元素，如下

.clearfix:after{
/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;
        /*号只有IE6-IE7执行*/
    }

• 清除后效果如下图