- 博客(42)
- 收藏
- 关注
RSS订阅原创 浅谈表单form的基础内容
表单，表单用于向服务器传输数据。用户可以在form表单标签里面放input，textarea,select等可以填写数据的标签，实现表单对数据的获取上传。可以说表单form标签是连接前端页面和后端服务器数据的桥梁。一.表单的组成表单主要有三个方面组成1.form标签form标签为双标签<form></form>，他负责包含负责输入数据内容标签。包含在form表单里面的数据才可以一口气被form表单打包提交。2.表单域表单域负责就是form里面包裹的所有元素标签。里.
2022-04-28 22:07:35
1060
1
原创 模拟京东快递单号查询案例
效果：代码: <style> * { margin: 0; padding: 0; } .search { position: relative; width: 178px; margin: 100px; } .con { di
2022-03-26 08:54:40
759
原创 表单全选和取消全选
<style> .w { width: 1000px; margin: 0 auto; margin-top: 10px; } .header { height: 200px; background-color: purple; } .banner { ..
2022-03-25 19:14:25
151
原创 jQuery实现固定侧边栏
效果：代码：<style> .w { width: 1000px; margin: 0 auto; margin-top: 10px; } .header { height: 200px; background-color: purple; } .banne
2022-03-25 00:07:23
668
原创 四种简单的有手就能学会的jQuery动画效果
jQuery封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。我们这里就简单介绍一下滑动滑出，隐藏显示，淡出淡入，自定义动画这四种简单的动画方式 参数[spped]:指的的速度,可加可不加，通常有两种：[easing]:用来指定切换效果，默认swing[fn]:回调函数，在动画完成执行的函数，每个元素执行一次一、显示隐藏1.show()2.hiden()1.toggle()综合案例二、淡出淡入1.fadeIn()2.fadeOut()3.fadeTogg.
2022-03-18 20:21:08
1740
原创 四大常见的jQuery选择器+案例
常见的jQuery选择器前言四大选择器一.jQuery基础选择器1.ID选择器2.全选选择器3.类选择器4.标签选择器5.并集选择器6.交集选择器二、使用步骤1.引入库2.读入数据总结前言jQuery唯一个javascrip库,里面封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。但因为jQuery对象有自己的封装，dom对象不能使用，所以需要选择器将对象选取出来使用四大选择器一.jQuery基础选择器1.ID选择器ID选择器可以选择指定id的
2022-03-17 19:41:37
6585
原创 【js】在同一页面进行一个登录注册的滑动切换
效果展示相关代码html： <div class="mimabox"> <div class="sign_hd"> <span class="cloud"></span> <ul class="sign_hd"> <li class="curren.
2022-03-05 10:35:33
1767
1
原创 拖动模态框
<!DOCTYPE html><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>Do
2022-02-19 22:11:33
314
3
原创 万事万物皆对象
前提前文：对象的创建和调用添加链接描述一. for…in语句对象的遍历1.作用：用于对数组或者对象的属性进行循环操作2.语法: for (变量 in 对象) { }3.案例： var obj = { name: 'pink老师', age: 18, sex: '男', fn: function() { console.log('111');
2022-01-22 22:01:22
245
原创 页面电子时钟(利用js动态获取时间显示)
效果代码 <style> h2 { text-align: center; } </style> <script> window.addEventListener('load', function() { var h2 = document.querySelector('h2'); time(); .
2022-01-08 16:21:03
1074
原创 点击跳出可拖动弹窗
效果:代码 * { margin: 0; padding: 0; } .login_bg { display: none; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0.
2021-12-31 08:44:31
236
2
原创 DOM文档对象模型（一）
DOM概论什么是domdom能做什么dom树获取元素概论什么是dom文档对象模型,W3C组织推荐的的处理可扩展标记语言的标准编程接口DOM 是一项 W3C (World Wide Web Consortium) 标准。DOM 定义了访问文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”文档：一个页面就是一个文档，DOM中使用document表示元素：页面里所有的标签都是元素，DOM中使用element节点
2021-12-28 10:03:17
207
1
原创 对象的建立和调用代码示例
一.字面量创建1.创建2.调用二.new Object1.创建2.调用三.构造函数1.创建2.调用一.字面量创建1.创建里面的属性或者方法采取键值对的形式 键 属性名:值 属性值var obj={ name:'张三', age:18, sex:'男', sayHi:function(){ console.log('你好'); }}2.调用console.log(obj.name);console.log(obj['age'];obj.sayHi();二.ne.
2021-12-20 16:17:24
124
2
原创 js函数实现简易计算器
var n = prompt('欢迎使用简易计算器:\n1.加法计算器:\n2.减法计算器:\n3.乘法计算器:\n4除法计算器:\n5.退出:\n请输入你的选择:'); function Calculate(n) { n = parseInt(n); while (n != 5) { switch (n) { case 1: ...
2021-12-18 00:20:29
4396
2
原创 用js实现生活资讯网侧边栏
效果：在小屏下点击头部导航栏的彩蛋图标会从左边划出侧边导航栏，点击‘叉’图标关闭侧边导航栏。效果：代码1.html代码: <!-- 侧边栏点击 --> <div class="sidenav" id="sidenav"> <div class="colsesidenav glyphicon glyphicon-remove" id="colsesidenav"></div> <ul class="cl.
2021-12-11 10:11:26
686
3
原创 js的五种简单数据类型
js拥有动态类型，同时意味着相同的变量可用作不同的类型，但是这里我们只介绍js的五种简单数据类型，对复杂数据类型(object)不做介绍。 String(字符串型)定义字符串引号嵌套JS字符串转义符字符串长度字符串拼接Number(数字型 )数字型进制数字型范围数字型三个特殊值isNaN()Boolean(布尔型)Undefined （未定义数据类型）Null（空值）String(字符串型)定义var str = '字符串';1.字符串型可以是引号中的任意文本，其语法为 双引号 “” 和.
2021-12-11 00:40:28
1055
1
原创 一篇媒体查询简谈
定义和使用语法以及用法属性媒体类型媒体功能关键词用法媒体查询+rem实现元素的动态大小改变定义和使用1.使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。2.@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。语法以及用法@media mediatype and|not|only (media feature) {CSS-Code;.
2021-12-05 00:29:23
340
3
原创 你说的那个Bootstrap的栅格系统，他好用吗？
他不是好不好用的问题！他真是的那种，那种很少见的那种，他有标准化的html+css编码规范，提供了一套简介，直观，强悍的组件，有自己的生态圈，不断地更新迭代，连格子都给你分好了，遗憾是就是太好用无脑了，导致我到现在对其他web布局都看不上了。 前言先聊聊Bootstrap简介网站使用方式现在可以用栅格系统为所欲为了简介选项参数前言当我学web移动端布局be like：当我接触到栅格系统be like：虽然你问我学会了啥be like：但是，盒子，是摆好的的盒子，你问我我啥.
2021-11-26 18:00:14
524
2
原创 移动端页面制作之flex弹性布局
前言 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 原理二级目录三级目录原理通过给父盒子添加flex
2021-11-18 15:44:58
425
5
原创 不会做动画的程序猿不是好的动画师（如何用css3动画做动画）
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放缩放：scale:缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小。1.语法：transform:scale(x,y);2.总结：宽和高都放大一倍，相对于没有放大transform:scale(2,2) ：宽和高都放大了2倍transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)transform:s
2021-11-10 15:20:20
6166
39
原创 浅谈transform
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放缩放：scale:缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小。1.语法：transform:scale(x,y);2.总结：宽和高都放大一倍，相对于没有放大transform:scale(2,2) ：宽和高都放大了2倍transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)transform:s
2021-11-06 01:28:15
1289
5
原创 css的四种简单的垂直居中
水平居中很简单，垂直居中头裂开。垂直居中小技巧，只会一种怎能行，要是这种没法用，你说你该怎么做。不如看看此博客，从此居中不难弄。这里写目录标题一级目录二级目录三级目录一级目录二级目录三级目录...
2021-10-24 15:46:55
612
6
原创 css3的新增的选择器
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。1.回顾一下旧的选择器标签选择器即是html标签名作为选择器举例： <p>标签选择器</p> p { color: yellow; }这里有个p标签，给他添加样式的时候也是用的p。这种就是标签选择器类选择器用class属性调用class类举例： <p class="one">标签选择器</p> .one { .
2021-10-21 11:53:54
1515
8
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人