我想在html和css中解决所有这些评估 [英] i want solve all this assessment in html and css

问题描述

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

i need help to answer this technical assessement

第1步 在STYLE标签中，将BODY元素设置为白色背景 创建一个ID为filter-query的BUTTON元素，并为其提供CSS类select-text mdc-icon-button和material-icons.将其文本设置为filter_list. 创建一个DIV元素，并为其选择一个CSS类.在DIV中，使用带有select-text的CSS类创建一个SELECT元素 SELECT元素应具有被defualt禁用和选择的选项.给此选项提供您喜欢的任何文本，例如选择用户" 接下来，使用用户照片的CSS类创建一个新的DIV.在其中创建一个IMAGE并将其src设置为来自 https://placeholder.com/的占位符.给您的IMAGE备用文字 接下来，使用详细信息和mdc-elevation-z3的CSS类创建DIV.该DIV应该具有5个PARAGRAPH元素，每个元素都包含一个带有CSS类prop的SPAN和另一个带有CSS类值的SPAN 第2步 使用到目前为止创建的SPAN元素，您的应用将显示任何给定用户的年龄，身高，体重，性别和国家/地区.我们称这些为用户属性！

Step 1 Within the STYLE tag, give the BODY element a white background Create a BUTTON element with ID of filter-query, and give it a CSS class of select-textmdc-icon-button and material-icons. Set its text to filter_list. Create a DIV element and give it a CSS class of select. Within the DIV, create a SELECT element with a CSS class of select-text The SELECT element should have an option that is disabled and selected by defualt. Give this option any text you like, e.g "Select User" Next, create a new DIV with a CSS class of user-photo. Inside it, create an IMAGE and set its src to a placeholder from https://placeholder.com/ Make sure to give your IMAGE an alternate text Next, create a DIV with CSS class of details and mdc-elevation--z3. This DIV should have 5 PARAGRAPH elements, each containing a SPAN with CSS class prop and another SPAN with CSS class of value Step 2 Using the SPAN elements so far created, your app will display the Age, Height, Weight, Gender, and Country of any given user. Let's call these the user properties!

对于给定的用户属性(例如，年龄)，找到一个PARAGRAPH元素，并给class类prop的子SPAN提供data-age的HTML属性，然后将其文本值设置为Age:.具有类值的SPAN应该具有data-age-value的HTML属性. HTML属性不需要具有vlaue. 就像对于Age一样，对上面列出的所有用户属性执行相同的操作，以便将所有SPAN元素对都映射到一个单独的用户属性.请随意订购它们. 第三步 创建一个ID为oracle的按钮和mdc-button的CSS类.为按钮提供您选择的号召性用语，例如计算BMI" 创建DIV结果ID.在其中，使用CSS类mdc-typography--headline5创建HEADING元素.将HEADING的文本设置为BMI. 在HEADING旁边并仍在带有结果ID的DIV中，创建一个空的PARAGRAPH. 是时候让您的应用看起来不错了.为了获得更好的预览效果，请随时在SPAN元素中为每个用户属性设置一些虚拟数据值

For a given user property, e.g Age, locate a PARAGRAPH element and give the child SPAN with class prop an HTML attribute of data-age, then set its text value to Age :. The SPAN with class value should have an HTML attribute of data-age-value. The HTML attributes do not need to have a vlaue. Just like for Age, do same for all the user properties listed above, such that all pairs of SPAN elements are mapped to excatly one user property. Feel free to order them anyhow you like. Step 3 Create a BUTTON with an ID of oracle and CSS class of mdc-button. Give the button an call-to-action text of your choice, e.g "Calculate BMI" Create a DIV an ID of outcome. Within it, create a HEADING element with CSS class of mdc-typography--headline5. Set the text of the HEADING to BMI. Next to the HEADING and still within the DIV with ID of outcome, create an empty PARAGRAPH. Time to make your app look good. To get a better preview as you go along, feel free to set some dummy data values in the SPAN elements for each user property

第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应该具有白色前景色，纯白色5px底边框，2em字体大小，无边距，0.5em上/下填充和无左/右填充 第6步 ID为oracle的按钮应具有2.5em的上边距，实心1px边框，并占用可用的水平空间.

Step 4 The .select DIV should have a bottom margin of 2.5em The .user-photo DIV wrapping the user's IMAGE should have 150px of width and height, and styled to display as a circle. You might need to explore the overflow CSS property to make the IMAGE comply with the circular shape of the DIV Step 5 The .details DIV should have white foreground color and #6200ee background color, font size of 1.3em, top margin of 4em, padding top/bottom of 0.5em and padding left/right of 1em, and optional curved edges of 10px The PARAGRAPH elements within the .details DIV should have margins of 0.3em The DIV with ID of outcome should use absolute positioning, with 2.2em from the right edge and 6.5em from the bottom edge of the viewport. It should be 100px wide, and have centered text. The HEADING within the DIV with ID of outcome should have 1em padding, white background, 10% curved edges, and no margins. The PARAGRAPH within the DIV with ID of outcome should have a white foreground color, solid white 5px bottom border, 2em font size, no margins, 0.5em top/bottom padding and no left/right padding Step 6 The BUTTON with ID of oracle should have 2.5em top margin, solid 1px border, and occupy the available horizontal space.

推荐答案

<!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和css中解决所有这些评估的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！