PC端网页布局——世纪佳缘（二）页面初搭建

咱们首先来搭建一下整体的大结构：

效果如下：

每一块呢，都是使用div块做的，并不难理解

除了头部之外，每一块都是外面一个大的div,里面再包一个小的div，也就是所谓的通栏和版心（由于个人问题，版心设置了两个宽度的，大家可以根据个人需求来设计）

HTML代码如下所示：

    
    
    
    


    
    
头部
     
     

        

    
    
    

        
2.2亿注册会员
    
    
    

        
优质会员
    
    
    

        
蓝色服务
    
    
    

        
底部1
    
     
    

        
底部2
    
    
    

        
底部3
    

CSS代码如下：

*{
    margin: 0;
    padding: 0;
}
.center{
    width: 1016px;
    margin: 0 auto;
}
.center2{
    width: 1000px;
    margin: 0 auto;
}
body{
    background-color: #666;
}
/* 头 */
.new_header{
    height: 70px;
    background-color: pink;
    position: relative;
}
/* 注册 */
.new_user_reg{
    height: 450px;
    /* background-color: pink; */
    background: url(./images/big_bg4.jpg) no-repeat center top;
    position: relative;
}
/* 会员数量图片 */
.new_publicist{
    position: relative;
    height: 78px;
    background-color: cornflowerblue;
}
.new_publicist .publicist{
    height: 100%;
    background-color: coral;
}
/* 优质会员列表 */
.new_userbest{
    position: relative;
    height: 733px;
    padding: 20px 0;
    background-color: cyan;
}
.new_userbest .userbest{
    height: 100%;
    background-color: rgb(136, 127, 194);
}
/* 红娘   蓝色服务*/
.blueservice{
    height: 115px;
    background-color: #52c9eb;
}
/* 底部1 */
.jy_commen_foot{
    height: 92px;
    background-color: darksalmon;
    /* padding-top: 20px; */
}
.jy_commen_foot .foot1{
    padding-top: 20px;
    height: 100%;
    background-color: khaki;
}
/* 底部2 */
.foot_company_info{
    height: 27px;
    background-color: rgb(212, 110, 173);
}
.foot_company_info .foot2{
    height: 100%;
    background-color: mediumaquamarine;
}
/* 底部3 */
.other_icon{
    height: 50px;
    background-color: rgb(78, 132, 202);
}

主要就是添加一些背景颜色，相信大家都是可以看得懂的

在这里呢，设置固定的高度是为了能够添加上颜色，布局结构更加清晰一些，后期会视情况去掉高度，使用内容撑开。