随笔分类 -  html+css

如何让被遮挡层可以进行事件点击？
摘要：非常简单：（纯CSS方法） 外层（被遮挡的层）{ pointer-events: none; } 内层（要发生事件的层）{ pointer-events: auto; } pointer-events属性本身有很多取值，但只有none和auto可以用在浏览器上，其他都只能应用在SVG上取值none： 阅读全文
posted @ 2021-05-18 16:26 小生不才。 阅读(152) 评论(0) 推荐(0)
随机色
摘要：随机色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随机色</ 阅读全文
posted @ 2020-11-25 23:55 小生不才。 阅读(119) 评论(0) 推荐(0)
瀑布流布局
摘要：瀑布流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>瀑布式布局</title> </head> <style> *{ margin: 0; padding: 0; } ul,li{ list-styl 阅读全文
posted @ 2020-11-25 23:54 小生不才。 阅读(95) 评论(0) 推荐(0)
拖拽
摘要：鼠标拖拽元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl 阅读全文
posted @ 2020-11-25 23:50 小生不才。 阅读(101) 评论(0) 推荐(0)
时间转化为农历时间
摘要：将时间转化为农历时间 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> < 阅读全文
posted @ 2020-11-25 23:49 小生不才。 阅读(419) 评论(0) 推荐(0)
鼠标划过title时展示下边的详情
摘要：HTML代码： <div class="box"> <p class="text1" style="line-height: 20px;">cross-fade中的透明度值是只作用于后面一张图片上！</p> <div class="text2"></div> </div> <div class="b 阅读全文
posted @ 2020-11-25 23:45 小生不才。 阅读(102) 评论(0) 推荐(0)
返回顶部
摘要：因为只是展示的效果，内容需要自己添加一下撑开浏览器的高度以达到可滚动效果！ html代码： <div class="dingbu2" style="width: 100px; height: 100px; background: #ccc;"></div> CSS代码： .dingbu2{displ 阅读全文
posted @ 2020-11-25 23:41 小生不才。 阅读(159) 评论(0) 推荐(0)
层叠轮播图
摘要：HTML代码： <div class="img"> <div class="whole"> <div class="roll-img"> <span class="last"><</span> <ul id="ul"> <li class="left"><img src="./img/1.png" 阅读全文
posted @ 2020-11-25 23:36 小生不才。 阅读(313) 评论(0) 推荐(0)
楼梯效果
摘要：HTML代码： <div class="slider-bar"> <ul> <li>头部区域</li> <li class="current">导航区域</li> <li>第一部分</li> <li>第二部分</li> <li>第三部分</li> <li>底部区域</li> </ul> </div> 阅读全文
posted @ 2020-11-25 23:27 小生不才。 阅读(140) 评论(0) 推荐(0)