前两天一位好朋友说让我去学一下前端的响应式布局，咱也不会啊，这不，安排上~

原世纪佳缘样例

一、结构分析

原图：

二、代码实现

1、第一步，div布局

这里面要弄清楚div的结构布局，还有起别名的方式，全局样式设置，中心位置margin：0 auto等css相关样式，子绝父相问题。。。。。。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>仿世纪佳缘</title><link rel="stylesheet" href="./sj.css">
</head>
<body><!-- 头 --><div class="new_header center">头部</div><!-- 登录注册部分 --><div class="new_login_register"><div></div></div><!-- 注册会员 --><div class="new_register_vip"><div class="reg_vip center">2.2亿注册会员</div></div><!-- 优质会员 --><div class="new_userbest"><div class="userbest center">2.2亿优质会员，就在眼前</div></div><!-- 申请服务 --><div class="new_service"><div class="service center">申请服务</div></div><!-- 底部1 --><div class="new_footer1"><div class="foot1 center">底部1</div></div><!-- 底部2 --><div class="new_footer2"><div class="foot2 center">底部2</div></div><div class="new_footer3"><div class="foot3 center">底部3</div></div>
</body>
</html>

CSS部分

*{margin: 0;padding: 0;
}
.center{width: 1016px;margin: 0 auto;
}
body{background-color: rgba(231, 47, 47, 0.089);
}
/* 头 */
.new_header{position: relative;height: 70px;background-color: aqua;
}
/* 登录注册部分 */
.new_login_register {height: 450px;position: relative;background: url(./imgs/big_bg4.jpg) no-repeat center top;
}
/* 注册会员 */
.new_register_vip {height: 78px;background-color: cornflowerblue;
}
.reg_vip {height: 100%;background-color: darkgray;
}
/* 优质会员 */
.new_userbest{background-color: aqua;height: 220px;padding: 10px;
}
.userbest{height: 100%;background-color: rgb(223, 203, 23);}
/* 服务申请 */
.service {background-color: #52c9eb;height: 115px;
}
/* 底部1 */
.new_footer1{height: 92px;background-color: yellowgreen;
}
.foot1{background-color: yellow;height: 100%;padding-top: 20px;
}
/* 底部2 */
.new_footer2{height: 27px;background-color: rgb(212, 110, 173);
}
.foot2{height: 100%;background-color: mediumaquamarine;
}
/* 底部3 */
.new_footer3{height: 50px;background-color: rgb(78, 132, 202);
}

效果图：

2、第二步，头部和注册表单实现

今天是仿这个页面的第二天，勇敢牛牛，不怕困难！冲！

头部：

  <!-- 头 --><div class="new_header center"><div class="new_wrap"><a class="logo" href=""><img src="./imgs/sjjy1.jpeg"></a><img class="logo" src="./imgs//sjjy2.png"><div class="form_login"><form><input type="text" value="邮箱/ID/手机号"><input type="password"><button>登录</button><div class="other_login1"><span>其他登录</span><div class="img3"><a href="" class="qq_login"></a><a href="" class="wb_login"></a><a href="" class="baidu_login"></a><a href="" class="wx_login"></a></div></div><div class="other_login2"><a href="">海外用户登录</a><a href="">忘记密码</a></div></form></div></div></div>

CSS部分被注释掉的是原来的，但是会出现下面情况：

于是乎，我直接截图裁剪过来了，效果图见下面，但是没有跳转功能，后面遇到再一个一个裁剪，然后直接给链接吧。。。。。。

/* 头 */
.new_header {height: 70px;position: relative;
}
.logo {float: left;
}
.new_header .form_login {margin: 20px 0 0 0;float: left;
}
.new_header .form_login input {height: 23px;width: 120px;padding: 0 4px 0 10px;margin-right: 8px;float: left;color: #aaa;border: 1px #d9d9d9 solid;
}
.new_header .form_login button {width: 67px;height: 25px;background-position: -816px -188px;border: 0;float: left;background-color: rgb(124, 185, 235);
}
/* 鼠标经过颜色变化 */
.new_header .form_login button:hover {background-color: rgb(111, 123, 235);
}
.new_header .form_login .other_login1 {float: left;font-size: 12px;color: #aaa;margin-left: 20px;margin-top: 5px;
}
.new_header .form_login .other_login1 span {float: left;
}
.img3 {width: 63px;height: 17px;margin-left: 54px;background: url(./imgs/login_bg.gif);}
/*
.new_header .form_login .other_login1 a{width: 16px;height: 16px;margin-left: 5px;   background-image: url(./images/login_bg.gif);
}
.new_header .form_login .other_login1 .qq_login {background-position: 0 0;
}.new_header .form_login .other_login1 .wb_login {background-position: -16px 0;
}.new_header .form_login .other_login1 .baidu_login {background-position: -32px 0;
}.new_header .form_login .other_login1 .wx_login {background-position: -48px 0;
} */.new_header .form_login .other_login2 {float: left;
}.new_header .form_login .other_login2 a {font-size: 12px;color: #aaa;/* 下划线隐藏 */text-decoration: none;margin: 5px 0 0 18px;
}

注册表单：

<!-- 注册部分 --><div class="new_login_register"><div class="user_reg center"><form class="register_form"><div class="form_reg"><h2>1分钟注册，享一辈子幸福！</h2><dl><dt>性别</dt><dd class=" sex"><input type="radio" name="sex" id="nan" value="man"><label class="nan"  for="nan">男</label><input type="radio" name="sex" id="nv" value="woman"><label class="nv" for="nv">女</label></dd></dl><dl><dt>生日</dt><dd class="w12 bir"><input type="date"></dd></dl><dl class="clearfix area"><dt>所在地区</dt><dd class="w12"><input type="text" placeholder="国家/省/市"></dd></dl><dl class="clearfix hy"><dt>婚姻状况</dt><dd class="hyzk"><input type="radio" name="hunyin" id="weihun" value="weihun" checked>未婚<input type="radio" name="hunyin"id="yihun" value="yihun">已婚<input type="radio" name="hunyin"id="sangou" value="sangou">丧偶</dd></dl><div class="regInput"><button>免费注册</button></div><p class="denglu"><a href="">我是会员，立即登录</a></p></div></form></div></div>

两个地方：
1、/* 清除每一个dl带来的浮动效果 */
.user_reg .form_reg dl:after{
display: block;
content: “”;
clear: both;
}
2、input标签类型为 type=“date”

/* 注册部分 */
.new_login_register {height: 450px;position: relative;background: url(./imgs/big_bg4.jpg) no-repeat center top;
}
.register_form{padding: 10px 0;
}
.form_reg{width: 398px;height: 380px;background-color: #fff;margin-top: 35px;}
.user_reg .form_reg h2{padding: 15px 0 10px 0;margin: 0 10px;font-size: 18px;font-weight: normal;color: #8e8e8e;border-bottom: 1px solid #f4f3f3;text-align: center;
}
.user_reg .form_reg dl{margin-top: 15px;
}
/* 清除每一个dl带来的浮动效果 */
.user_reg .form_reg dl:after{display: block;content: "";clear: both;
}
dt {width: 70px;padding: 6px;text-align: right;float: left;
}
dd{width: 272px;height: 32px;line-height: 32px;margin-left: 10px;float: left;text-align: left;
}
#nv{margin: 9px  0 0 43px;
}
/* 性别小图标 */
.user_reg .form_reg .sex label{width: 18px;height: 32px;padding-left: 22px;margin-left: 3px;background: url(./imgs/sex.jpg) no-repeat;
}
/* 生日和所在地区的输入框样式 */
.user_reg .form_reg .w12 input{width: 253px;height: 32px;padding-left: 15px;
}
/* 婚姻状况*/
.user_reg .form_reg .hy input{margin: 9px 0 0 40px;
}
#weihun{margin-left: 0;
}
/* 免费注册 */.user_reg .form_reg .regInput button{width: 229px;height: 48px;margin-top: 15px;margin-left: 93px;background-color: rgb(231, 86, 86);border: 0;font-size: 20px;color: #fFf;
}
/* 登录 */
.user_reg .form_reg .denglu{margin-top: 16px;text-align: center;
}
.user_reg .form_reg .denglu a{color: #929191;font-size: 14px;
}
/* 鼠标滑到,下划线隐藏 */
.user_reg .form_reg .denglu a:hover{text-decoration: none;
}

效果图：（性别小图标需要裁减，自个儿去整吧）

3、第三步，中间部分

我没有下面的任务图片，所以部分都是截图插入完成。


HTML部分

  <!-- 优质会员 --><div class="new_userbest"><div class="userbest center"><h2 class="sprite">2.2亿优质会员，就在眼前</h2><img src="./imgs/图像.png" class="user_img"><div class="best_search"><ul><form><li class="s_1"><b>更多优质会员，请搜索</b></li><li class="s_2"><b>我要找</b><div class="dropdown"><h3>请选择</h3><div class="dropdown-content"><p>女朋友</p><p>男朋友</p></div></div></li><li class="s_2"><b>年龄</b><div class="dropdown"><h3>请选择</h3><div class="dropdown-content"><p>20-30</p><p>30-40</p></div></div></li><li class="s_2"><b>地区</b><div class="dropdown"><h3>请选择</h3><div class="dropdown-content"><p>湖南</p><p>北京</p></div></div></li><li class="s_3"><button class="btn_submit">搜索</button></li></form></ul></div></div></div><!-- 申请服务 --><div class="new_service"><div class="service center"><img class="vip_img" src="./imgs/vip.png"><h2>红娘一对一服务 精准定位你的爱情</h2><a href="" class="btn_shenqing">申请服务</a></div></div>

注意，大盒子要对小盒子有一个相对定位position：relative，才能保证放大缩小不移位。
又是一个子绝父相问题

CSS部分

/* 优质会员 */
.new_userbest {background-color: #303438;padding: 87px 0;position: relative;
}.userbest {width: 1000px;margin: 0 auto;
}
.new_userbest .best_search li .s_1{padding-left: 30px;position: relative;
}
.new_userbest .best_search li .s_2{padding-left: 49px;
}
.new_userbest .best_search li .s_3{padding-left: 10px;
}
.new_userbest .best_search li {height: 28px;line-height: 28px;float: left;color: #ccc;
}
li {list-style: none;
}
h3{margin-right: 20px;
}
/* 选择下拉框部分 */
.dropdown {position: relative;display: inline-block;}
.dropdown-content {display: none;position: absolute;background-color: #111111;min-width: 50px;box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);padding: 3px 16px;
}.dropdown:hover .dropdown-content {display: block;}b{font-size: 24px;font-weight: 400;float: left;padding-right: 10px;
}
.new_userbest .best_search li .btn_submit {width: 137px;height: 36px;display: block;border: 0;font-size: 20px;margin-top: -3px;background-color: rgb(92, 158, 219);
}
.new_userbest .best_search li .value {width: 84px;height: 27px;line-height: 26px;font-size: 16px;color: #999;padding-left: 10px;border: 1px #666 solid;position: absolute;top: 0;left: 0;z-index: 10;background: #303438;cursor: pointer;
}
.new_userbest h2{height: 55px;line-height: 50px;padding: 29px 0 0 93px;font-size: 28px;color: #eff0f0;background-color: #303438;background: url(./imgs/人头.png) no-repeat;
}
.user_img{margin: 0 -74px;
}
/* 服务申请 */
.new_service {background-color: #52c9eb;height: 115px;position: relative;
}.new_service .service {position: relative;
}.service {width: 1000px;margin: 0 auto;
}.vip_img {width: 102px;height: 102px;position: absolute;}.new_service h2 {color: #fff;font-size: 34px;position: absolute;top: 35px;left: 12%;
}.new_service .btn_shenqing {background: url(./imgs/sprite.png);width: 167px;height: 57px;background-position: -210px -188px;position: absolute;top: 31px;right: 10px;/* 文字链接消失 */text-indent: -9999px;
}

效果图：

4、第四步，尾巴

重复步骤：给链接，放图片，改大小，定位置，就不啰嗦了

到此就全部结束啦（终于）~

仿世纪佳缘登录注册页面相关推荐

  1. 用Html实现世纪佳缘交友注册页面是什么体验？

    一.前言 在零基础必看的Html5+Css3+移动端前端视频教程(三)中主要学习了表格.列表.表单标签的使用,那这篇博客就利用这些知识,实现注册页面. 二.分析页面布局 这是世纪佳缘的官网,目前只凭借 ...

  2. 仿世纪佳缘会员注册页

    仿世纪佳缘会员注册页 相关代码如下: <!DOCTYPE html> <html lang="en"><head><meta charse ...

  3. 世纪佳缘登录之二，修改

    今天发现世纪佳缘的以前登录代码不行了,登录不成功.打印content后有毛病,没跳转过去. 需要再次请求一下登录后返回的<script type='text/javascript'>win ...

  4. 操作元素总结及作业1——世纪佳缘登录案例-黑马pink老师

    在黑马前端教程里面,操作元素部分有这样一个案例就是世纪佳缘的登陆案例. 实现:登录的隐藏内容,以及密码框的设计,点击后颜色的变化. 简单的算法:利用JS操作元素.事件以及if分支,修改表单获取焦点和失 ...

  5. DOM第一天作业--世纪佳缘登录框--pink老师

    运行成果: HTML代码块 <div class="register"><input type="text" class='ipt' valu ...

  6. 世纪佳缘财务及运营数据分析

    世纪佳缘成立于2003年10月8日,是中国在线婚恋交友平台,通过互联网.无线平台和线下活动为单身人士提供严肃婚恋交友服务.2011年5月11日,世纪佳缘登陆美国纳斯达克进行首次公开募股,成为首家上市的 ...

  7. 自娱自乐写爬虫 世纪佳缘篇

    最近一段时间不知怎得像是中了什么魔怔,特别的想用python写一个网络爬虫,也许是看了知乎上的某位大牛的分享,深感能自己写一个程序在浩瀚的互联网数据海洋中发现有意思的数据的酷炫,抑或就是想单纯的体验一 ...

  8. 世纪佳缘，玫瑰和面包开始PK

    你在桥上看风景 看风景人在楼上看你 明月装饰了你的窗子 你装饰了别人的梦     ----卞之琳<断章>       喜欢卞之琳这首诗的意境和韵味,如同一幅水墨画,淡雅,清新,悠远.    ...

  9. python 爬虫登录世纪佳缘

    python 爬虫登录世纪佳缘 程序运行相关环境: win7 python2.7.13 python requests包 python beautifulsoup包 代码示例: # -*- codin ...

  10. 【转】推荐系统入门实践：世纪佳缘会员推荐（完整版）

    推荐系统入门实践:世纪佳缘会员推荐(完整版) 版本 作者 联系 日期 1.0 周巍然 weiran.chow@gmail.com 20120723 2.0 严 程 supersteven198701@ ...

最新文章

  1. oracle 统计信息字典表,Oracle数据字典表查询
  2. Android之部分手机（oppo r9s）安装app出现崩溃问题解决办法
  3. c语言文件指针ab命令,C语言试题,~库(完整版~).doc
  4. 歌谣致学习编程的你们
  5. Django REST framework 源码中提供的默认配置
  6. 谷歌浏览器32位安装包_谷歌浏览器发布紧急安全更新修复Blink内核中的任意代码执行漏洞...
  7. loadrunner工具的组成
  8. 何时、何地应用何种窗函数?
  9. webpack+vue解决前端跨域问题
  10. 【通信】基于matlab多径衰落信道仿真【含Matlab源码 338期】
  11. 使用Object、param标签在页面显示PDF文件
  12. 微信广告数据源创建查询与上报-PHP
  13. ARM920T的MMU
  14. GNSS/INS组合导航（九）：三维简化的INS/GPS组合导航系统
  15. 三插头内部结构图_两脚插头和三脚插头区别是什么 插座的结构特点有哪些
  16. 蓝色学校网站模板_中小学网站源码_学校网站管理系统
  17. 去掉Dedecms幻灯片的标题文字和绿色背景
  18. msxml3.dll 错误 '80072efd' A connection with the server could not be established
  19. 零伽壹产业研究：新商业奇观元宇宙，多种技术的集大成者
  20. OBS录屏软件无法打开的问题，无法捕获到游戏画面的问题

热门文章

  1. echarts的边框图片之切图（重要）以及公共面板样式的制作
  2. css边框图片border-image切图原理
  3. shell脚本俄罗斯方块小游戏
  4. html网页设计代码作业—中国风的温泉酒店网(13页) HTML+CSS+JavaScript 学生web网页制作期末大作业_住宿 旅游 主题酒店
  5. android view 前景色,Android开发中的一些小技巧
  6. 传感，驱动，控制-第十章quiz2复习笔记（UTS-41081）
  7. 消防给水及消火栓系统技术规范_消防给水——消火栓系统分区给水剖析
  8. Goole Tag Manager 介绍
  9. 读书笔记-人际网络的中心
  10. Latex/CSDN字母输入对照表