- 博客(39)
- 资源 (5)
- 收藏
- 关注
原创 前端网页Ui引导页模板
**个人导航**直接展示效果图相信各位宅男宅女都喜欢这样既卡通又粉色的个人导航清洁的界面吧!!!废话少说咱们先来看看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name...
2021-11-26 09:55:02
1429
2
原创 导航栏 利用前端和jquery结合Vue
html内容<!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"> <ti.
2021-10-21 15:08:12
212
原创 JavaScript轮播图
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } .swiper{ margin: 0 auto; width:
2021-07-13 11:04:56
146
1
原创 JavaScript循环数组
1.调用的是头条的地址2.复制这行来循环数组将下面注销这行代码取消,控制台和页面就可以看见了<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> // 取消注释 //var nws={"
2021-06-25 16:15:25
12875
2
原创 JavaScript数组的介绍
对象是大括号括起来的,而数组是用[]var student={ name:'猪', age:16 }1/创建数组第一种,字面量方式var city=["广西","广东","广州"] console.log(city)2/创建数组第二种,构造函数方式var city1=new Array() console.log(city1)所有的数据类型都可以放,数组可以存放任意的数据,没有类型限制,没有长度限制var arr=["字符串",123,undefined,,n
2021-06-25 14:58:41
114
原创 JavaScript对象的创建和构造函数(工厂模式创建对象,构造函数,class创建对象,原型对象)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> // 1/原始的创建方法 // 对象字面量 var student={ name:'小花', age:16, sch
2021-06-24 20:26:12
177
3
原创 JavaScript的值类型与引用类型
值类型<script type="text/javascript"> var a=10; var b=a; a=20; // 20 console.log(a) //10 console.log(b)引用类型<script type="text/javascript"> var a={ name:"阿宝" } var b=a; a.name="阿猪"; // 赋值的是内存地址 con
2021-06-23 20:44:16
77
原创 JavaScript的面向对象(如:特征,行为)
构造函数创建对象方法var student=new Object() // 特征 student.name = "阿宝????" student.age = "16" // 行为 student.draw = function(){ console.log(this.name+"会干饭") } console.log(student)字面量的方式创建对象var teacher = {}//创建没有属性和方法的对象 teacher.name =
2021-06-23 10:16:26
100
原创 JavaScript强制数据类型转换
转为字符串<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> var b=true; var b1=b+""; console.log(b1); console.log(typ
2021-06-21 20:51:15
113
原创 JavaScript逻辑运算符(&&与,或||,非!)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- &&(与):两个都为真,结果才为真 ||(或):只要有一个是真,结果就是真 !(非):对一个布尔值取反 --> <script type="text/
2021-06-21 14:52:15
467
原创 JavaScript控制台输出警告提示,报错提示和三种弹窗方式
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> // alter("尽量少用原生的弹框") // 控制台输出 var a="今天中午是点啥"; console.log(a);
2021-06-20 11:10:11
2981
原创 Web前端单位和网络地址知识
简单的介绍单位px:像素单位em:相对单位,相对于父元素的字体大小(不推荐使用)rem:相对单位,相对于根(html)root元素的字体大小(配合jsRem布局使用)Vw:v->viewport视窗的宽度,百分比的高度,百分之百的视窗宽度100vwVh:v->viewport视窗的高度,百分比的高度,百分之百的视窗高度100vh设定最大宽度:max-width:00px设定最小宽度:min-width:00px设定最大高度:max-height:
2021-06-19 19:50:05
220
原创 html和css简单复习
HTML:标签语言常用的标签:标题标签h1-h6段落标签p/div/ul>li/ol>li/a表单标签form/input自定义标签Css:决定样式,重叠样式标签的大小1. 外边距margin2. 内边距padding3. 边框border4. 宽width5. 高height盒子模型大小(box-sizing)1.border-box:设定的width和height涵盖padding和border2.content-box:默认元素背景1.ba
2021-06-19 15:04:57
83
原创 用css仿写小米手机端官网
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <!-- 设置浏览器窗口分辨率 --> <meta name="viewport" content="width=375,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/header.css"/> &l
2021-06-19 10:55:27
518
2
原创 弹性布局换行
<!DOCTYPE html><html> <head> <!-- 弹性布局 弹性容器:设置了display:flex;这个为弹性容器,里面的子元素会按照弹性布局的方式进行布局. 弹性子元素:设置了display:flex;的弹性容器的直接子元素即为弹性子元素 弹性主轴方向: 默认主轴方向为从左到右flex-direction: row; 从上往下flex-direction: column;
2021-06-08 19:45:24
7520
原创 弹性布局最简单详细的理解学习方法
<!DOCTYPE html><html> <head> <!-- 弹性布局 弹性容器:设置了display:flex;这个为弹性容器,里面的子元素会按照弹性布局的方式进行布局. 弹性子元素:设置了display:flex;的弹性容器的直接子元素即为弹性子元素 弹性主轴方向: 默认主轴方向为从左到右flex-direction: row; 从上往下flex-direction: column;
2021-06-08 15:20:30
347
原创 纯css3用图片写出的游戏动画
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #d1{ width: 300px; height: 200px; /* border: 1px solid #cccc; */ /* 背景图片 */ background-im
2021-06-07 19:18:21
171
原创 纯css3立方体旋转与缩放
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link rel="stylesheet" type="text/css" href="./css/index.css"/> <
2021-06-06 20:41:05
158
原创 label绑定选择框
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ width: 200px; height: 200px; border: 1px solid #999; } #gree:checked~#d1{ background
2021-06-04 10:03:34
417
原创 css3立方体,魔方造型旋转
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ /* 透视点 */ perspective: 1000px; } .lifang{ width: 200px; height: 200px; margin:
2021-06-03 15:09:10
109
原创 过渡动画详细介绍
<!DOCTYPE html><html> <head> <!-- 设置过渡的属性 设置过渡的时间 设置过渡的速度 设置过渡的延迟时间 --> <meta charset="utf-8" /> <title></title> <style type="text/css"> #d1{ width: 200px; height: 200px;
2021-06-02 16:23:48
593
原创 文字属性综合
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #d1{ margin: 0 auto; /* 字体大小 */ font-size: 40px; /* 字体样式,设置字体必须在系统里面存在的,如果没有这个字体,就会默认按照系统字体样式
2021-06-02 11:59:36
99
原创 HTML伪元素
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 通过css创建假的元素 创建伪元素: :before,在元素内部的最前面创建一个假子元素 :after,在元素内部的最后面创建一个假子元素 伪元素默认是行块元素,没有宽高的 --> <style type="text/css"&
2021-06-01 20:00:57
2156
5
原创 初识css
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>唯唯同学知识分享</title> <!-- css使用方式 1.通过style标签设置样式 2.通过style属性设置样式 3.通过css文件使用 注意:css的特点 1.直接在style上写的内容优先级最高,同样的选择器,谁在后面谁的优先级比较高.
2021-06-01 15:33:29
101
2
原创 a标签内部跳转
跟着唯唯同学的步伐别走丢哦!!!<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #name1{ height: 1000px; background: #00FFFF; } #name2{ height: 1000px; b
2021-06-01 11:03:16
697
2
原创 css3滤镜
跟着唯唯同学的步伐别走丢哦!!!<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> img{ width: 400px; height: auto; display: block; margin:0 auto; transiti
2021-06-01 10:55:39
86
2
原创 HTML基础知识
跟着唯唯同学的步伐别走丢哦!!!<!DOCTYPE html><!-- 标准的html5文档 , 发布时间2014年 --><!-- 标签:双标签(开始标签,结束标签),单标签 --><!-- html标签,整个文档的根标签 --> <!-- head:一般用于说明页面的一些信息,不直接显示在页面上 meta charset="utf-8" 告知浏览器,现在文档使用的编码 title:页面的标题body:一般页面的内容,直接显示在网
2021-06-01 10:28:38
94
2
原创 jQuery 表单中输入内容,提交的时候,将数据提交表格当中
案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jquery引入文件/jquery-
2020-07-30 20:09:57
1973
4
原创 jQuery 属性/过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &.
2020-07-28 09:35:43
1862
5
原创 自动滚轮
页面滚轮跟小说一样自动向下/向上的滚动哟~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script>
2020-07-24 16:06:05
1645
9
原创 Vue 简单的开始
Vue.js 简单滴起步阅读之前,您需要了解的知识:HTMLCSSJavaScript<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue</title>
2020-07-24 15:31:08
2057
22
原创 JavaScript China城市联动
中国全城市的地址省,市,县<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script src="jquery.js"></script> <script src="json.js"></...
2020-07-23 11:42:36
2125
16
原创 JavaScript 事件/焦点
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 150px; height: 150px; background: red;
2020-07-21 11:34:09
1891
4
原创 css 简单滴旋转动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box {
2020-07-21 11:18:08
608
2
原创 css简单的动画
简单滴动画效果,鼠标移到图片就能执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-07-21 10:59:07
2534
3
原创 JavaScript 随机显示照片
<!doctype html><html><head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"> var x_left = 0; var x_right = 0; var y_top = 0; var y_bottom =
2020-07-19 19:56:04
3404
15
原创 JavaScript 定时器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 定义变量
2020-07-19 19:49:54
1295
8
原创 jQuery
直接创建:.append -将子元素加在最后面append -将子元素加在最后面.prepend 将子元素加在最前面.before -将兄弟元素放前面.before -将兄弟元素放前面.before -将兄弟元素放前面.remove -指定删除元素包括自己.empty -清空子元素不包括自己.replacewith -节点替换.val-如果括号里面有数据就进行设置,没有就进行获取.html -解析标签.text -不会解析标签,怎么写就怎么显示.scroll -滚轮或
2020-05-20 09:59:13
326
6
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人