Responsive Web Dedign(十一)

发表于 更新于 分类于 ， 本文字数： 7.7k 阅读时长 ≈ 7 分钟

freeCodeCamp —- Responsive Web Dedign

Learn Responsive Web Design by Building a Piano

  1. Begin with the basic HTML structure. Add a DOCTYPE declaration and html, head, body, and title elements.

    Set the language of this page to English. Set the title to Piano.

  2. Add two meta tags, one to optimize your page for mobile devices, and one to specify an accepted charset for the page.

  3. Time to start working on the piano. Create a div element within your body element with the id set to piano.

  4. Nest a second div within your existing div, and set the class to be keys.

  5. Within your .keys element, add seven div elements. Give them all the class key.

  6. Remember that a class attribute can have multiple values. To separate your white keys from your black keys, you’ll add a second class value of black--key. Add this to your second, third, fifth, sixth, and seventh .key elements.

  7. Now copy the set of seven .key elements, and paste two more sets into the .keys div.

  8. Add a link element within your head element. For that link element, set the rel attribute to stylesheet and the href to ./styles.css.

  9. Browsers can apply default margin and padding values to specific elements. To make sure your piano looks correct, you need to reset the box model.

    Add an html rule selector to your CSS file, and set the box-sizing property to border-box.

  10. The ::before selector creates a pseudo-element which is the first child of the selected element, while the ::after selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project.

    For now, create a CSS selector to target all elements with *, and include the pseudo-elements with ::before and ::after. Set the box-sizing property to inherit.

  11. Now target your #piano element with an id selector. Set background-color property to #00471b, the width property to 992px and the height property to 290px.

  12. Set the margin of the #piano to 80px auto.

  13. Time to style the keys. Below the #piano rule, target the .keys element with a class selector. Give the new rule a background-color property of #040404, a width property of 949px and a height property of 180px.

  14. Give the .keys a padding-left of 2px.

  15. Move the keys into position by adjusting the #piano selector. Set the padding property to 90px 20px 0 20px.

  16. Time to style the keys themselves. Create a class selector for the .key elements. Set the background-color set to the value #ffffff, the position property to relative, the width property to 41px, and the height property to 175px.

  17. Give the .key a margin of 2px and a float property set to left.

  18. Now it is time to use the pseudo-selectors you prepared for earlier. To create the black keys, add a new .key.black--key::after selector. This will target the elements with the class key black--key, and select the pseudo-element after these elements in the HTML.

    In the new selector, set the background-color to #1d1e22. Also set the content property to "". This will make the pseudo-elements empty.

    The content property is used to set or override the content of the element. By default, the pseudo-elements created by the ::before and ::after pseudo-selectors are empty, and the elements will not be rendered to the page. Setting the content property to an empty string "" will ensure the element is rendered to the page while still being empty.

    If you would like to experiment, try removing the background-color property and setting different values for the content property, such as "♥". Remember to undo these changes when you are done so the tests pass.

  19. Give the .key.black--key::after a position property set to absolute and a left property set to -18px.

  20. For the .key.black--key::after, set the width to 32px and the height to 100px.

  21. The piano needs the freeCodeCamp logo to make it official.

    Add an img element before your .keys element. Give the img a class of logo, and set the src to https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg. Give it an alt text of freeCodeCamp Logo.

  22. Start styling the logo by creating a .logo selector. Set the width to 200px, a position of absolute and a top set to 23px.

  23. The img element needs its parent to have a position set as a point of reference. Set the position of the #piano selector to relative.

  24. To smooth the sharp edges of the piano and keys, start by giving the #piano a border-radius of 10px.

  25. Give the .key selector a border-radius value of 0 0 3px 3px.

  26. Give the .key.black--key::after selector a border-radius of 0 0 3px 3px to match the keys.

  27. The @media at-rule, also known as a media query, is used to conditionally apply CSS. Media queries are commonly used to apply CSS based on the viewport width using the max-width and min-width properties.

    In the below example the padding is applied to the .card class when the viewport is 960px wide and below.

    1
    2
    3
    4
    5
    @media (max-width: 960px) {
      .card {
        padding: 2rem;
      }
    }

    Add a media query that will be applied when the viewport is 768px wide and below.

  28. Add a new #piano selector within your @media query, and set the width to 358px.

  29. Within the @media query, add a .keys selector and set the width to 318px.

  30. Now add a .logo selector to the @media query, and set the width property to 150px.

  31. You might have noticed the keys collapse when the browser window is smaller than 768px. Set overflow to hidden in the first .keys selector, to take care of this issue. This property will hide any element that is pushed outside the set width value of .keys.

  32. Logical operators can be used to construct more complex media queries. The and logical operator is used to query two media conditions.

    For example, a media query that targets a display width between 500px and 1000px would be:

    1
    2
    3
    @media (min-width: 500px) and (max-width: 1000px){

    }

    Add another @media rule to apply if the browser window is wider than 769px but smaller than 1199px.

  33. For the new @media rule, set the width of the #piano to 675px and the width of the .keys to 633px.

    With that, your piano is complete!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div id="piano">
      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
      <div class="keys">
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

#piano {
  background-color: #00471b;
  width: 992px;
  height: 290px;
  margin: 80px auto;
  padding: 90px 20px 0 20px;
  position: relative;
  border-radius: 10px;
}

.keys {
  background-color: #040404;
  width: 949px;
  height: 180px;
  padding-left: 2px;
  overflow: hidden;
}

.key {
  background-color: #ffffff;
  position: relative;
  width: 41px;
  height: 175px;
  margin: 2px;
  float: left;
  border-radius: 0 0 3px 3px;
}

.key.black--key::after {
  background-color: #1d1e22;
  content: "";
  position: absolute;
  left: -18px;
  width: 32px;
  height: 100px;
  border-radius: 0 0 3px 3px;
}

.logo {
  width: 200px;
  position: absolute;
  top: 23px;
}

@media (max-width: 768px) {
  #piano {
    width: 358px;
  }

  .keys {
    width: 318px;
  }

  .logo {
    width: 150px;
  }
}