随笔分类 -  html与css学习

半透明边框与background-clip
摘要：一，半透明边框 前言： 已知，通过rgba与hsla颜色我们可以设置半透明的颜色， 现在我们想实现一个半透明的边框，例子如下： border: 10px solid hsla(0,0%,100%,.5); background: white; 会发现我们的边框不见了，我们不是使用了半透明颜色了吗，这 阅读全文
posted @ 2023-01-02 10:19 指尖掠过 阅读(131) 评论(0) 推荐(0)
html+css+js制作简单switch 开关
摘要：html+css+js制作简单switch 开关 <style> *{ padding: 0; margin: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center 阅读全文
posted @ 2022-08-17 14:56 指尖掠过 阅读(1276) 评论(0) 推荐(0)
js倒计时函数
摘要：let counteDate = new Date("jul 1, 2027 00:00:00").getTime(); function countDown(){ let now = new Date().getTime() gap = counteDate-now let seconds = 1 阅读全文
posted @ 2022-08-16 21:15 指尖掠过 阅读(235) 评论(0) 推荐(0)
前端简单实现页面下雪效果
摘要：html与css部分 <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ overflow: hidden; } .container{ min-height: 100vh; background-image: line 阅读全文
posted @ 2022-08-16 19:25 指尖掠过 阅读(200) 评论(0) 推荐(0)
点击拖动div
摘要：JS <script> const wrapper = document.querySelector(".wrapper") header = wrapper.querySelector('header') function onDrag({movementX,movementY}){ // win 阅读全文
posted @ 2022-08-16 16:22 指尖掠过 阅读(37) 评论(0) 推荐(0)
静态页面学习记录-电商网站
摘要：:root选择器作用 :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。常用于声明全局的css变量 :root { --main-color: hotpink; --pane-padding: 阅读全文
posted @ 2022-04-14 11:25 指尖掠过 阅读(29) 评论(0) 推荐(0)