注册页index.html

step1 html

<img src="imgs/logo.png" />欢迎使用个人电子码
<form action="/healthCode/regist" method="post" enctype="multipart/form-data" >
    <label for="file">个人近期照片：</label>
    <input type="file" id="file" name="file"><br>
    <label for="name">姓名：</label>
    <input type="text"  id="name" name="name" placeholder="请输入姓名"><br>
    <label for="telephone">手机号码：</label>
    <input type="text"  id="telephone" name="telephone" placeholder="请输入手机号码" onblur="checkTel()" /><br>
    <label for="idcard">身份证号码：</label>
    <input type="text"  id="idcard" name="idcard" placeholder="请输入身份证号码"/><br>
    <label for="location">居住信息：</label>
    <input type="text"  id="location" name="location" placeholder="请输入居住信息"/><br>
    <label for="carNo">车牌号：</label>
    <input type="text"  id="carNo" name="carNo" placeholder="请输入车牌号"/><br>
    <label for="tmpLocation">是否临时居住点：</label>
    <input type="radio" name="tmpLocation" id="tmpLocation" value="是"/>是
    <input type="radio" name="tmpLocation" id="tmpLocation" value="否"/>否<br>
    <label for="telephone">是否14天从国外、省外返回：</label>
    <input type="radio" name="outToIn"  value="是"/>是
    <input type="radio" name="outToIn" value="否"/>否<br>
    <label for="sex">性别：</label>
    <input type="radio" name="sex" id="sex" value="男"/>男
    <input type="radio" name="sex" id="sex" value="女"/>女<br>
    <label for="health">身体是否正常：</label>  
    <input type="radio" name="health" id="health" value="是"/>是   
    <input type="radio" name="health" id="health"value="否"/>否   <br>   
    <button type="submit">注册健康码</button>
    <a href="login.html">我的健康码</a>
 </form>

step2 用divr把各部分包起来

<div class="container">
    <div class="navbar-header">
        <img src="imgs/logo.png" style="width: 170px;margin-left: 100px;margin-top:10px" />
        <span>欢迎使用个人电子码</span>
    </div>
    <div class="login-form">
        <h2>个人电子码注册</h2>
        <form action="/healthCode/regist" method="post" enctype="multipart/form-data">
            <div class="form-item">
                <label for="file">个人近期照片：</label>
            </div>
            <div class="form-item">
                <input type="file" id="file" name="file">
            </div>


            <div class="form-item">
                <label for="name">姓名：</label></div>
            <div class="form-item">
                <input type="text" id="name" name="name" placeholder="请输入姓名">
            </div>


            <div class="form-item">
                <label for="telephone">手机号码：</label>
            </div>
            <div class="form-item">
                <input type="text" id="telephone" name="telephone" placeholder="请输入手机号码" onblur="checkTel()" />
            </div>

            <div class="form-item">
                <label for="idcard">身份证号码：</label></div>
            <div class="form-item"><input type="text" id="idcard" name="idcard" placeholder="请输入身份证号码" /></div>

            <div class="form-item">
                <label for="location">居住信息：</label></div>
            <div class="form-item"><input type="text" id="location" name="location" placeholder="请输入居住信息" /></div>

            <div class="form-item">
                <label for="carNo">车牌号：</label></div>
            <div class="form-item"><input type="text" id="carNo" name="carNo" placeholder="请输入车牌号" /></div>

            <div class="form-item">
                <label for="tmpLocation">是否临时居住点：</label></div>
            <div class="form-item"><input type="radio" name="tmpLocation" id="tmpLocation" value="是" />是
                <input type="radio" name="tmpLocation" id="tmpLocation" value="否" />否</div>

            <div class="form-item">
                <label for="telephone">是否14天从国外、省外返回：</label></div>
            <div class="form-item"><input type="radio" name="outToIn" value="是" />是
                <input type="radio" name="outToIn" value="否" />否</div>

            <div class="form-item">
                <label for="sex">性别：</label></div>
            <div class="form-item"><input type="radio" name="sex" id="sex" value="男" />男
                <input type="radio" name="sex" id="sex" value="女" />女</div>

            <div class="form-item">
                <label for="health">身体是否正常：</label></div>
            <div class="form-item"><input type="radio" name="health" id="health" value="是" />是
                <input type="radio" name="health" id="health" value="否" />否 </div>
            <div class="form-item">
                <button type="submit">注册健康码</button>
            </div>
            <div class="btn2 form-item"><a href="login.html">我的健康码</a>
            </div>
        </form>
    </div>
</div>

目前效果

image.png

step3 css美化

    <style>
    /* body加背景色 
    设置字体大小*/
    body{
        margin:0;
        background-color: #007FC6;
        font-size: 12px;
    }
    /* 头部设置高度和背景颜色 
     顶部固定定位*/
    .navbar-header{
        width:100%;
        height:36px;
        background-color:#F8F8F8 ;
        position: fixed;
        top:0;
    }
    /* 头部字体向右,设置字体颜色 */
    span{
        padding-left: 500px;
        color:#777777;
    }
    /* 整个form的样式 flex垂直布局*/
    .login-form{
        width:30%;
        margin:50px auto;
        background-color: #F5F5F5;
        display: flex;
        flex-direction: column; /*垂直布局 */
        align-items: center; /* 各子项居中 两侧留边*/
        justify-content: space-around;/*垂直方向分散布局*/
    }
    /* 各子项间加间距 */   
    .form-item{
        margin:5px;
    }
    /* 按钮加样式 */
    button{
        width:100%;
        background-color: #337AB7;
        color:white;
    }
    .btn2{
        background-color: #008000;
        /* 以下两行字垂直居中 */
        height:26px;
        line-height: 26px;
        /* 文字水平居中 */
        text-align: center;
    }
    /* a标签未被点击时的样式 */   
    a:link{
        color:white;
        text-decoration: none;
    }
</style>

效果：

image.png