通过创建一架钢琴来学习响应式网页设计

本文发布于：2022年6月12日

字数：549字

时长：2分钟

freeCodeCamp 响应式网页设计的认证课程第十一章。响应式设计使得你的网页适应不同屏幕尺寸的显示。在通过创建一架钢琴来学习响应式网页设计的课程中，围绕一架钢琴编写代码学习 CSS 响应式设计，同时学会媒体条件和伪选择器的知识。以下为我在学习和实战练习过程中所做的笔记，可供参考。

一、重点 CSS 代码

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：

1
2
3

html {
    box-sizing: border-box;
}

You have reset the html box model, you need to pass that on to the elements within as well.

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：

1
2
3

*, ::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; /* hide any element that is pushed outside the set width value of .keys */
}

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

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.

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：

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

Styling the logo：

1
2
3

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="https://free-code-camp-demo.vercel.app/响应式网页设计/通过创作罗斯科绘画学习CSS盒子模型/index.html" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
</div>

@media 属性 Make it responsive：

@media (max-width: 768px) {
    #piano {
        width: 358px;
    }
    .keys {
        width: 318px;
    }
    .logo {
        width: 150px;
    }
}

@media (max-width: 1199px) and (min-width: 769px) {
    #piano {
        width: 675px;
    }
    .keys {
        width: 633px;
    }
}

二、页面展示

Bezhuang

通过建立城市轮廓学习 CSS 变量

freeCodeCamp 响应式网页设计的认证课程第十二章。CSS 变量负责帮助组织你的样式和重复使用它们。在通过建立城市轮廓学习 CSS 变量的课程中，建立一座城市的轮廓，学习如何配置 CS...

创建一副毕加索绘画来学习中级 CSS

freeCodeCamp 响应式网页设计的认证课程第十章。在创建一副毕加索绘画来学习中级 CSS 的课程中，通过代码创建一幅自己的毕加索绘画网页来掌握中级 CSS 技术。课程涉及 SVG 图标...