知乎首页实战之表单模块输入部分细节

最新推荐文章于 2018-05-23 16:57:00 发布

skybiut

最新推荐文章于 2018-05-23 16:57:00 发布

阅读量308

点赞数

分类专栏：实战知乎首页

本文链接：https://blog.csdn.net/skybiut/article/details/80320348

版权

实战知乎首页专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表单模块输入部分细节

输入手机号、输入验证码、语音验证码、注册按钮、协议部分

输入手机号部分：选择区号、分隔线、手机号输入
选择区号可以用按钮实现，实现文本垂直居中有个很好用的方法，将line-height属性的值设置为块height的值，当两者相等时，文本居中。
输入号码部分用< input >标签，这里要隐藏边框。

.formRegion{              //选择区号
    width: 92.9667px;
    height: 48px;
    background-color: #b8e5f8;//块色
    text-align: start;//文本部分
    font-size: 14px;
    font-weight: 400;
    line-height: 48px;//居中显示
    color: rgb(133, 144, 166);//灰色
}

.telLine{               //分隔线
    position: absolute;//父级元素是rectInterface
    left: 132.9667px;
    top: 0;
    margin: 13px 12px 13px 12px;//设置外边距，可由分块不同进行调整
    width: 1px;
    height: 22px;
    background-color: rgb(133, 144, 166);//粉色
}

#formTel{
    background-attachment: scroll;
    background-color: yellow;
    height: 48px;
    text-align: start;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    outline-style: none;//设置轮廓的样式，获得焦点时输入框不显示轮廓
    border-style:none;//设置元素所有边框的样式,定义无边框
    color: rgb(133, 144, 166)
}

这里写图片描述

语音验证码
验证码输入框，获取验证码按钮，格式几乎同上

#formCaptcha{
    background-color: plum;//紫色
    height: 45px;
    text-align: start;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    outline-style: none;
    border-style:none;//边框格式
    color: rgb(133, 144, 166)
}

.mesObtain{
    background-attachment: scroll;
    background-color: white;
    position: absolute;
    right: 0;
    top: 0;
    margin: 10.5px 0 10.5px 0;
    //按钮设置大小，为后面js做准备，只能点击字体部分才能做出反应
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: right;
    color: #1783c8;
}

这里写图片描述

注册按钮
注册按钮部分定好位置大小，设置好边框四角样式

.buttonForm{
    position: absolute;//父级元素依旧是rectInterface
    top: 143px;
    margin-top: 30px;
    border-width: 1px;
    border-style: solid;
    border-color: #0084ff;//边框颜色，设置之前必须有border-style属性
    border-radius:3px;//向 div 元素添加圆角边框
    padding: 0 16px 0 16px;
    width: 352px;
    height: 36px;
    background-color: #0084ff;
    color: white;
    text-align: center;
}

协议部分
在知乎首页源码里找出两个协议的超链接，添加两个< a >标签和一个按钮即可

<div class="protocol">注册即代表同意
     <a href="https://www.zhihu.com/terms">《知乎协议》</a>
     <a href="https://www.zhihu.com/terms/privacy">《隐私政策》</a>
     <a class="protocolReg" href="https://www.zhihu.com/org/signup">注册机构号</a>
</div>
}

.protocolReg{          //按钮
    background-color: rosybrown;
    position: absolute;
    left: 282px;
    width: 70px;
    height: 25px;
    color: rgb(23, 81, 153);
}