![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
前端练习
格格不入ち
软件工程专业的一个小学生
展开
-
将 vue2+ElementU 项目打包成安卓app
使用HbuilderX将vue2+ElementUI项目打包成安卓app原创 2023-10-13 10:41:17 · 1214 阅读 · 0 评论 -
vue2 ant-design记忆表头列表页面组件
实现效果:代码:RemberTableHeader.vue组件: 记忆表头组件。将用户选择展示的表头数组存储在 localStorage 中,进入页面时读取,实现记忆表头功能。<template> <div style="position: absolute;right: -5px;width: 30px;background-color: #f5f7fd;"> <a-popover placement="bottomRight" :arrow=原创 2023-03-15 11:16:04 · 787 阅读 · 0 评论 -
JS基础知识整理2
JS基础DOM查找节点创建节点删除节点替换节点用元素节点操作CSS事件event事件的冒泡Bubble事件的委派事件的绑定事件的传播:BOM定时器JSONDOMDOM : Document Object Model 文档对象模型四类节点:1.文档节点:整个HTML文档。2.元素节点:HTML文档中的标签。3.属性节点:元素的属性。4.文本节点:标签中的文本。查找节点获取元素节点(document调用) 1. getElementById() 通过id属性获取一个元素节点对象原创 2021-10-08 20:57:06 · 192 阅读 · 0 评论 -
JS练习 div块根据滚轮变化
目标:创建一个div块,在div块上操作滚轮,滚轮向下滚动时div块变高(高度增加);滚轮向上滚动时div块高度减小。代码:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content原创 2021-09-12 16:19:17 · 268 阅读 · 0 评论 -
JS练习 拖拽
<!DOCTYPE html><html lang="zh"><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>拖拽练原创 2021-09-08 22:20:37 · 105 阅读 · 0 评论 -
JS练习 div块跟随鼠标移动
代码:<!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>原创 2021-09-06 16:51:03 · 139 阅读 · 0 评论 -
JS 判断滚动条是否滚动到底了
<!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>Doc原创 2021-09-05 17:08:38 · 640 阅读 · 1 评论 -
JS练习 图片切换
<!DOCTYPE html><html lang="zh"><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>图片切原创 2021-09-05 14:36:46 · 96 阅读 · 0 评论 -
JS基础知识整理1
JS基础基础数据类型强制类型转换将其他类型强制转换为String将其他类型转换为 Number将其他类型转换为布尔操作符对象数组String(字符串)正则表达式基础Js包括:ES(标准) ,DOM(文档对象模型),BOM(浏览器对象模型)Js特点:解释型语言(不用编译);类似于C和Java的语法结构;动态语言;基于原型的面向对象。标识符:所有可以自主命名的(变量名,函数名,属性名)规则1.标识符中可以含有字母,数字,下划线,$2.标识符不能以数字开头3.标识符不能是ES中的关键字4.命名规原创 2021-09-02 19:40:22 · 158 阅读 · 1 评论 -
仿写小米官网 右边工具导航栏
说明:1.由于本人只学习了部分html和css,所以本文没有涉及到js部分。2.本文并没有实现小米官网首页的全部功能,还存在很多问题。如果以后技能提升,会继续更新实现未完成的功能。3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码,如果发现问题或者有更好的方法请联系本人探讨更正。4.总体框架分析见博客 《仿写小米官网 简单的HTML+CSS练习》目标:仿写小米官网的右侧工具导航栏:HTML元素:<div class="tool-bar"> <原创 2021-08-19 11:24:59 · 1504 阅读 · 8 评论 -
仿写小米首页 底部
说明:1.由于本人只学习了部分html和css,所以本文没有涉及到js部分。2.本文并没有实现小米官网首页的全部功能,还存在很多问题。如果以后技能提升,会继续更新实现未完成的功能。3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码,如果发现问题或者有更好的方法请联系本人探讨更正。4.总体框架分析见博客 《仿写小米官网 简单的HTML+CSS练习》目标:仿写小米官网的底部:初步HTML元素分析: 观察可知,整体部分为一个整个的块,使用一个div元素。 里面的内容分为原创 2021-08-19 11:19:06 · 642 阅读 · 0 评论 -
仿写小米网站首页 中间部分
说明:1.由于本人只学习了部分html和css,所以本文没有涉及到js部分。2.本文并没有实现小米官网首页的全部功能,还存在很多问题。如果以后技能提升,会继续更新实现未完成的功能。3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码,如果发现问题或者有更好的方法请联系本人探讨更正。4.总体框架分析见博客 《仿写小米官网 简单的HTML+CSS练习》目标:仿写小米官网的中间部分:初步HTML元素分析: 观察可知,整体部分为一个整个的块,使用一个div元素。中间有一个表示内容区的原创 2021-05-29 17:18:21 · 843 阅读 · 0 评论 -
仿写小米网站首页 产品导航栏
说明:1.由于本人只学习了部分html和css,所以本文没有涉及到js部分。2.本文并没有实现小米官网首页的全部功能,还存在很多问题。如果以后技能提升,会继续更新实现未完成的功能。3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码,如果发现问题或者有更好的方法请联系本人探讨更正。4.总体框架分析见博客 《仿写小米官网 简单的HTML+CSS练习》目标:仿写小米官网的顶部导航栏:初步HTML元素分析: 观察可知,与顶部导航栏部分类似,整体结构为一个整个的块,使用一个div元素原创 2021-05-29 16:40:53 · 1174 阅读 · 0 评论 -
仿写小米网站首页 顶部导航栏部分
说明:1.由于本人只学习了部分html和css,所以本文没有涉及到js部分。2.本文并没有实现小米官网首页的全部功能,还存在很多问题。如果以后技能提升,会继续更新实现未完成的功能。3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码,如果发现问题或者有更好的方法请联系本人探讨更正。4.总体框架分析见博客《仿写小米官网 简单的HTML+CSS练习》 https://blog.csdn.net/qq_45234177/article/details/117171415目标:仿写小米官网的顶部导航原创 2021-05-23 14:15:46 · 7784 阅读 · 0 评论 -
仿写小米官网 简单的HTML+CSS练习
说明:1.由于本人只学习了部分html和css,所以本文没有涉及到js部分。2.本文并没有实现小米官网首页的全部功能,还存在很多问题。如果以后技能提升,会继续更新实现未完成的功能。3.这个练习会为分几篇文章详细介绍从最初分析到最后实现的代码,如果发现问题或者有更好的方法请联系本人探讨更正。目标:仿写小米官网的部分首页,小米官方首页如下图:总体分析:观察小米官网的整体结构,发现整体框架如下:注意:1.产品导航栏在网页中只在中间部分区域显示内容,但设计布局占整个宽度。2.中间部分轮播图大小占原创 2021-05-22 22:01:44 · 3006 阅读 · 2 评论 -
简单的图片列表练习
目标:实现3张图片垂直排列布局,并且每张图片都可以点击实现:<!Doctype html><html lang="zh"> <meta charset="UTF-8"> <title>图片列表练习</title> <link rel="stylesheet" href="reset.css"> <style> /* 外部边框样式 */ ul{原创 2021-05-09 11:22:58 · 184 阅读 · 1 评论