大红灯笼高高挂！

加林森 发表于 2022-1-23 11:50

本帖最后由加林森于 2022-1-23 12:16 编辑 <br /><br /><link rel="stylesheet" href="https://638183.freep.cn/638183/rar/denglong.css">

<div class="lantern-con" style="left:50px;top:-20px;">
   <div class="lantern-line"></div>
   <div class="lantern-light">
            <div class="lantern-circle">
                     <div class="lantern-rect">
                           <div class="lantern-text">春節</div>
                     </div>
            </div>
            <div class="lantern-tassel-top">
                     <div class="lantern-tassel-middle"></div>
                     <div class="lantern-tassel-bottom"></div>
            </div>
   </div>
</div>

<div class="lantern-con" style="left:400px; top:-200px;">
   <div class="lantern-line"></div>
   <div class="lantern-light">
            <div class="lantern-circle">
                     <div class="lantern-rect">
                           <div class="lantern-text">快樂</div>
                     </div>
            </div>
            <div class="lantern-tassel-top">
                     <div class="lantern-tassel-middle"></div>
                     <div class="lantern-tassel-bottom"></div>
            </div>
   </div>
</div>

要过年了，给自己家里挂几个灯笼。

加林森 发表于 2022-1-23 11:52

加林森 发表于 2022-1-23 11:53

成功了。

加林森 发表于 2022-1-23 11:57

加林森 发表于 2022-1-23 12:01

西楼别序
作词 : 峦无眠
作曲 : 肖腾
编曲 : 编曲 Fsy小诺
制作人 : 爱写歌的小田
暮雨入画一纸离愁传深秋
阁楼上谁泪如雨流
西楼淋一川烟柳微凉缺羞
是谁在阁楼上弹奏
夜色无言那醇酒只饮一口
却如你的美怎么偷
泼墨山水下笔温柔入卷抽
飘散的思绪谁来收
我提笔不为离愁
只为你转身回眸
心事把自己弄丢淋湿在阁楼
我提笔不为深处
目送你背影依旧
那年温柔谁能用一生守
夜色无言那醇酒只饮一口
却如你的美怎么偷
泼墨山水下笔温柔入卷抽
飘散的思绪谁来收
我提笔不为离愁
只为你转身回眸
心事把自己弄丢淋湿在阁楼
我提笔不为深处
目送你背影依旧
那年温柔谁能用一生守
我提笔不为离愁
只为你转身回眸
心事把自己弄丢淋湿在阁楼
我提笔不为深处
目送你背影依旧
那年温柔谁能用一生守

加林森 发表于 2022-1-23 12:16

@马黑黑

马黑黑 发表于 2022-1-23 12:35

马黑黑 发表于 2022-1-23 12:37

7樓加了一個燈籠到右上角。方法，住窗體定位：

style="position:fixed;top:-20px;left:calc(100vw - 200px);"

加林森 发表于 2022-1-23 12:49

马黑黑发表于 2022-1-23 12:37
7樓加了一個燈籠到右上角。方法，住窗體定位：

style="position:fixed;top:-20px;left:calc(100vw - 200 ...

谢谢老黑帮挂右边的。{:4_190:}

马黑黑 发表于 2022-1-23 12:50

加林森发表于 2022-1-23 12:49
谢谢老黑帮挂右边的。

右上角的定位看得懂吗

加林森 发表于 2022-1-23 12:51

马黑黑发表于 2022-1-23 12:50
右上角的定位看得懂吗

能看懂的。

马黑黑 发表于 2022-1-23 12:56

加林森发表于 2022-1-23 12:51
能看懂的。

里面用了CSS的一个计算函数 calc，它有语法要求：

calc(A - B)

括号里面的运算符号，必须两边有空格，不能写成：A-B，要写成：A - B

另外，vw 是视界宽度，高度是 vh，100vw 是全部的视界宽度，减去 200 是灯笼主窗体的宽度设定尺寸

加林森 发表于 2022-1-23 13:02

马黑黑发表于 2022-1-23 12:56
里面用了CSS的一个计算函数 calc，它有语法要求：

calc(A - B)

就是定位的吧

马黑黑 发表于 2022-1-23 13:10

本帖最后由加林森于 2022-1-23 13:19 编辑

@加林森队长，左上角的灯笼怎么突然带着代码？{:4_170:}

左上角不用计算calc来计算定位尺寸，左下、右下、右上需要计算是因为不同的访客显示器分辨率是不一样的
本来好好，怎么就挂歪了？{:4_203:}

马黑黑 发表于 2022-1-23 13:13

再说 calc(A - B) 我只是举例，实际应用是这样的（数值还要根据情况来，不一定是200、300）：

calc(100vw - 200px) -- 计算 left 的位置

calc(100vh - 300px) -- 计算 top 的位置

加林森 发表于 2022-1-23 13:20

马黑黑发表于 2022-1-23 13:13
再说 calc(A - B) 我只是举例，实际应用是这样的（数值还要根据情况来，不一定是200、300）：

calc(100v ...

晕了晕了，你帮忙把。{:4_189:}

加林森 发表于 2022-1-23 13:20

马黑黑发表于 2022-1-23 13:10
@加林森队长，左上角的灯笼怎么突然带着代码？

左上角不用计算calc来计算定位尺寸，左下、右 ...

本来好好，怎么就挂歪了？{:4_203:}

加林森 发表于 2022-1-23 13:22

马黑黑发表于 2022-1-23 13:10
@加林森队长，左上角的灯笼怎么突然带着代码？

左上角不用计算calc来计算定位尺寸，左下、右 ...

计算错误了吧

马黑黑 发表于 2022-1-23 13:40

加林森发表于 2022-1-23 13:22
计算错误了吧

左上角一般直接定的。left:0; top: 0; 就是最左上角。

关于left和top:

指元素的左边值，top值顶端值。left为 100px 时，元素往右移动 100 个像素；top值为100px是，元素往下移动 100 个像素。

马黑黑 发表于 2022-1-23 13:41

加林森发表于 2022-1-23 13:20
本来好好，怎么就挂歪了？

高，不好挂{:4_170:}

页: [1] 2 3 4

花潮论坛's Archiver

大红灯笼高高挂！