仿世纪佳缘登录注册页面

最新推荐文章于 2022-04-13 20:58:56 发布

rookie_0_0

最新推荐文章于 2022-04-13 20:58:56 发布

阅读量1.3k

点赞数

分类专栏：前端仿例文章标签： html css

本文链接：https://blog.csdn.net/rookie_0_0/article/details/118640117

版权

本文详细介绍了如何仿制世纪佳缘的登录注册页面，包括结构分析和逐步的代码实现。从div布局开始，通过HTML和CSS实现头部、注册表单、中间部分以及尾巴的细节，探讨了响应式布局中的div结构、样式设置、浮动清除、输入框类型等问题，并展示了每个步骤的效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

原世纪佳缘样例

一、结构分析

原图：
在这里插入图片描述

二、代码实现

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

最低0.47元/天解锁文章