关注
分享
HTML、CSS、JavaScript这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。
L在前方
Hello World
展开
-
前端倒计时效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { padding: 10px; font-size: 100px; } p { .原创 2021-02-06 16:31:34 · 288 阅读 · 1 评论 -
点击X可关闭二维码（html事件处理）
点击X可以关闭整个div标签实现代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width:200px; height:300px; border: 1px solid #000; position: relative; } div>原创 2020-12-24 00:09:13 · 383 阅读 · 0 评论 -
用JavaScript判断输入年龄并在控制台打印结果
用JavaScript判断输入年龄并在控制台打印结果：0～25为青少年；25～55为中年；55以上为老年。实验代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var age = prompt("请输入年龄"); if(age&原创 2020-12-23 23:17:08 · 2847 阅读 · 0 评论 -
用JavaScript找出 0 - 100中 7的倍数 ,和 以7结尾的数 , 计算他们的和
找出 0 - 100中 7的倍数 ,和 以7结尾的数 , 计算他们的和试验代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var sum = 0; for(var i = 0;i<101;i++)原创 2020-12-23 23:01:03 · 1060 阅读 · 0 评论 -
html实现海浪
实现代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Ke原创 2020-10-31 21:22:31 · 504 阅读 · 0 评论 -
html实现比萨斜塔
实现代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Ke原创 2020-10-31 21:17:00 · 265 阅读 · 0 评论 -
html实现太阳系
实现代码：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Descripti原创 2020-10-31 15:45:40 · 7299 阅读 · 0 评论 -
html实现圈内特效
实现代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Ke原创 2020-10-31 15:41:31 · 124 阅读 · 0 评论 -
html实现雨滴
实现代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Ke原创 2020-10-31 15:36:47 · 578 阅读 · 0 评论 -
html实现游乐场
实现代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Ke原创 2020-10-31 15:14:26 · 1285 阅读 · 0 评论 -
html实现聚集爱心
实现代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Ke原创 2020-10-31 15:03:07 · 624 阅读 · 0 评论 -
html实现五子棋游戏
实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px原创 2020-10-31 14:49:22 · 5498 阅读 · 10 评论 -
html实现扫雷游戏
实现代码：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Descripti原创 2020-10-31 14:05:37 · 5641 阅读 · 0 评论 -
html实现旋转时钟
旋转时钟*{ margin:0; padding:0; background:#669;}html,body{ width:100%; height:100%; overflow: hidden;}#clock { position: relative; width: 100%; height: 100%;}.label{ display:inline-block; text-align: center;原创 2020-07-10 22:44:06 · 4213 阅读 · 3 评论