运维开发玄德公

JavaScript基础-练习-页面小游戏剪刀石头布

摘要：文章目录 1. 最简版本2. 网页版 1. 最简版本 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div.status { margin: 5px; background-color: lightgrey; width: 阅读全文

posted @ 2022-05-02 22:42 运维开发玄德公阅读(37) 评论(0) 推荐(0)

JavaScript基础-03-json解析

摘要：示例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>玄德公记事</title> </head> <body> <h2>为 JSON 字符串创建对象</h2> <p id="demo"></p> <script> var 阅读全文

posted @ 2022-04-30 21:40 运维开发玄德公阅读(42) 评论(0) 推荐(0)

JavaScript基础-04-事件

摘要：文章目录 1. 常用事件2. onsubmit (提交按钮时) 1. 常用事件事件描述onchangeHTML 元素改变onclick用户点击 HTML 元素onmouseover鼠标指针移动到指定的元素上时发生onmouseout用户从一个 HTML 元素上移开鼠标时发生onkeydown用户按阅读全文

posted @ 2022-04-30 21:39 运维开发玄德公阅读(47) 评论(0) 推荐(0)

JavaScript基础-02-语句和循环（if语句，Switch语句，for循环，for/in，while循环，do/while，循环控制 break、continue、bresk）

摘要：文章目录 1. if 语句2. switch语句3. for循环3.1 基本应用3.2 for/in 4. while 循环4.1 while 循环4.2 do/while 5. 循环控制5.1 break5.2 continue5.3 bresk-跳出元素 1. if 语句语法 if (条件1) 阅读全文

posted @ 2022-04-29 23:32 运维开发玄德公阅读(98) 评论(0) 推荐(0)

JavaScript基础-01数据类型、变量、函数

摘要：文章目录 1. 从一个脚本开始2. 数据类型2.1 字串型（string）2.2 数字型（number）2.2.1 定义和赋值2.2.2 算数运算2.2.3 赋值运算2.2.4 字串数字混合计算2.3.5 比较运算2.3.6 逻辑运算 2.3 布尔值（boolean）2.4 常用对象（object 阅读全文

posted @ 2022-04-29 23:25 运维开发玄德公阅读(40) 评论(0) 推荐(0)

CSS基础-18-表单示例

摘要：文章目录 1. 输入框 input1.1 简易输入框1.2 可用属性选择器1.3 设置边框1.4 聚焦变化1.5 搜索框加图片 2. 文本框示例3. 下拉菜单示例4. 按钮示例5. 表单综合示例5.1 示例 15.2 示例2 1. 输入框 input 1.1 简易输入框 <!DOCTYPE html 阅读全文

posted @ 2022-04-28 20:29 运维开发玄德公阅读(78) 评论(0) 推荐(0)

CSS基础-17-图片处理（图片廊、响应式图片廊、透明图片）

摘要：文章目录 1. 简单图片廊2. 响应式图片廊概念完整示例 2. 透明图片语法示例完整示例 1. 简单图片廊 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <style> /* 打img标阅读全文

posted @ 2022-04-28 20:28 运维开发玄德公阅读(96) 评论(0) 推荐(0)

CSS基础-16-提示工具

摘要：文章目录 1.基本实现2. 提示框位置2.1 提示框在 [ 左 | 右 ]2.2 提示框在[顶端|底端] 3. 添加箭头3.1 顶部提示底部箭头3.2 底部提示顶部箭头3.3 右侧提示框/左侧箭头3.4 左侧提示框/右侧箭头 4. 淡入 1.基本实现 <style> /* Tooltip 容器阅读全文

posted @ 2022-04-27 21:07 运维开发玄德公阅读(48) 评论(0) 推荐(0)

CSS基础-15-下拉菜单

摘要：文章目录 1. 基本实现2. 添加一些效果 1. 基本实现 <!DOCTYPE html> <html> <head> <title>玄德公记事</title> <meta charset="utf-8"> <style> .dropdown { position: relative; displa 阅读全文

posted @ 2022-04-27 21:07 运维开发玄德公阅读(68) 评论(0) 推荐(0)

CSS基础-14-水平导航栏（示例及详细创建过程）

摘要：文章目录 1. 内联列表实现2. 浮动列表实现3. 添加边框3.1 思路3.2 实际效果 4. 添加分割线5. 固定导航栏 1. 内联列表实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title 阅读全文

posted @ 2022-04-26 22:42 运维开发玄德公阅读(133) 评论(0) 推荐(0)