svg:棒棒糖播放器

马黑黑

红影 发表于 2024-10-13 09:53
哈哈，黑黑还挺有童心的

年轻时为了攒钱讨媳妇，捡过瓶子卖过棒棒糖

马黑黑

红影 发表于 2024-10-13 09:53
就多个底图的css里是反的吧，其他的貌似都是后来者居上呢。

底图，background，不是元素，是元素的一个属性

马黑黑

红影 发表于 2024-10-13 09:52
是的，知道怎么弄才是第一位的，具体的做法按自己的来就好

说得对

红影

马黑黑 发表于 2024-10-13 10:26
年轻时为了攒钱讨媳妇，捡过瓶子卖过棒棒糖

我猜下次会不会出现瓶子小播

红影

马黑黑 发表于 2024-10-13 10:27
底图，background，不是元素，是元素的一个属性

哦哦，那它和别的不一样也可理解了

红影

马黑黑 发表于 2024-10-13 10:27
说得对

所以学习怎么弄更重要。我有的时候尽量调整一下套用的代码，也是学习呢，纯粹的套用学不到东西。

马黑黑

红影 发表于 2024-10-13 10:51
所以学习怎么弄更重要。我有的时候尽量调整一下套用的代码，也是学习呢，纯粹的套用学不到东西。

学到一定程度后尽可能减少套用，自己设计、自己实现。

比如学习 svg，要先从画基础图形开始，直线、折线、矩形、多边形、圆、椭圆、路径、文本。一样一样突破就行。可以按这个简单教程去学学：

https://twle.cn/l/yufei/svg/svg-basic-index.html

马黑黑

红影 发表于 2024-10-13 10:49
哦哦，那它和别的不一样也可理解了

元素值HTML元素，或svg元素。以做HTML帖子为例简单说说：

帖子父元素 : <div id="tz"> ... </div>

这个div就是一个HTML元素。它可能通过CSS设置样式，比如外边距、宽高、背景等等，所有这些都是属性不是元素。

帖子父元素里面包裹有众多子元素，这些子元素如果重叠放在一块儿，那么，先出现的被后面出现的元素覆盖。这是层级关系，后来者居上。

子元素可以是图片（img标签）、div、text-area 等等，只要这些子元素宽高一样、绝对定位（position: absolute）且父元素设置了相对定位（position: relative），那么，它们就会完全重叠在一起。你可以试试：

<style>
#tz { margin: auto; width: 600px; height: 360px; background: teal; position: relative; }
.mypic { position: absolute; left: 50px; width: 100%; height: 100%; }
.sDiv { position: absolute; left: 100px; width: 100%; height: 100%; background: tan; }
.pink { background: pink; left: 150px; }
</style>

<div id="tz">
        <img class="mypic" src="https://img95.699pic.com/photo/50119/3130.jpg_wh300.jpg" alt="" />
        <div class="sDiv">DIV1</div>
        <div class="sDiv pink">DIV2</div>
</div>

马黑黑

红影 发表于 2024-10-13 10:49
我猜下次会不会出现瓶子小播

这是珍藏品

红影

马黑黑 发表于 2024-10-13 11:36
学到一定程度后尽可能减少套用，自己设计、自己实现。

比如学习 svg，要先从画基础图形开始，直线、折 ...

嗯嗯，先去看了一眼，存了起来，空了好好去学习一下

红影

马黑黑 发表于 2024-10-13 11:52
元素值HTML元素，或svg元素。以做HTML帖子为例简单说说：

帖子父元素 :  ...

这个例子特别好，一层层的特别清晰

红影

马黑黑 发表于 2024-10-13 11:52
元素值HTML元素，或svg元素。以做HTML帖子为例简单说说：

帖子父元素 :  ...

对这句<div class="sDiv pink">DIV2</div>有点迷糊，引用两个子元素的情况，也是后来者居上吧。我去掉sDiv看了看，因为pink没做绝对定位，虽然是后出现的，但是跑到最下面去了，而且left的值对它不起作用，只是因为DIV2在，自动占位而在上面出来一条边。这个还从来不知道呢。

红影

马黑黑 发表于 2024-10-13 11:52
这是珍藏品

哈哈，如果出现肯定很惊艳

花飞飞

马黑黑 发表于 2024-10-13 10:24
舔过了？

不用那么麻烦，这个看看标题就知道了。。

马黑黑

花飞飞 发表于 2024-10-13 16:11
不用那么麻烦，这个看看标题就知道了。。

原来如此，想象的

马黑黑

红影 发表于 2024-10-13 15:59
哈哈，如果出现肯定很惊艳

珍藏品一般不示人

马黑黑

红影 发表于 2024-10-13 15:46
这个例子特别好，一层层的特别清晰

这也是代码流的例子。所谓代码流，指一个元素一个元素的代码，它们在代码中出现的次序。

马黑黑

红影 发表于 2024-10-13 15:59
对这句DIV2有点迷糊，引用两个子元素的情况，也是后来者居上吧。我去掉sDiv看了看，因为pink没做绝对定位 ...

概念混淆了。

（一）div、img 等标签，它们是HTML实体元素，它们的次序彼此相互影响；
（二） class="sDIv pink" 是某个HTML元素内的属性之一，class 表示引用CSS 类选择器，共两个值，一个是CSS里的 .sDiv 选择器，另一个是 .pink 选择器。

马黑黑

红影 发表于 2024-10-13 15:41
嗯嗯，先去看了一眼，存了起来，空了好好去学习一下

得一节一节地消化

花飞飞

马黑黑 发表于 2024-10-13 17:09
原来如此，想象的

看到糖你不想到甜，你还能想辣？