HTML
barkL
这个作者很懒,什么都没留下…
展开
-
js自动生成表格(带删除功能)
运用到了关于触发对象target和事件委托的一些知识点;简单来说,谁触发了事件谁就是target对象;事件委托呢就是你想通过某个节点想触发某个事件,这个节点它自己不亲自来,它委托别的节点来,这个别的节点就是指它的父节点或者更高辈的节点;事件委托的好处:打个比方:就像table,ul这种节点它的子节点tr,td,li比较多的时候,你恰好又需要给这些子节点都绑定事件函数,给每个子节点都绑定的话,太浪费系统资源了,不如就委托给table,ul这种作为它们的父辈节的节点,给这些父节点添加事件绑定,然后获原创 2021-07-28 19:41:55 · 268 阅读 · 0 评论 -
js 跟随鼠标移动提示框
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ font-size: 30px; color: #000000; display:block; margin-top: 50px; border: #000000 so.原创 2021-07-27 15:02:55 · 623 阅读 · 0 评论 -
js选项卡
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> div { width: 200px; bor.原创 2021-07-26 13:55:04 · 62 阅读 · 0 评论 -
CSS 3D立方体 transform的应用
利用transform中的3D转换方法rotateX();rotateY();2D转换方法translate();实现3D立方体。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0;padding: 0;..原创 2021-07-14 14:17:07 · 105 阅读 · 0 评论 -
CSS按钮开关,利用伪类元素选择器:after和transition过渡效果实现
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0;margin: 0; } input[type='checkbox']{ margin: 100px; -webkit-appearance: none;.原创 2021-07-13 20:19:32 · 632 阅读 · 0 评论 -
简单影院列表,运用了属性选择器和伪类选择器
本例主要运用了一种属性选择器和两种伪类选择器:/*属性选择器:选择以.jpg结尾的img $指末尾 */ img[src $='.jpg'] { width: 50px; height: 60px; vertical-align: middle; } img[src $='...原创 2021-07-13 15:22:30 · 86 阅读 · 0 评论 -
overflow应用:hover悬浮样式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> section { width: 800px; text-align: center; border: 10px solid #ffff7f; } .box{ width: 2.原创 2021-07-12 10:56:43 · 529 阅读 · 0 评论 -
表单应用基础
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } form { width: 500px; background-color:goldenrod; border-rad.原创 2021-07-11 23:41:49 · 75 阅读 · 0 评论 -
form表单应用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="https://www.bilibili.com/"> <!-- cellspacing控制单元格间隙 --> <table border="1" ce.原创 2021-07-10 16:51:21 · 85 阅读 · 0 评论 -
check全选全不选反选提交
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>check全选全不选反选提交</title> <script> window.onload=function(){ //全选checkbox selectAllCheck.onclick=function(){ var chks = document.ge.原创 2021-07-09 16:19:14 · 160 阅读 · 0 评论