default
menu home
Icon library Sign up Login favorite_border message help_outline

- Online notes-html-page2

styleTags:  All CSS html javascript php/other IT
Demo subject CSS实现倾斜绶带式45°标签

有时候页面需要在某个元素上设置一个醒目的标志,比如“审核中”、“热卖中”、“HOT”等等,此时本样式比较合适。
先上图看最终效果。
[img]

by: demo  visibility 1890
2023-05-20 13:49 (UTC)

Demo subject 简洁有效地实现水平垂直双居中

同时实现水平和垂直方向双居中的方法网上有很多种,本人倾向于采用其中最简洁有效的方法来实现,具有比较好的通用性。
具体实现的css代码如下:

by: fanshome  visibility 1770
2023-06-24 16:41 (UTC)

Demo subject 纯CSS3做一个带箭头指向的漂亮的带阴影提示框

纯CSS3,不使用图片。先看下最终实现的效果图:
[img]
这里以指向右侧的尖形小箭头为例,其它方向请自行修改。

by: fanshome  visibility 2041
2023-05-29 15:01 (UTC)

Demo subject CSS实现在普通可滚动容器元素内的类似position:fixed悬浮固定按钮效果

有时候,我们需要在某个可滚动(scroll)的元素内实现悬浮固定按钮效果,按钮不能随着鼠标滚动而变化。在全可视窗口实现这个效果(比如顶部的悬浮菜单)比较简单,只要给元素添加css属性{position:fixed;z-index:10;top:0;left:0}即可。
然而,假如想在页面上某个可滚动的元素(比如div)内实现悬浮固定按钮的话,就需要动点小脑筋了,否则要么按钮的位置(top/left等)是相对于整个页面,而不是相对于div固定;要么按钮会随着鼠标滚动而滚动甚至消失。
这时,我们可以采用在相邻元素添加position:absolute按钮来实现相对固定,从而避免被滚动。比如本页面的“复制代码”按钮,具体实现方法如下:

by: fanshome  visibility 2630
2023-05-18 08:00 (UTC)