
css
有思想的前端
用最优雅的代码实现需求
展开
-
css基础一:五行代码教你全屏滚动
五行代码教你全屏滚动 老规矩话不多说,直接上代码! html{ scroll-snap-type: y mandatory; } section{ block-size: 100vh; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; } <section> <div>one</div> </section> <原创 2022-04-08 22:38:53 · 833 阅读 · 0 评论 -
js实现点击更换样式
js实现点击更换样式 需求: 一个列表点击那个列表给他更换背景颜色、边框 首先我们在循环的列表中动态添加一个class:class="{'rechargehover':recharge==index}" 然后在data中定义recharge:0; 然后在点击事件里添加this.recharge = index 记得在点击事件里吧index带进去 然后我们给rechargehover添加点击之后的样式就可以了 希望这个文章能帮助你 ...原创 2021-12-09 10:18:36 · 2343 阅读 · 0 评论 -
css实现吸顶效果
css实现吸顶效果 直接给需要吸顶的class添加一下css代码就OK了,超级简单 position: -webkit-sticky; position: sticky; top: var(--window-top); z-index: 99;原创 2021-12-06 10:28:43 · 1275 阅读 · 0 评论