世纪佳缘网页登录版_pc登录是什么意思

效果如下：

 页面解析：在这个注册框中呢，可以分为三个部分

        1.标题

        2.输入框

        3.注册/登录

重点自然是在注册框了，

在注册框中，我们可以看到，

        1.每一行的左边的文字是靠右侧的

        2.两次用到单选框，其中在婚姻状况里，有默认选项

        3.生日和所在地区是两个不同类型的输入框

大家可能会遇到的一些问题：

1、背景图偏移，由于背景图较大，所以会出现X轴和Y轴的滚动条，当在body中添加溢出隐藏后，图片偏移。这个时候，可以设置图片的位置为X轴center，Y轴top

2、注册框与背景图之间的top边距问题：

        解决办法，在注册框之间加了一个高度为0 的div块，但是div块中是要加内容的，否则不其效果，为达到效果，这里的内容可以使用 来代替。

3.左侧内容的靠右显示：只需设置：text-align: right;就可以了，平常用的多的是居中显示

4.一组单选框中只能选择一个选项的效果：

        在input框中写入name属性，同一组的选项，name属性一直就可以实现单选了

5.单选框中点击文字也可以选中的效果：

        使用lable标签将文字包起来，然后通过lable的for属性与input的id属性将选项的圆圈与对应的文字对应起来，也可以将lable标签放在input的外面

6.生日年月日怎么让浏览器智能的显示，

        使用input标签的type属性值中的date值，

         date 显示年月日   /  month显示 年月   /  week 显示 哪一年的第几周

7.免费注册的鼠标滑过的效果，

         这个是通过图片的定位做的，具体看CSS代码

8.出现这样的情况：（颜色是我特意加上，方便大家观察的）

原因：加了浮动之后，没有清除浮动

解决办法：给dl标签加一个after伪类 清除浮动

.user_reg .form_reg dl:after{

display: block;

content: “”;

clear: both;

}

具体代码如下：

HTML：

 <!-- 注册 -->
     <div class="new_user_reg">
        <div class="user_reg center2">
            <div style="height: 0;">&nbsp;</div>
            <form>
                <div class="form_reg">
                    <h2>1分钟注册，享一辈子幸福！</h2>
                    <dl class="clearfix">
                        <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 class="clearfix">
                        <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>未婚<label for="weihun"></label>
                            <input type="radio" name="hunyin"id="yihun" value="yihun">已婚<label for="yihun"></label>
                            <input type="radio" name="hunyin"id="sangou" value="sangou">丧偶<label for="sangou"></label>
                        </dd>
                    </dl>
                    <div class="regInput">
                        <button></button>
                    </div>
                    <p class="denglu">
                        <a href="">我是会员，立即登录</a>
                    </p>
                </div>
            </form>
        </div>
    </div>

CSS：
 

/* 注册 */
.new_user_reg{
    height: 450px;
    /* background-color: pink; */
    background: url(./images/big_bg4.jpg) no-repeat center top;
    position: relative;
}
.user_reg .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;

}
.user_reg .form_reg dl dt {
    width: 70px;
    padding: 6px;
    text-align: right;
    float: left;
}
.user_reg .form_reg dd{
    width: 272px;
    height: 32px;
    line-height: 32px;
    margin-left: 10px;
    /* background-color: violet; */
    float: left;
    text-align: left;
}  
/* 性别 */
/* 给性别选项加上合适的边距，这里选择在选项女上加边距 */
.user_reg .form_reg .sex input#nv{
    margin: 9px  0 0 43px;
} 
/* 性别选项前面的小图标 */
.user_reg .form_reg .sex label{
    width: 18px;
    height: 32px;
    padding-left: 22px;
    margin-left: 3px;
    background-image: url(./images/sex.jpg);
    background-repeat: no-repeat;
}
.user_reg .form_reg .sex .nan{
    background-position: 0 0;
} 
.user_reg .form_reg .sex .woman{
    background-position: 5px -26px;
}
/* 生日和所在地区的输入框样式 */
.user_reg .form_reg .w12 input{
    width: 253px;
    height: 32px;
    padding-left: 15px;
}
/* 婚姻状况 位置设置*/
.user_reg .form_reg .hy input{
    margin: 9px 0 0 40px;
}
.user_reg .form_reg .hy #weihun{
    margin-left: 0;
}
/* 免费注册 */
.user_reg .form_reg .regInput{
    width: 229px;
    height: 48px;
    margin-left: 93px;
    margin-top: 15pfx;
}
.user_reg .form_reg .regInput button{
    width: 100%;
    height: 100%;
    background-image: url(./images/sprite.png);
    background-position: -387px -188px;
    border: 0;
}
.user_reg .form_reg .regInput button:hover{
    background-position: -387px -246px;
}
/* 登录 */
.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;
}

今天的文章世纪佳缘网页登录版_pc登录是什么意思分享到此就结束了，感谢您的阅读。