HTML and CSS learning (4)

---- four learning HTML and CSS

File Description
Code

html
css

1. With regard to '100%' and 100vw or 100vh distinction:
2. The middle of the screen center
3. Use transition
4. cursor Image Requirements

Achievement

File Description

! [Alt]
(https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-ck-c0xffffffff-no-rj-mo0)
this learning resource from a youtuber open channel, called the online tutorial (https : //www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured), from among the system pushed me he has no intention of channels for the first time I was sent some of his own css style attracted, but also so as this platform to share with you some of the learning resources useful. **

Code

html

html code is very simple

<body>
    <section>
        <div>
            <h2 class="smile">smile</h2>
            <h2 class="heart">heart</h2>
            <h2 class="star">star</h2>
        </div>
    </section>
</body>

css


body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    /* background-color: blue; */
}

section {
    position: absolute;
    width: 100%;
    height: 100vh;
    cursor: url('pointer.png'), pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*click 的效果*/
section:active {
    cursor: url(clicked.png), pointer;
}

h2 {
    margin: 0;
    padding: 0;
    font-size: 8em;
    color: #262626;
    text-transform: uppercase;
    transition: 0.5s;
    text-align: center;
}

h2:hover {
    color: #ccc;
}

h2.smile {
    cursor: url('smile.png'), pointer;
}

h2.star {
    cursor: url('star.png'), pointer;
}

h2.heart {
    cursor: url('heart.png'), pointer;
}

There are several points you want to elaborate

1. With regard to '100%' and 100vw or 100vh distinction:

height: 100vh = 100% of The the viewport height
height: 100% = 100% of The parent apos Element height
Briefly,
% is the ratio vw (viewport width) vh (viewport height) size of the parent element of the set is a window size, 100vw = 100% window width 100vh = 100% height of the window, with vw, vh magnitude only and set the size of the window, the screen of the device used to develop a variety of applications using this unit quite suitable.

2. The middle of the screen center

    display: flex;
    justify-content: center;
    align-items: center;

'text-align: center "for centering the text accompanying
' text-transform" for adjusting text capitalization

3. Use transition

You can define different transition effects when a transition element of the switching between different states. For example, in switching between the different pseudo-element, such as: hover,: active state or by a change implemented in JavaScript.

4. cursor Image Requirements

Need to be adjusted to the length and width of 100px;
If you need to remove the background, you can see the teaching refer to the following link:
https://www.bilibili.com/video/av8154640/