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

表单模块输入部分细节

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


输入手机号部分:选择区号、分隔线、手机号输入
选择区号可以用按钮实现,实现文本垂直居中有个很好用的方法,将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);
}

以上全部效果如图:
这里写图片描述

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/skybiut/article/details/80320348
个人分类: 实战知乎首页
上一篇知乎首页实战之表单模块
下一篇知乎首页实战之下载知乎App模块
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭