自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(16)
  • 收藏
  • 关注

原创 综合案例,index register login

indexlet li=document.querySelector('.xtx_navs li:first-child');let obj=JSON.parse(localStorage.getItem('data'));if(obj){ li.innerHTML=`<a href="#">您好${obj.username}用户!</a>`;}registerlet icon=document.querySelector('.icon-queren');i..

2022-06-06 11:56:44 346

原创 分页按钮的缩放效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> li{ float:left; width:30px; list-style:none; height:30px; border:1...

2022-06-06 11:54:02 55

原创 旋转中心点案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div{ overflow:hidden; width:200px; height:200px; border:1px solid hotpi...

2022-05-24 09:58:48 62

原创 实现盒子居中效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div{ position:relative; width:600px; height:600px; background-color: re...

2022-05-24 09:56:19 53

原创 用户 验证

<!DOCTYPE><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-24 09:52:59 129

原创 实现进度条效果案例

<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .bar{ width:150px; height:15px; border:1px solid red; border-r...

2022-05-19 17:12:32 50

原创 渲染学生信息案例

<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="css/style.css" rel="stylesheet"></head><body><h1>新增学员</h1><div class="info"...

2022-05-19 17:09:11 54

原创 完成图片跟随图标移动

<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>案例分析:跟随鼠...

2022-05-19 17:06:20 76

原创 实现随机点名扩展

<!DOCTYPE hrtml><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"> <ti...

2022-05-19 17:00:50 59

原创 实现盒子和文字的阴影效果

<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .div1{ font-size: 100px; font-family: 华文行楷; color: #87dfeb; font-weight:400;...

2022-05-03 15:42:04 39

原创 倒计时短信

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> 验证码:<input type="text"><button>发送</button><script> var btn=do...

2022-04-25 16:59:26 45

原创 随机点名效果

<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div { width: 200px; height: 60px; border: 5px solid hotpink; text-align: center; line-...

2022-04-25 16:54:34 44

原创 倒 计 时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><style> div { margin: 200px; } span { /* 转换为行内块元素 */ display: inline-block; width: 40px; heigh.

2022-04-21 22:50:38 38

原创 网 页 布 局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> li{ list-style:none; } *{ margin:0; padding:0;...

2022-04-18 16:10:24 48

原创 根据时间显示不同图片

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><div>12345</div><imgsrc="#"><script>varimg=document....

2022-04-05 22:33:30 71

原创 显示当前系统时间

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><style>div{background-color:#55585a;color:#ffffff;width:250px;text...

2022-04-05 22:32:03 73

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除