知乎首页实战之表单模块

知乎首页编写之表单模块

---

知乎首页表单模块大致分为三个模块：logo，标语，输入界面，如下图；

将底色改为白色，对三个div块样式表进行修饰，给不同的颜色便于区分

.rectBrand{
    background-attachment: scroll;
    padding:30px 0 5px;
    width:432px;
    height:145.633px;
    background-color: yellow;
}

.brandSlogan{
    background-attachment: scroll;
    position: absolute;
    top: 110.633px;
    width: 432px;
    height: 30px;
    background-color: rebeccapurple;//底色
    font-size:22px;
    text-align: center;
    color:#0084ff;//字体颜色
}

.rectInterface{
    background-attachment: scroll;
    position: absolute;
    top: 162px;
    width: 432px;
    height: 342px;
    background-color: palevioletred;![这里写图片描述](https://img-blog.csdn.net/20180514134416378?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NreWJpdXQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
}

---

logo

logo部分想偷下懒，所以用截图工具截取了知乎首页的logo，记录好截取的像素，再定义一个小div放在黄色区块中部

.brandLogo{
    background-attachment: scroll;
    position: absolute;
    left: 146px;
    width: 140px;
    height: 65.633px;
    background-image: url("brand.png");
    background-size: 100%;
    background-color: #1783c8;
}

---

表单界面

标语部分在划分区块时已经一并给出
表单界面大致分为两块，输入与切换部分,可以分别为其构造一个div，但这里只为输入构造，button直接接在其后；

.brandLogo{
    background-attachment: scroll;
    position: absolute;
    left: 146px;
    width: 140px;
    height: 65.633px;
    background-image: url("brand.png");
    background-size: 100%;
    background-color: #1783c8;
}

效果如图

---

输入部分（绿色）

输入部分分为五个部分：输入手机号、输入验证码、语音验证码、注册按钮、协议部分。

.interTel{
    background-attachment: scroll;
    width: 352px;
    height: 48px;
    background-color: hotpink;
}//手机号输入

.interCaptcha{
    background-attachment: scroll;
    position: absolute;
    margin-top: 12px;
    width: 352px;
    height: 48px;
    background-color: rgba(0, 0, 0, 0);
    color: rgb(133, 144, 166)
}//输入验证码

.captchaVoice{
    background-attachment: scroll;
    position: absolute;
    top: 60px;
    left: 252px;
    width: 100px;
    height: 20px;
    background-color: white;
    color: rgb(133, 144, 166);
    text-align: right;
}//语音验证码

.buttonForm{
    background-attachment: scroll;
    position: absolute;
    top: 143px;
    margin-top: 30px;
    border-width: 1px;
    border-style: solid;
    border-color: #0084ff;
    border-radius:3px;//使得边角出现半圆形效果
    padding: 0 16px 0 16px;
    width: 352px;
    height: 36px;
    background-color: #0084ff;
    color: white;
    text-align: center;
}//注册按钮

.protocol{//可用span标签界定位置，也可以用button设置为白色效果
    background-attachment: scroll;
    background-color: green；
    position: absolute;
    top: 209px;
    margin-top: 16px;
    width: 352px;
    height: 25px;
    background-color: white;
    color: rgb(133, 144, 166);
    font-size: 14px;
    line-height: 25px;
    justify-content: center;
}//协议部分

（上图为前期截图，缺少语音验证部分，可建立模板尝试*）