- 博客(18)
- 收藏
- 关注
原创 实现综合案例的注册(register)、登录(login)和跳转到主页面(index)的功能。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小兔鲜案例</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> ...
2022-06-09 16:49:57
819
1
原创 课后作业: 实现分页按钮的缩放效果 (结合过渡属性)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> &l...
2022-06-09 16:48:49
124
原创 案例实现: 利用2D旋转rotate设置旋转中心点
<style>div {overflow: hidden;width: 200px;height: 200px;border: 1px solid hotpink;margin: 10px;float: left;div: :beforecontent:“心愿";display: block;width: 100%;height: 100%;background-color:hotpink;transform: rotate(180deg)
2022-05-25 18:14:48
270
原创 完成正则案例需求八:提交按钮模块
// 需求八:提交按钮模块 // 使用 submit 提交事件 // 如果上面的每个模块,返回的是 false 则 阻止提交 // 如果没有勾选同意协议,则提示 需要勾选 // 在提交之前先验证 let form = document.querySelector('form') form.addEventListener('submit', function (e) { if (!verifyUs...
2022-05-23 16:51:06
225
原创 利用2D转换的位移属性实现盒子居中效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>利用...
2022-05-19 16:59:13
62
原创 验证用户名信息是否有效
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>验证...
2022-05-18 21:55:17
79
原创 渲染学生信息案例
//console.log(arr);//重复渲染页面render();//复原原始表单 置为默认内容uname.value=age.value=salary.value='';gender.value='男';city.value='北京';});//删除数组中的数据 需要用到事件委托 事件对象etbody....
2022-05-17 09:55:23
197
原创 实现进度条效果案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
2022-05-16 19:36:47
53
原创 完成图片跟随鼠标移动案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Doc...
2022-05-10 16:29:28
61
原创 案例拓展: 实现随机点名的效果。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机...
2022-05-08 22:44:19
68
原创 分别利用 box-shadow 和 text-shadow 属性实现盒子阴影和文字阴影效果。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title&...
2022-05-02 22:26:32
94
原创 实现随机点名的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
2022-04-22 11:59:40
80
原创 实现发送短信倒计时的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
2022-04-22 11:57:43
74
原创 利用标准流和浮动属性实现以下网页布局
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Doc...
2022-04-16 14:11:19
92
原创 实现动态生成表格
<body> <table cellspacing="0"> <thead> <tr> <th>角色</th> <th>法术</th> <th>法力</th> <th>操作</th&g...
2022-04-10 13:06:34
73
原创 实现表格的全选和取消
<body> <div class="wrap"> <table> <thead> <tr> <th> <!-- 开始默认补选中 checked="checked" --> <input type="che...
2022-04-10 13:04:10
244
原创 百度换肤作业
<body><ul class="baidu"><li><img src=" images/1. jpg"></li><li><img src= ”images/2. jpg"></li><li><img src=" images/3. jpg"></li><li><img src=”images/4. jpg"></li>
2022-04-07 11:21:03
66
原创 盒子模型作业
<body><div class=“logo”><img scr=“bdlogo.gif”/></div><div class=“nav”><a href=“#”>新闻</a> <strong>网页</strong> <a href=“#”>贴吧</a> <a href=“#”>知
2022-04-07 10:26:01
171
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人