欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML 和CSS 学习（4）

程序员文章站 2022-04-19 17:18:23
...

HTML 和CSS 学习----四

文件介绍

![Alt]
(https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-c-k-c0xffffffff-no-rj-mo0）
这个学习资源来自于一个youtuber开的频道， 名字叫做online tutorial（https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）, 从第一次无意间系统推送给我他的频道的时候我就被他发的一些自创css style深深吸引， 也借以这个平台来和大家分享一下一些很有用的学习资源。**

代码

html

html的代码非常的简单

<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;
}

有几个点想要详细说明一下

1.关于 '100%'与100vw或者100vh的区别：

height: 100vh = 100% of the viewport height
height: 100% = 100% of the parent’s element height
简单的说，
% 是相对于父元素的大小设定的比率vw (viewport width) vh (viewport height) 是视窗的大小，100vw = 100%视窗宽度 100vh = 100%视窗高度，用vw，vh设定的大小只和视窗大小有关，所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。

2.居中屏幕正*

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

'text-align:center"用于居中文字段落
‘text-transform"用于调整文字大小写

3.使用transition

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

4. cursor图片要求

长宽需要调整到100px；
如果需要移除背景， 可以参考以下见到教学链接：
https://www.bilibili.com/video/av8154640/

成果

HTML 和CSS 学习（4）
：）

相关标签： 网页设计

上一篇： [JSP]JDBC 用户登陆，查看修改添加用户

下一篇： 从排序数组中删除重复项

推荐阅读