个人简历界面总结

  今天学习了怎么制作一个个人简历的页面。

  制作一个个人简历的界面，首先要规划好各部分的功能，简历包括表头和表单的内容。对于要写在同一行的内容，需要先写一个<div class="row"></div>(表示一行),再往里面嵌套内容（嵌套的内容所占的总行数不超过12）。

​
  <div class="col-md-6">
        <div class="form-group required">
              <label>性别</label>
                <div class="gender-radio">
                  <div>
                     <input type="radio" name="gender" id="male" value="male" required>
                     <label for="male">男</label>
                  </div>

                  <div>
                     <input type="radio" name="gender" id="female" value="female" required>
                     <label for="female">女</label>
                  </div>

                  <div>
                     <input type="radio" name="gender" id="secret" value="secret" required>
                     <label for="secret">其他</label>
                  </div>

               </div>
          </div>
   </div>

​

该代码可以表示性别的选择，但是显示出来的效果选项都在同一条竖直线上，为了格式好看，需要把它的格式改成选项在同一行的效果，此时我们可以修改gender-radio的样式，例如在head里面添加.gender-radio {

             display: flex;         #表示将选项放在同一直线上

            align-items: center;        #表示子元素在交叉轴上居中对齐

}

为了美化界面，我们会选择在文字旁边添加更容易理解的图标，实现这些图标的显示，需要用到font awesome中的图案，因此在使用前，我们需要在head中引入font awesome。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

利用上面的方法就可以引入font awesome了。引入后，我们可以使用格式如<i class="fa fa-#"></i>的语句，添加在标题中，显示相应的图案。

例如：

<h1><i class="fa fa-user"></i> 个人简历表单</h1>

个人简历表单的旁白就会显示出用户的样式。

常见图标样式：

用户图标	HTML代码	描述
用户图标	<i class="fa fa-user"></i>	表示用户或个人信息
邮件图标	<i class="fa fa-envelope-o"></i>	表示电子邮件
手机图标	<i class="fa fa-phone"></i>	表示电话联系方式
地图标记图标	<i class="fa fa-map-marker"></i>	表示地理位置
公文包图标	<i class="fa fa-briefcase"></i>	表示工作经历
星星图标	<i class="fa fa-star"></i>	表示技能评分
上传图标	<i class="fa fa-cloud-upload"></i>	表示文件上传
纸飞机图标	<i class="fa fa-paper-plane"></i>	表示提交按钮
锁图标	<i class="fa fa-lock"></i>	表示密码或安全
日历图标	<i class="fa fa-calendar"></i>	表示日期选择
教育图标	<i class="fa fa-graduation-cap"></i>	表示学历或教育背景

注：修改各部分的格式的时候，1.可以在head里面加入<style></style>,在style里面修改

                                                   2.可以通过new->file添加一个CSS文件，在CSS文件中写

                                                 3.如果是少部分修改，也可以在div里面加入style=“”，在引号中修改