步骤1：
在STYLE标签中，将BODY元素设置为白色背景 创建一个ID为filter-query的BUTTON元素，并为其指定CSS类mdc-icon-button和material-icons。将其文本设置为filter_list。 创建一个DIV元素，并为其选择一个CSS类。在DIV中，使用带有select-text的CSS类创建一个SELECT元素 SELECT元素应具有被defualt禁用和选择的选项。给此选项提供您喜欢的任何文本，例如“选择用户” 接下来，使用用户照片的CSS类创建一个新的DIV。在其中，创建一个IMAGE并将其src设置为https://placeholder.com/的占位符。请确保为IMAGE提供备用文本 接下来，使用CSS类的详细信息和mdc-elevation--z3创建DIV。该DIV应该包含5个PARAGRAPH元素，每个元素包含一个带有CSS类prop的SPAN和另一个带有CSS类值的SPAN
第2步：
使用到目前为止已创建的SPAN元素，您的应用将显示任何给定用户的年龄，身高，体重，性别和国家/地区。我们称这些为用户属性！
对于给定的用户属性（例如Age），找到一个PARAGRAPH元素，并将class prop类的子SPAN赋予data-age的HTML属性，然后将其文本值设置为Age:。具有类值的SPAN应该具有data-age-value的HTML属性。 HTML属性不需要带有vlaue。 就像对于Age一样，对上面列出的所有用户属性执行相同的操作，以便将所有SPAN元素对都映射到一个用户属性。随意订购它们。
第3步：
创建一个ID为oracle的按钮和mdc-button的CSS类。为按钮提供您选择的号召性用语，例如“计算BMI” 创建DIV结果ID。在其中创建一个具有mdc-typography--headline5 CSS类的HEADING元素。将标题的文本设置为BMI。 在HEADING旁边并仍在带有结果ID的DIV中，创建一个空PARAGRAPH。 是时候让您的应用看起来不错了。为了获得更好的预览效果，请随时在SPAN元素中为每个用户属性设置一些虚拟数据值
第4步：
.select DIV的底边距应为2.5em 包裹用户的IMAGE的.user-photo DIV应该具有150px的宽度和高度，并设置其样式以显示为圆形。您可能需要探索溢出的CSS属性，以使IMAGE符合DIV的圆形形状
第5步： .details DIV应该具有白色前景色和＃6200ee背景色，字体大小为1.3em，顶部边距为4em，顶部/底部填充为0.5em，左侧/右侧填充为1em，可选的弯曲边缘为10px .details DIV中的PARAGRAPH元素的边距应为0.3em 具有结果ID的DIV应该使用绝对定位，从视口的右边缘起2.2em，从视口的底部边缘起6.5em。它应为100px宽，并具有居中文本。 DIV中带有结果ID的HEADING应该具有1em填充，白色背景，10％弯曲的边缘并且没有边距。 DIV中带有结果ID的PARAGRAPH应该为40px高，具有白色前景色，底边框为5px的纯白色，字体大小为2em，没有边距，顶部/底部填充为0.5em，并且没有左侧/右侧填充
第6步：
ID为oracle的按钮应具有2.5em的上边距，实心1px边框，并占用可用的水平空间。