前端
关注
分享
扫一扫
文章平均质量分 74
Html5+Css3+JavaScript
柚咖
这个作者很懒，什么都没留下…
展开
-
HTML实训之小米商城首页
html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="index.css" /> <link rel="st...原创 2019-08-03 10:22:17 · 3133 阅读 · 4 评论 -
HTML实训之烟花效果
编程过程中使用了"jquery-3.4.1.js这个js包<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { over...原创 2019-07-14 21:40:26 · 993 阅读 · 0 评论 -
HTML实训之幽灵按钮
HTML文件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 从外部引入样式文件 --> <link rel="stylesheet" href="index.css"> </...原创 2019-07-14 17:24:17 · 353 阅读 · 0 评论 -
HTML实训项目之相册
先上效果图鼠标滑到某张图片时会放大<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> .box { width: 620px; margin: 20...原创 2019-07-14 13:29:10 · 555 阅读 · 0 评论 -
JavaScript String 和 JSON 相互转换
String 和 JSON 转换 1. String → JSON 使用 JSON.pars(String) 将 JSON 格式的字符串转换成 JSON 格式的对象 or 数组。// str 是JSON格式的字符串var var1 = JSON.parse(str); 2. JSON → String使用 JSON.stringify(JSON) 将 JSON 格式的对象转换成 JSON 格式的字符串。// json1 是 JSON 格式的对象var var2 = JSON.str原创 2021-02-22 20:44:07 · 294 阅读 · 0 评论 -
HTTP 状态码
HTTP 部分状态码代码消息描述100Continue只有请求的一部分被服务器接受，但只要它没有被拒绝，客户端应继续该请求。101Switching Protocols服务器切换协议200OK请求成功201Created该请求时完整的，并创建一个新的资源202Accepted该请求被接受处理，但是该处理不完整300Multiple Choices链接列表。用户可选择一个链接进入到该位置，最多五个地址。301Moved Pe原创 2021-02-22 16:14:40 · 184 阅读 · 0 评论 -
Layui后台管理系统布局练习
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="layui/css/layui.css" /> </head> <body class="layui-layout-body"> <div cla.原创 2021-02-18 17:16:49 · 909 阅读 · 0 评论 -
Layui之表单模块
1. Layui之表单元素 在Layui之表单元素中介绍了使用 layui 制作表单的用法，而这里主要是补充一些 layui 的表单模块的用法。渲染 主要有两种用法：form.render(); //更新全部渲染form.render('select'); //刷新select选择框渲染 如果是直接写在html文件中的单选框、复选框、选择框，会在加载 js 代码的时候自动渲染，而有些时候，有的表单元素可能是动态插入的，这时 form 模块 的自动化渲染是会对其失效的，此时需.原创 2021-02-18 14:59:13 · 1011 阅读 · 0 评论 -
Layui之表单元素
在一个容器中设定 class=“layui-form” 来标识一个表单元素块(通常是form和div标签)，通过规范好的HTML结构及CSS样式类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。 form 标签有action和method这两个属性，如果表单需要这两个属性，那么只能使用 form 标签，如果不需要这两个属性，可以使用 div 标签。效果预览基本结构<form action="" method="post" class="layui-form原创 2021-02-16 20:30:47 · 1686 阅读 · 0 评论 -
Layui之弹出层
1原创 2021-02-14 11:56:03 · 11545 阅读 · 3 评论 -
Layui之按钮
用法 向任意HTML元素添加 “layui-btn” 类，即可建立一个基础按钮，通过追加格式为layui-btn-{type}的class来定义其它按钮风格，内置的按钮class可以进行任意组合，从而形成更多种按钮风格。 虽然可以将任意的HTML元素通过添加 “layui-btn” 类的方式变为按钮，但是只推荐使用 button 和 a 这两个标签来作为按钮使用。<!-- 推荐使用 --><button type="button" class="layui-btn">原创 2021-02-11 15:20:49 · 1434 阅读 · 0 评论 -
Layui之字体图标
简介 layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。可以通过 font-class 或 unicode 来定义不同的图标。可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。使用方式 使用一个内联元素，对其添加一个 “layui-icon” 的类，来定义一个图标，然后为该元素加上需要使用的图标对应的类名即可。 一般推荐使用 i 标签这个内联元素，当原创 2021-02-11 14:09:17 · 2949 阅读 · 1 评论 -
Layui的下载和使用
layui 简介 layui 的官方解释是前端框架，它和 jQuery 一样，也是 JavaScript 的类库，使用 layui 可以用少量代码即可完成一些复杂的功能，如轮播图。下载 layui 因为 layui 是国内开发的 JavaScript 类库，所以下载比较简单，直接到 layui官网 下载即可，不会出现和 jQuery 那样下载不下来的情况。 官网下载下来的是一个layui的压缩包，点开压缩包，只需要解压layui这个文件夹，文档与示例文件夹里就是一些使用示例，解不解压无所谓。原创 2021-02-09 17:03:03 · 8730 阅读 · 3 评论 -
jQuery的使用
使用jQuery需要注意两点必须先引入，再使用语法结构/通用格式：$(选择器).方法(参数);引入jQuery文件 首先将jQuery文件复制到我们的项目中 然后在html文件中引入jQuery文件<script src="./js/jquery-3.4.1.js" type="text/javascript"></script>语法 $(选择器).方法(参数); 下面两种方法效果是一样的，都是获取了 id 为test1 的标签的内容。第一种方法原创 2021-02-03 14:31:01 · 174 阅读 · 0 评论 -
jQuery常用的方法
1. 创建jQuery对象方法1：选择器生成// jQuery对象obj1是id为test1的元素var obj1 = $("#test1");方法2：DOM对象生成var obj1 = document.getElementById("test1");var obj2 = $(obj1);方法3：HTML标签生成var obj1 = $("<p></p>")// 相当于var obj2 = document.createElement("p");var原创 2021-02-03 14:29:29 · 2476 阅读 · 0 评论 -
jQuery下载
jQuery下载 第一步：打开JQuery官网，链接：https://jquery.com/，点击 Download jQuery 第二步：下面两个中的任意一个下载即可。因为是国外网站，可能有下不了的情况，可以到这里下载jQuery3.4.1。第一个是压缩版，第二个是未压缩版，压缩版是省略了未压缩版的注释、空格、换行，源码是在一行显示的，而未压缩版的源码比较容易阅读，因此一般来说在使用时使用未压缩版，在上线时使用压缩版 未压缩版jQuery： 压缩版jQuery：...原创 2021-02-01 14:01:24 · 1896 阅读 · 3 评论 -
JavaScript对表格增删改查
先用一个简单的表格来练练手。添加数据原创 2021-02-01 11:31:26 · 8992 阅读 · 3 评论 -
JavaScript之window对象
window对象是JavaScript中最顶层的，是BOM的核心。 常用的对象对象作用document文档对象location用于获取当前窗口的 URL 信息。它等同于document.location属性。navigator用于获取环境信息。history表示浏览器的浏览历史。localStorage指向本地储存的localStorage数据。sessionStorage指向本地储存的sessionStorage数据。conso原创 2021-01-26 22:25:50 · 144 阅读 · 0 评论 -
JavaScript之this关键字
示例代码1 先来看一段this关键字的代码var name="outer";var foo={ name:"inner", getName:function(){ console.log(this.name); return function() { console.log(this.name); } }};foo.getName()(); 可以看到第二个 this 关键字输出的是全局变量，在理解的时候，可以理解为下面的这个过程。// foo.getName()原创 2021-01-26 19:32:17 · 99 阅读 · 0 评论 -
JavaScript之DOM操作
DOM简介是什么？ DOM，全称 Document Object Model，文档对象模型。做什么？ dom 对象就是将标签封装成的 js 对象，而 JavaScript 中内置提供的 document 对象就是将 html 标签封装成的 js 对象。我们可以利用 document 对象的方法来找到某个 html标签。例如，下面的代码中就是通过 document 对象的 getElementById()方法找到 html 文档中 id 为 t1 的标签，并将其封装对象返回给 a1。var原创 2021-01-26 18:23:09 · 173 阅读 · 0 评论 -
JavaScript对象的使用
定义对象标准形式 第一种定义对象的方式——标准形式，使用 new 关键字，变量的属性和方法都是以 属性名: 属性值 的形式赋值，不同的属性和方法之间用逗号,隔开。// 创建方法1: 标准形式var student1 = new Object({ name: "柚咖", age: 18, study: function() { console.log("正在学习"); }});简化形式 第二种定义对象的方式是标准形式的简化形式，这种方式是定义对象最常用的方式。// 创建方法2原创 2021-01-26 14:22:07 · 205 阅读 · 0 评论 -
JavaScript和Java的区别
虽然JavaScript中有Java，但他们之间的关系就如同印度和印度尼西亚一样——没有什么关系。只是JavaScript中的某些语法和Java类似而已。出身不同 Java和JavaScript是由不同公司发布的不同的产品，Java是由Sun公司发布编程语言，而JavaScript是由Netscape公司发布的脚本语言。变量不同1. 变量定义时的区别 定义变量时Java和JavaScript有区别。Java是强类型的语言，它要求每个变量必须在定义时明确指出这个变量是什么类型的；而JavaS原创 2021-01-26 01:34:59 · 18810 阅读 · 0 评论 -
JavaScript提示框
提示框类型方法名信息提示框alert()选择提示框confirm()输入提示框prompt()alert("信息提示框");var result1 = confirm("选择提示框");var result2 = prompt("输入提示框");console.log(result1);console.log(result2); 信息提示框只有一个选项。 选择提示框有两个选项，选择 OK confirm方法会返回true，选择 Cancel c...原创 2021-01-25 23:19:25 · 388 阅读 · 0 评论 -
JavaScript变量
在学习Java的时候，我们先学习的是变量，然后学习了方法，学习JavaScript语法规则和Java一样，也是需要学习变量和方法(但JavaScript比较特殊的是，它将方法也视为了变量)。命名规则 JavaScript的变量名命名规则和Java一样由字母、数字、下划线_、美元符号$组成(不建议使用中文)数字不能开头不能使用关键字区分大小写数据类型 JavaScript中定义变量使用 var 这个关键字，和Java中的变量定义不同，JavaScript的变量在定义时，并不知道是什原创 2021-01-25 17:41:56 · 241 阅读 · 0 评论 -
JavaScript简介
JavaScript是一种脚本语言，虽然JavaScript中有Java，但是JavaScript和Java只是语法上有点相似，其他的一点关系都没有。一、使用方式 JavaScript的导入方式和CSS的引用方式类似，也存在外部引入、内部引入、内联外部引入 外部导入JavaScript文件需要使用下面的代码，这个代码不仅可以放在 head 标签中，也可以放在 body 标签中，不过会有一点区别。<script type="text/javascript" src="./studyJS原创 2021-01-25 15:58:00 · 210 阅读 · 0 评论 -
CSS常用属性
display属性block元素特点：1.1 独占一行。1.2 可以设置宽高，默认情况下宽度是父元素宽度，块级元素即使设置了宽度,仍然是独占一行。1.3 可以设置margin和padding属性。inline元素特点：2.1 不会独占一行。多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行2.2 为内联元素设置宽高属性也无效，其宽度随元素的内容而变化。2.3 水平方向的边距属性有效，竖直方向边距属性无效。inline-block元素特点：简单来说就是使元素既具有bloc原创 2021-01-25 14:00:21 · 276 阅读 · 0 评论 -
CSS盒子模型
概述 CSS盒子模型 (Box Model) 规定了处理元素内容、内边距、边框和外边距的方式。 最里面部分是实际的内容，直接包围内容的是内边距，内边距显示元素的背景；内边距的边缘是边框；边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。外边距 &emsp；定义： 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值(内边距是不可以出现负值的)使用原创 2021-01-25 00:58:59 · 218 阅读 · 0 评论 -
CSS简介
CSS简介 CSS，全称Cascading Style Sheets，层叠样式表。 作用： 用于定义如何显示HTML元素。 语法格式：选择器 { 属性1:属性值1; 属性2:属性值2; …}引入样式的方式外部导入 CSS样式保存在单独的文件中，需要在HTML文件中将其引入进来。 外部导入使用link标签<head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css"原创 2021-01-23 22:10:52 · 198 阅读 · 0 评论 -
HTML表单标签
name属性原创 2021-01-23 19:37:16 · 339 阅读 · 0 评论 -
HTML常用标签
双标签标签描述display常用属性示例div可定义文档中的分区或节（division/section）blockclass和idspan组合文档中的行内元素inlineform用于为用户输入创建 HTML 表单blockul无序列表blockol有序列表blockdl自定义列表blockli定义列表项目，可用在ul、ol和dl列表中list-item此元素会作为列表显示iframe原创 2021-01-23 15:32:17 · 228 阅读 · 0 评论 -
HTML标签属性
属性HTML标签可以设置属性属性可以在元素中添加附加信息，不同的属性名或者属性值会导致标签的功能作用不同属性一般出现在开始标签属性总是以名称/值对的形式出现，比如：name=“value”。全局属性 在HTML中，每一个标签所具有的属性都不太一样，但还是有一些属性是所有标签都有的，这样的属性称为全局属性。常用的全局属性作用id规定元素的唯一 id(唯一标识)class规定元素的一个或多个类名(样式类)style规定元素的行内 CSS 样式(样式)原创 2021-01-23 10:10:43 · 435 阅读 · 0 评论 -
HTML简介
网页的组成Html概念 Html不是编程语言，它只是一种标记语言，使用的是一套标记标签来描述网页。编程语言是需要经过编译，而Html这种标记语言不需要经过编译语法规范 并列关系 包含关系PS：不能有交叉关系！Html文档包含标签文本内容基本Html文档代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title&原创 2021-01-22 11:20:05 · 127 阅读 · 0 评论