色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

& quot對齊-項目& quot顯示網格中的屬性僅影響單個網格項目

CSS
江奕云1年前8瀏覽0評論

我是CSS和HTML的新手。我想通過網格創建一個結果表單。在提供的HTML和CSS代碼中，justify-items: center樣式應用于。結果類，它是兩者的父容器。結果_ _分數和。結果_ _摘要元素。但是，似乎justify-items: center樣式并沒有直接影響。結果_ _分數元素。你介意審查我的代碼，并提供任何潛在的遺漏或需要改進的地方反饋嗎？如果您能解釋您遇到的任何問題，并分享您對我的代碼是否結構良好或需要增強的想法，我將不勝感激。

:root {
  /* Primary Color*/
  --clr--light-red: hsl(0, 100%, 67%);
  --clr--orangey-yellow: hsl(39, 100%, 56%);
  --clr--green-teal: hsl(166, 100%, 37%);
  --clr--cobalt-blue: hsl(234, 85%, 45%);

  /* Gradients Color */
  --clr--light-slate: hsl(252, 100%, 67%);
  --clr--royal-blue: hsl(241, 81%, 54%);
  --clr--violet-blue: hsla(256, 72%, 46%, 1);
  --clr--persian-blue: hsla(241, 72%, 46%, 0);

  /* Neutral Color */
  --clr-white: hsl(0, 0%, 100%);
  --clr-pale-blue: hsl(221, 100%, 96%);
  --clr-light-lavender: hsl(241, 100%, 89%);
  --clr-gray-blue: Dark gray blue: hsl(224, 30%, 27%);

 /* Fonts */

  --ff--base:'Fraunces', serif;
  
/* Font Weight */  
  --fw--regular: 500;
  --fw--bold: 700;
  --fw--extra-bold: 800;
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
    2. Remove default margin
  */
* {
  margin: 0;
}
/*
    3. Allow percentage-based heights in the application
  */
html,
body {
  height: 100%;
}
/*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
    6. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
    7. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}
/*
    8. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
    9. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

body{
    background-color: var(--clr-white);
    font-family: var(--ff--base);
    font-weight: var(--fw--regular);
}

.result{
    display: grid;
    justify-items: center;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <title>Frontend Mentor | Results summary component</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet