抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

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

Front-End Development

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

字数：568字

时长：3分钟

freeCodeCamp 响应式网页设计的认证课程第十章。在创建一副毕加索绘画来学习中级 CSS 的课程中，通过代码创建一幅自己的毕加索绘画网页来掌握中级 CSS 技术。课程涉及 SVG 图标、CSS 定位和对已学 CSS 知识的回顾。以下为我在学习和实战练习过程中所做的笔记，可供参考。

一、重点 HTML 代码

FontAwesome is a library of SVG-powered icons, many of which are freely available to use：

1
2
3
4
5
6
<head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <!--FontAwesome-->
</head>

The i element is used for idiomatic text, or text that is separate from the “normal” text content. This could be for italic text, such as scientific terms, or for icons like those provided by FontAwesome：

1
2
3
4
5
6
7
8
9
<div id="guitar">
    <div class="guitar" id="guitar-left">
      	<i class="fas fa-bars"></i>
    </div>
    <div class="guitar" id="guitar-right">
      	<i class="fas fa-bars"></i>
    </div>
    <div id="guitar-neck"></div>
</div>

二、重点 CSS 代码

An absolute position takes the element out of that top-down document flow and allows you to adjust it relative to its container. When an element is manually positioned, you can shift its layout with top, left, right, and bottom：

1
2
3
4
5
6
7
8
#offwhite-character {
    width: 300px;
    height: 550px;
    background-color: GhostWhite;
    position: absolute;
    top: 20%;
    left: 17.5%;
}

The z-index property is used to create “layers” for your HTML elements. Elements with a higher z-index value will appear to be layered on top of elements with a lower z-index value：

1
2
3
4
5
6
7
8
9
#back-wall {
    background-color: #8B4513;
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

border-style、border-width 属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
#white-hat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 120px 140px 180px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: GhostWhite;
    border-left-color: transparent;
    position: absolute;
    top: -140px;
    left: 0;
}

display: block 属性：

1
2
3
4
5
6
7
8
9
.black-dot {
    width: 10px;
    height: 10px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    display: block;
    margin: auto;
    margin-top: 65%;
}

display: inline-block 属性：

1
2
3
4
5
.fa-music {
    display: inline-block;
    margin-top: 8%;
    margin-left: 13%;
}

border-radius 属性：

1
2
3
4
5
6
7
8
9
10
#black-round-hat {
    width: 180px;
    height: 150px;
    background-color: rgb(45, 31, 19);
    border-radius: 50%;
    position: absolute;
    top: -100px;
    left: 5px;
    z-index: -1;
}

更改 FontAwesome 大小：

1
2
3
.fas {
    font-size: 30px;
}

三、页面展示

参考资料（References）：

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

本文永久地址：http://blog.zhuangzhihao.top/CSS%E5%88%9B%E5%BB%BA%E4%B8%80%E5%B9%85%E6%AF%95%E5%8A%A0%E7%B4%A2%E7%94%BB/

Bezhuang

评论



Copyright © 2020 - 2022 Zhihao Zhuang. All rights reserved

本站访客数： 人，
总访问量： 次