前端(Html+CSS+JavaScript)
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 · 319 阅读 · 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 · 419 阅读 · 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 · 2941 阅读 · 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 · 1116 阅读 · 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 · 523 阅读 · 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 · 276 阅读 · 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 · 7594 阅读 · 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 · 151 阅读 · 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 · 634 阅读 · 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 · 1386 阅读 · 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 · 658 阅读 · 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 · 5760 阅读 · 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 · 5765 阅读 · 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 · 4268 阅读 · 3 评论