html - 我想用 html 和 css 解决所有这些评估

问题描述

我需要帮助来回答这个技术评估

步骤 1 在 STYLE 标记中，给 BODY 元素一个白色背景创建一个 ID 为 filter-query 的 BUTTON 元素，并给它一个select-textmdc-icon-button 和 material-icons 的 CSS 类。将其文本设置为 filter_list。创建一个 DIV 元素并给它一个 CSS 类 select。在 DIV 中，创建一个带有 select-text CSS 类的 SELECT 元素 SELECT 元素应该有一个选项，该选项被禁用并被默认选中。给这个选项任何你喜欢的文本，例如“选择用户” 接下来，用用户照片的 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 元素并给子 SPAN 类 prop 一个 data-age 的 HTML 属性，然后将其文本值设置为 Age :。具有类值的 SPAN 应具有 data-age-value 的 HTML 属性。HTML 属性不需要有值。就像 Age 一样，对上面列出的所有用户属性执行相同的操作，以便所有 SPAN 元素对都映射到一个用户属性。随意订购它们。步骤 3 创建一个 ID 为 oracle 且 CSS 类为 mdc-button 的 BUTTON。为按钮提供您选择的号召性用语文本，例如“计算 BMI” 创建一个 DIV 和一个结果 ID。在其中，使用 mdc-typography--headline5 的 CSS 类创建一个 HEADING 元素。将 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 宽，并且有居中的文本。带有结果 ID 的 DIV 中的 HEADING 应该有 1em 填充，白色背景，10% 弯曲边缘，无边距。带有结果 ID 的 DIV 中的 PARAGRAPH 应具有白色前景色、纯白色 5px 底部边框、2em 字体大小、无边距、0.5em 顶部/底部填充和无左/右填充第 6 步 ID 为 oracle 的 BUTTON 应有 2.5em 的上边距，实心的 1px 边框，并占据可用的水平空间。

标签： html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Mini App</title>

    <style>
      body{background:#ffffff}
      div.select{margin-bottom:2.5em}
      div.user-photo {
        margin: 1em auto;
        height:150px;
        width:150px;
        border-radius:50%;
        overflow:hidden;
      }
      div.details{color:#ffffff; 
      background:#6200ee; font-size:1.3em; 
        margin-top:4em; 
        padding:0.5em 1em 0.5em 1em; 
        border-radius:10px;}
      .details p{margin:0.3em}
      div#outcome{position:absolute; 
        right:2.2em; 
        bottom:6.5em; 
        width:100px;
        text-align:center}
      #outcome h5{padding:1em; 
        background:#ffffff; 
        border-radius:10%; 
        margin:0 }
      #outcome p{height:40px; 
        color:#ffffff;
        border-bottom:5px solid #ffffff; 
        font-size:2em; 
        margin:0; 
        padding:0.5em 0 0.5em 0;}
       #oracle{margin-top:2.5em; 
        border: 1px solid; 
        width:100%}
    </style>
  </head>
  <body>
     <button id="filter-query" class="mdc-icon-button material-icons">filter_list</button>
    <div class="select">
      <select class="select-text"><option disabled selected>Select User</option> 
      </select>
       <div class="user-photo">
    <img src="https://via.placeholder.com/150"  alt="user photo"/>
    </div>
    <div class="details mdc-elevation--z3">
      <p><span class="prop" data-age="">Age :</span><span class="value" data-age-value>35</span></p>
      <p><span class="prop" data-height="">Height :</span><span class="value" data-height-value>1.6m</span></p>
      <p><span class="prop" data-weight="">Weight :</span><span class="value" data-weight-value>75kg</span></p>
      <p><span class="prop" data-gender="">Gender :</span><span class="value" data-gender-value>Male</span></p>
      <p><span class="prop" data-country="">Country :</span><span class="value" data-country-value>Nigeria</span></p>
      </div>
    
      <button id="oracle" class="mdc-button">Calculate BMI</button>
      <div id="outcome"><h5 class="mdc-typography--headline5" >BMI</h5><p></p>
    </div>
  </body>
</html>

html - 我想用 html 和 css 解决所有这些评估

问题描述

解决方案

推荐阅读