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

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

效果如下：

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

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

HTML代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./sjjy_css.css">
</head>
<body><!-- 头 --><div class="new_header center">头部</div><!-- 注册 --><div class="new_user_reg"><div class="user_reg center2"></div></div><!-- 会员数量图片 --><div class="new_publicist"><div class="publicist center2">2.2亿注册会员</div></div><!-- 优质会员列表 --><div class="new_userbest"><div class="userbest center2">优质会员</div></div><!-- 红娘   蓝色服务 --><div class="blueservice"><div class="center">蓝色服务</div></div><!-- 底部1 --><div class="jy_commen_foot"><div class="foot1 center">底部1</div></div><!-- 底部2 --><div class="foot_company_info"><div class="foot2 center">底部2</div></div><!-- 底部3 --><div class="other_icon "><div class="center">底部3</div></div>
</body>
</html>

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);
}

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

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

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

PC端网页布局——世纪佳缘（三）头部
来看头部,做好的效果图如下: 接下来就进入主题吧~~ 先来分析一下: 有两张图片,一个填写账号密码和登录按钮的登录框,其他登录方式,(因为海外登录方式与前面纯图标的不太一样,这里又是只做了个大致的样式 ...
html_5_小作业2_世纪佳缘注册页面
文章目录要求效果代码要求效果源码: 链接:https://pan.baidu.com/s/1Cnf2koBFo4I4CCW4RTQ_4A 提取码:ouzc 代码 <!DOCTYPE ...
婚恋网站呈市场细分倾向世纪佳缘推子品牌意欲何为
谁都知道婚恋网站已经步入衰退期,但仍有很多网站拼了命的要挤进婚恋行业前三.历经几番折腾,目前婚恋网站的格局仍没有太大变动.折腾不出大风浪,就开始走细分路线,就连世纪佳缘现在也展开了细分化进程.细分玩不 ...
世纪佳缘登录之二，修改
今天发现世纪佳缘的以前登录代码不行了,登录不成功.打印content后有毛病,没跳转过去. 需要再次请求一下登录后返回的<script type='text/javascript'>win ...
PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函 ...
项目实战-PC端固定布局【2】认识网页大纲算法（HTML5 Outliner）
注: body,nav,section需要标题 head,div不需要标题链接: https://gsnedders.html5.org/outliner/ 步骤:选择文件--->Outlin ...
世纪佳缘财务及运营数据分析
世纪佳缘成立于2003年10月8日,是中国在线婚恋交友平台,通过互联网.无线平台和线下活动为单身人士提供严肃婚恋交友服务.2011年5月11日,世纪佳缘登陆美国纳斯达克进行首次公开募股,成为首家上市的 ...
大数据告诉你，世纪佳缘都是谁在相亲（python爬虫分析，附全部代码）
公众号: 数据小斑马,关注即可获得价值1000元的数据分析学习资料数据分析学习目录: 一.Excel系列--四大常用函数及十大高级图表二.SQL系列--性能优化/多表关联/窗口分析函数等三.统计 ...
用Html实现世纪佳缘交友注册页面是什么体验？
一.前言在零基础必看的Html5+Css3+移动端前端视频教程(三)中主要学习了表格.列表.表单标签的使用,那这篇博客就利用这些知识,实现注册页面. 二.分析页面布局这是世纪佳缘的官网,目前只凭借 ...

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

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

最新文章

热门文章