介绍

介绍

今天福哥会带着大家完成个人资料修改页面和用户头像设置页面的模板的设计。个人资料里的项目比较多一些，这里面的项目在数据库里的没有对应的字段用来保存数据，我们今后会一起不上来。用户头像设置里有一个图片，这个图片是可以点击的，点击后会打开文件选择对话框让用户选择一张图片，然后系统会将这个照片经过处理加工后保存起来作为用户的头像使用。

个人资料修改页面

HTML

<!-- profile form begin -->
<div class="row login-form">
    <div class="col-sm-12">
        <h3 class="text-center">个人资料修改</h3>
        <p>这里是修改个人资料的地方</p>
        <form>
            <div class="form-group">
                <label>昵称</label>
                <input class="form-control" type="text" name="nick" />
            </div>
            <div class="form-group">
                <label>性别</label>
                <div>
                    <label>
                        <input type="radio" name="gender" value="male" />
                        男士
                    </label>
                    <label>
                        <input type="radio" name="gender" value="female" />
                        女士
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label>生日</label>
                <div>
                    <select class="form-control d-inline" name="year" style="width: 80px;">
                        <option>年份</option>
                        <option value="1930">1930</option>
                        <option value="1931">1931</option>
                        <option value="1932">1932</option>
                        <option value="1933">1933</option>
                        <option value="1934">1934</option>
                        <option value="1935">1935</option>
                    </select> <label>年</label>
                    <select class="form-control d-inline" name="year" style="width: 80px;">
                        <option>月份</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select> <label>月</label>
                </div>
            </div>
            <div class="form-group">
                <label>学历</label>
                <select class="form-control" name="edu">
                    <option>学历选择</option>
                    <option value="hs">中学</option>
                    <option value="ts">中专/技校</option>
                    <option value="cg">大学专科</option>
                    <option value="ug">大学专科</option>
                    <option value="md">硕士</option>
                    <option value="dc">博士</option>
                </select>
            </div>
            <div class="form-group">
                <label>介绍</label>
                <textarea class="form-control" name="note"></textarea>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-sm form-control">保存</button>
            </div>
        </form>
    </div>
</div>
<!-- profile form end -->

用户头像设置页面

HTML

<!-- icon form begin -->
<div class="row login-form">
    <div class="col-sm-12">
        <h3 class="text-center">头像设置</h3>
        <p>选择一张图片作为您的头像，头像会被自动裁剪成正方形的照片</p>
        <form>
            <div class="form-group">
                <div class="py-3 text-center">
                    <img src="images/000.jpg" style="width: 80%;" />
                </div>
                <input class="form-control-file" type="file" name="icon" style="display: none;" />
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-sm form-control">上传</button>
            </div>
        </form>
    </div>
</div>
<!-- icon form end -->

总结

童鞋们今天和福哥一起完成了TFUMS的个人资料修改和用户头像设置页面的模板的制作，到目前为止，我们分析需求得出来的页面的模板就全部都做好了。接下来我们要开始给这些静态的HTML页面增加灵魂了，也就是说要编写模板页面的JS部分的程序了。那么JS部分包括什么内容？我们需要了解哪些知识？怎么开始？这些问题我们将在下一课里给大家介绍，敬请期待~~