HTML 和CSS 学习（4）

最新推荐文章于 2023-02-01 20:01:28 发布

有态度的我

最新推荐文章于 2023-02-01 20:01:28 发布

阅读量218

点赞数

分类专栏：网页设计文章标签： javascript css html5 css3 html

本文链接：https://blog.csdn.net/weixin_42919657/article/details/103940256

版权

网页设计专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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/

成果

在这里插入图片描述
：）

有态度的我

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录