freeCodeCamp应用视觉设计闯关

shakalaca

已于 2022-04-19 22:59:15 修改

阅读量285

点赞数

分类专栏：前端学习文章标签： css css3 html

于 2022-02-15 01:42:40 首次发布

本文链接：https://blog.csdn.net/CathyleeQ/article/details/122915744

版权

前端学习专栏收录该内容

47 篇文章 8 订阅

订阅专栏

刷到一半才想起要写博客。

给卡片元素添加 box-shadow：

给卡片元素添加 box-shadow：

降低元素的 opactiy：使用linksclass 选择所有的超链接并设置其opacity值为 0.7

应用视觉设计：使用 text-transform 属性给文本添加大写效果

应用视觉设计：设置多个标题元素的 font-size

应用视觉设计：设置多个标题元素的 font-weight

应用视觉设计：设置段落文本的 font-size

应用视觉设计：设置段落的 line-height

应用视觉设计：调整锚点的悬停状态

把h2的position设置成relative，使用相应的 CSS 属性调整h2的位置，使其向下偏移 15 像素，同时还在普通流中占据原来的位置。注意不要对 h1 和 p 元素的位置产生影响

通过 CSS 属性把h2向上移动 10 像素，向右移动 15 像素

通过声明position为absolute，固定#searchbar元素到它父元素section的右上角。即设定其top和right为 50 像素

值为navbar的 id。把它的position设置成fixed，设定其top和left为 0 像素。注意观察对h1的影响，h1并没有被导航栏挤下来，而是遮盖住了，为了显示完全需要单独调整h1的位置。

设置#left元素的float为left，设置#right元素的float为right。使这两个元素按两列布局，section和aside左右排列。

给 class 为first的元素（红色的方块）添加z-index属性并赋值为 2，使它显示在蓝色方块的上方。

通过给页面中的div添加值为auto的margin属性将其居中显示

把blue和yellowclass 的background-color属性改成相应的颜色。注意观察它们之间的编码区别以及和它们和白色的编码区别。

把 class 为orange、cyan和rasberry的background-color改成其对应的颜色。由于 rasberry 不在浏览器 17 种标准色之内，不能直接用作颜色名，所以要使用 HEX 颜色码

使用深青色（#09A7A1）做为页面主色，用其补色橙色（#FF790E）来装饰登录按钮。把header和footer的background-color从黑色改成深青色。然后把h2的文字color也改成深青色。最后，把button的background-color改成橙色。
如上修改。

把 class 为green、cyan和bluediv的background-color使用hsl()表示法描述相应的颜色。颜色都为满饱和度，亮度中等。

background-color

使用linear-gradient()给div添加background渐变色，渐变角度 35deg，从#CCFFFF过渡到#FFCCCC。

使用repeating-linear-gradient()函数创建一个渐变角度为 45deg的条纹，然后设置第一对渐变颜色为yellow, 第二对渐变颜色为black。

用body选择器设置整个页面的background为 urlhttps://i.imgur.com/MJAkxbh.png指定的图片。

把 id 为ball2的元素放大到原始大小的 1.5 倍

给div伪类hover添加transform属性，使其当鼠标悬停时大小缩放到原始大小的 1.1 倍。

使用transform属性沿 X 轴翻转 id 为bottom的元素 24 度

使用transform属性沿 Y 轴翻转 id 为top的元素 -10 度。

 transform: skewY(-10deg);

把编辑器里的正方形元素变成新月形状。首先，把background-color改为 transparent，接着把border-radius属性设置成 50%，以创建一个圆形。最后，更改box-shadow属性，使其offset-x为 25px，offset-y为 10px，blur-radius为 0，spread-radius为 0，color为 blue。