咱们首先来搭建一下整体的大结构：
效果如下：
文章图片
每一块呢，都是使用div块做的，并不难理解
除了头部之外，每一块都是外面一个大的div,里面再包一个小的div，也就是所谓的通栏和版心（由于个人问题，版心设置了两个宽度的，大家可以根据个人需求来设计）
HTML代码如下所示：
Document - 锐客网
头部2.2亿注册会员优质会员蓝色服务底部1底部2底部3
【PC端网页布局——世纪佳缘（二）页面初搭建】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);
}主要就是添加一些背景颜色，相信大家都是可以看得懂的
在这里呢，设置固定的高度是为了能够添加上颜色，布局结构更加清晰一些，后期会视情况去掉高度，使用内容撑开。
推荐阅读
- JavaScript|web前端入门到实战（好用的Js图表库）
- 接口访问加密方式
- 实用技术|Chrome 技术篇-常用web调试手法（清除缓存并硬性重新加载）
- 有关easyUI的拖动操作中droppable，draggable用法例子
- web前端|CSS科技感四角边框
- ColorBox 演示和说明/API
- SUI 列表 底部无限滚动
- js把时间戳转化为时间
- js jq获取标签的各种方式整理
- WEB前端|用HTML5canvas绘制一个圆环形的进度表示