呆呆敲代码丫-优快云博客

原创前端网页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 1528 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 250

原创 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 171 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 13559 2

对象是大括号括起来的,而数组是用[]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 147

原创 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 205 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 110

原创 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 128

原创 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 146

原创 JavaScript逻辑运算符(&&与,或||,非!)

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body>  <script type="text/

2021-06-21 14:52:15 513

原创 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 3107

原创 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 256

原创 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 112

原创用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 577 2

原创弹性布局换行

<!DOCTYPE html><html> <head> <!-- 弹性布局弹性容器:设置了display:flex;这个为弹性容器,里面的子元素会按照弹性布局的方式进行布局. 弹性子元素:设置了display:flex;的弹性容器的直接子元素即为弹性子元素弹性主轴方向: 默认主轴方向为从左到右flex-direction: row; 从上往下flex-direction: column;

2021-06-08 19:45:24 7626

原创弹性布局最简单详细的理解学习方法

<!DOCTYPE html><html> <head> <!-- 弹性布局弹性容器:设置了display:flex;这个为弹性容器,里面的子元素会按照弹性布局的方式进行布局. 弹性子元素:设置了display:flex;的弹性容器的直接子元素即为弹性子元素弹性主轴方向: 默认主轴方向为从左到右flex-direction: row; 从上往下flex-direction: column;

2021-06-08 15:20:30 384

原创纯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 199

原创纯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"/> &lt

2021-06-06 20:41:05 189

原创 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 455

原创 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 136

原创过渡动画详细介绍

<!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 641

原创文字属性综合

<!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 119

原创 HTML伪元素

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>  <style type="text/css"&

2021-06-01 20:00:57 2207 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 121 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 730 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 104 2

原创 HTML基础知识

跟着唯唯同学的步伐别走丢哦!!!<!DOCTYPE html> <!-- head:一般用于说明页面的一些信息,不直接显示在页面上 meta charset="utf-8" 告知浏览器,现在文档使用的编码 title:页面的标题body:一般页面的内容,直接显示在网

2021-06-01 10:28:38 117 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 2020 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 1891 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 1679 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 2085 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 2175 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 1915 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 628 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 2574 3

原创 JavaScript 事件类型1

红色的比较重要点,也是最常用的,希望能帮到你们…

2020-07-20 16:41:37 476 9

原创 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 3505 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 1328 8

原创 jQuery

直接创建：.append -将子元素加在最后面append -将子元素加在最后面.prepend 将子元素加在最前面.before -将兄弟元素放前面.before -将兄弟元素放前面.before -将兄弟元素放前面.remove -指定删除元素包括自己.empty -清空子元素不包括自己.replacewith -节点替换.val-如果括号里面有数据就进行设置，没有就进行获取.html -解析标签.text -不会解析标签，怎么写就怎么显示.scroll -滚轮或

2020-05-20 09:59:13 342 6

前端网页个人引导页.zip

用HTML+css,仿写小米商城手机端页面

css3转换--学习分享

HTML5选择器和伪元素----学习分享

HTML5常用标签-------学习分享

空空如也