前两天一位好朋友说让我去学一下前端的响应式布局，咱也不会啊，这不，安排上~
原世纪佳缘样例
一、结构分析
原图：
二、代码实现
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、第四步，尾巴
重复步骤：给链接，放图片，改大小，定位置，就不啰嗦了
