请问该怎么样制作这个界面

问题遇到的现象和发生背景

个人网站分为四个部分：注册页面，登录界面，主界面，以及分界面。
1）注册页面需要使用到用户名及密码等信息，用到的标签有表格、文本框、单选按钮、复选按钮、下拉列表框等基本的标签；登录界面需要输入用户名和密码；
2）登陆成功后，可利用javascript判断输入用户名和密码的正确性，输入正确，则利用form标签中action转向主界面，如果输入不正确，可用警告框提醒用户：“输入不正确，再次输入”；
3）主界面类似图1-1，采用四个盒子分别代表个人简历，我的理想，我的生活，学习内容。每个盒子都采用float浮动。

图1-1 主界面
个人简历界面：主要是css3实体样式；同样采用了四个盒子分别介绍四个内容。如图1-2，具体内容自定。

图1-2个人简历界面
我的理想界面：列举我的理想，可以使用无序列表或者表格排列。
我的生活界面：主要内容采用展示照片墙或者视频来体现。
学习内容界面：采用list-style:none的有序列表。

可以使用弹性盒子来完成，如果用浮动的兼容性不好

用display：flex来写