前端(html+css+js)
文章平均质量分 73
前端
黄大帅@lz
我很拽,所以不想写,我叫抓war
展开
-
pc游戏端(QQ飞车)
pc游戏端(QQ飞车)代码仿写原创 2022-11-18 19:37:11 · 413 阅读 · 0 评论 -
JavaScript之入门学习风云(5)
Attribute获取元素属性获取元素属性:元素.getAttribute(“属性名”)设置元素属性:元素.setAttribute(“属性名”,属性值)移除元素属性。原创 2023-01-11 04:32:55 · 140 阅读 · 0 评论 -
web前端学习(3)
B)内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;boder:线条样式:dashed(虚线) / solid(单实线) /double(双实线) /dotted(点划线)D)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。父元素触发弹性盒子过后,子元素会默认横向显示,类似于浮动,但是不是浮动,与浮动没关系,但是与他的孙子没关系。触发弹性盒子后,其子元素会变为块模型,可以设置其高度与宽度。原创 2023-01-02 12:37:26 · 83 阅读 · 0 评论 -
JavaScript之入门学习风云(3)
由开发人员自己创建的对象。原创 2023-01-10 17:35:25 · 67 阅读 · 0 评论 -
Tap选项卡
2. 通过z-index来调节下面背景图的显示。1.先设置好选项卡样式,以及所对应的内容。原创 2023-01-12 20:56:07 · 265 阅读 · 0 评论 -
JavaScript之入门学习风云(2)
if语句在执行时,会先对条件表达式进行求值判断,如果条件表达式的值为true,则执行if后的语句,如果条件表达式的值为false,则不会执行if后的语句。当该语句执行时,会先对if后的条件表达式进行求值判断, 如果该值为true,则执行if后的语句 如果该值为false,则执行else后的语句。当该语句执行时,会从上到下依次对条件表达式进行求值判断如果值为true,则执行当前语句。如果所有的条件都不满足,则执行最后一个else后的语句 该语句中,只会有一个代码块被执行,一旦代码块执行了,则直接结束老句。原创 2022-12-09 17:02:49 · 155 阅读 · 0 评论 -
web前端学习(1)
HTML 是用来描述网页的一种语言HTML 指的是超文本标记语言 (Hyper Text Markup Language)。HTML 不是一种编程语言,而是一种标记语言 (markup language。、标记语言是一套标记标签 (markup tag) < dt > 项目 < dd > 描述项目 < dt > 项目2 < dd > 描述项目原创 2022-12-29 11:37:11 · 128 阅读 · 0 评论 -
JavaScript之入门学习风云(1)
JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证。所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则。比如:用户名的长度,密码的长度,邮箱的格式等。但是,有的同学可能会有疑问,这些验证,后端不也可以进行验证吗?确实,后端程序的确可以进行这些验证,但你要清楚,在1995年那个年代,网速是非常慢的,向后端发送一个请求,浏览器很久才能得到响应,那这无疑是一种非常不好的用户体验。原创 2022-12-01 23:15:05 · 230 阅读 · 0 评论 -
web前端学习(4)
片段划分:为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段”)如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。grid布局也称为网格布局,是将页面中的父元素划分为一个个小格子,然后通过这些小格子进行合并来制作不同的网路效果。”title=“输入内容:一个数与三个大写字母” placeholder=‘输入内容:一个数与三个大写字母’>给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得国标焦点,一个页面只能有一个。盛放不下的话则不在划分列数。原创 2023-01-04 22:50:46 · 146 阅读 · 0 评论 -
css基础学习(2)
div{ }, ∠div>∠/div>使用场景:*{ }–> 即:div,ul,p,h1{ }**> 注意:父子 M>N { }后代 M N { }兄弟 M~N { } 当前M下面的所以兄弟N标签相邻 M + N{ } 当前M下面相邻的N标签1. css伪类用于某些元素添加的效果。一般用于初始样式添加不上的时候,用伪类来添加:link; :visited;:hover;:active2.结构伪类选择器组成: content(物品) -> padding(填充原创 2022-11-04 19:10:31 · 280 阅读 · 1 评论 -
刻度时钟js
上方是简易的刻度时钟,下方是电子时钟,上下的时间需与北京时实时对应。原创 2023-01-14 22:28:57 · 90 阅读 · 0 评论 -
html入门学习---css基础
注意1 内部样式:style标签2 内联模式:在body外添加,即 style属性外部样式外部输出的代码书写1. 单词表示法:red,green…2. 十六进制表示法:#000000 #ffffff3. rgb三原色表示法: rgb(255,255,255)红绿蓝表示, 取值范围0~255.1.4 css背景样式1. backeground-color 背景色2. backgground-image 背景图url(背景地址)默认:将整个背景铺满3. background-r原创 2022-10-28 19:40:15 · 476 阅读 · 1 评论 -
博文尚学代码书写
前端小作业练习(博文尚美代码)原创 2022-11-18 19:14:38 · 91 阅读 · 0 评论 -
css基础学习(3)
4. 如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)border-radius:10px 20px 30px 40px;/*相切的圆不是正圆了,而是x轴是一个半径100px,y轴是半径为50px的椭圆*/left、top. right、bottom是相对于当前元素自身进行偏移的。@3. 使块元素默认宽根据内容决定(让块具备内联的特性)/*若用margin进行调动位置会影响后面的元素 */@2. 使内联元素支持宽高(让内联具备块特性)原创 2022-11-18 19:11:14 · 89 阅读 · 0 评论 -
JavaScript之入门学习风云(4)
es7新增,用来判断一个数组、字符串是否包含一个指定的值,使用===运算符来进行值比较,如果是返回true,否则false,参数有两个,第一个是(必填)需要查找的元素值,第二个是(可选)开始查找元素的位置。区别是keys()是对键名的遍历、values()是对键值的遍历、entries()是对键值对的遍历。二者的区别是:find()方法返回匹配的值,而findIndex()方法返回匹配位置的索引。reduceRight():从数组的最后一项开始遍历到第一项,返回一个最终的值。原创 2023-01-10 16:44:21 · 160 阅读 · 0 评论 -
点击按钮之后可以由快到慢地回到顶部,处于顶部位置时按钮消失,按钮位于页面的右下方。
点击按钮之后可以由快到慢地回到顶部,处于顶部位置时按钮消失,按钮位于页面的右下方。原理:见代码内部详解。原创 2023-01-11 20:01:25 · 76 阅读 · 0 评论 -
css学习(4)
表现形态都是 文本加粗 和 文本斜体1. 2.引用标签1. 3.iframe标签可以引入其他的html到当前html中显示。1. 4. br 与 wbr1. 5. pre 与 code针对网页中的程序代码的显示效果。1. 6.map 与 area给特殊图形添加链接,area能添加的热区的形状:矩形、圆形、多边形。1. 7. embed 与 object给flash和一些插件进行渲染操作的标签。1. 9. 文字注解ruby标签定义ruby注释(中文注音或字符),rt标签原创 2022-12-03 08:55:48 · 142 阅读 · 0 评论 -
点名系统案例
【代码】点名系统案例。原创 2023-01-13 23:40:21 · 105 阅读 · 0 评论 -
web前端学习(2)
差别1: 本质的差别: link属于XHTML标签,而@import完全是CSS提供的一种方式2差别2:加载顺序的差别: 当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。3差别3: 兼容性的差别: @impot是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。C)起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)a:link{属性:属性值;原创 2022-12-29 19:49:10 · 53 阅读 · 0 评论 -
1.发送按钮点击后,会被禁用 2.被点击后,按钮里面的内容会变化成1分钟的倒计时3待发送按钮被触发后才可以点击提交按钮,需在验证码框里填写0505,用弹窗提示成功。
/ 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改。// 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态,并且显示提交按钮。// 按钮点击之后,会禁用 disabled 为true。// 里面秒数是有变化的,因此需要用到定时器。// 定义一个变量,在定时器里面,不断递减。Document 和另外 9 个。原创 2023-01-11 22:28:38 · 137 阅读 · 0 评论 -
(HTML+css)学习小征程!!!
HTML 称为超文本标签语言,是一种标识性的语言,用于创建网页和Web应用程序。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。@CSS(Cascading Style Sheets,层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。原创 2022-10-20 19:19:20 · 1491 阅读 · 2 评论 -
前端响应式布局
width :viewport的宽度,有 max-width 与 min-width。height :viewport的高度,有max-height与 min-height。not :用于否定媒体查询,如果不满足这个条件则执行内容,否则将不执行。100wh = 100% = 整个页面的宽度 = 整个宽度的像素。100vh = 100% = 整个页面的高度 = 整个高度的像素。(竖屏)与== landscape== (横屏)两种。and :用于将多个媒体查询规则组合成单条媒体查询。原创 2023-01-31 16:48:46 · 107 阅读 · 0 评论 -
JavaScript之入门学习风云(6)
增加了let与constlet与var区别必须先定义才能够使用变量重名会报错块级作用域,在块级里面定义的变量在外部不可利用,有助于防止变量冲突let与const的去别let是一个定义变量的,而const是定义常量的const定义的时候必须赋值,因为const定义过后的常量不能够改变只要我在本代码块内声明了 i,那就只能使用本代码块内声明的 i,哪怕在我定义之前使用了i也不能使用外边的i(霸道)let、const不存在变量提升(这也就导致程序会报错,而不输出undefined)原创 2023-01-20 21:23:17 · 87 阅读 · 0 评论 -
购物车案例
点击全选,所有商品都选中当所有商品选中时,全选也选中。原创 2023-01-15 22:56:53 · 54 阅读 · 0 评论 -
省市区三级联动
通过三个下拉菜单的联动来实现,第一级下拉菜单为省级,第二级下拉菜单为市级,第三级下拉菜单为区级当点击第一级下拉菜单,第二级菜单的内容会自动匹配:选择第二级菜单时,第三级菜单会自动生成。当我取消上一级菜单的选项时,次一级选项会自动消失。原创 2023-01-17 20:32:15 · 673 阅读 · 0 评论 -
js轮播图
1.鼠标不在图片上方时,进行自动轮播,并目左右箭头不会显示当鼠标放在图片上方时,停止轮播,并且左右箭头会显示;2.图片切换之后,图片中下方的小圆点会同时进行切换,并且点击相应的小圆点可以切换到相应的图片上;3点击左右箭头可以进行左右图片的切换4.图片上需有介绍的文字,会随图片切换一起进行切换。原创 2023-01-17 22:18:13 · 79 阅读 · 0 评论 -
JS原生项目介绍文档
json-server环境的编写在安装node.js的时候安装到了一个中文文件袋中,导致运行不了,后面跟着安装视频进行安装,进去还是会有问题,然后通过把每一次的代码错误的地方就行了百度搜索,经过了一下午的努力只有搭建成功js中的es6语法不够熟悉,还要回去看以往的视频与笔记js的接口段部分由于在看视频的时候没有通过实操,进行前后端的操作导致完全听不懂,但是回去重新跟着写了一遍,对于前后端的接口有了一定的了解与熟悉js基础知识不够扎实。原创 2023-02-06 04:24:03 · 94 阅读 · 0 评论 -
弹幕效果~~~!
1.页面上漂浮字体大小不一、颜色不一,从左向右滚动的弹幕;2.底部中间有一个发送功能,可以发送新的弹幕;3底部的发送部分可以向下收起和弹出。原创 2023-01-17 15:04:49 · 117 阅读 · 0 评论 -
用jQuery写购物车全选菜单
【代码】用jQuery写购物车全选菜单。原创 2023-02-02 23:48:46 · 469 阅读 · 0 评论 -
注册表单提交
1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮2.点击表单里的输入框,隐藏提示文字3.点击提交和重置按钮时,都需要有相应的提示4.在表单提交是,需要进行验证验证填写内容是否合理:昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。原创 2023-01-18 08:43:58 · 200 阅读 · 0 评论 -
js--es6学习
它们与传统的全局方法isFinite(和isNaN的区别在于,传统方法先调用Number(将非数值的值转为数值,再进行判断,而这两个新方法只对数值有效,NumberisFinite对于非数值一律返回false,Number.isNaN0只有对于NaN才返回true,非NaN一律返回false。Proxy如其名,它的作用是在对象和和对象的属性值之间设置一个代理,获取该对象的值或者设置该对象的值,以及实例化等等多种操作,都会被拦截住,经过这一层我们可以统一处理,我们可以认为它就是“代理器。js现在有两种模块。原创 2023-01-31 14:22:55 · 177 阅读 · 0 评论 -
jQuery学习小征途
jQuery学习小征途原创 2023-02-02 21:48:00 · 236 阅读 · 0 评论 -
放大镜效果案例
1.鼠标移至图片上方,鼠标周围出现黄色的的正方形框,黄色矩形框会随着鼠标的移动而移动;2将黄色正方形框里的内容的长和宽均放大2.4倍,并在图片右边进行显示。原创 2023-01-16 14:59:04 · 78 阅读 · 0 评论 -
动态表格噢!!
1.表格由专业班级学号1-10号同学的信息组成,包括: 学号、姓名、性别、二级学院、班级、专业、辅导员;2.表格的奇数行字体为黑色,底色为白色;偶数行字体为白色,底色为黑色;3.表格的每一行后有一个删除按钮,点击后会跳出提示弹窗,确认后删除该行的内容,并且删除后上述的颜色规律保持不变:4.表格的右上方有一个添加按钮,点击后跳出一个表单弹窗,可以填加新的学生的信息。原创 2023-01-18 12:57:13 · 74 阅读 · 0 评论 -
Bootstrap学习历程
Bootstrap是一个HTML,CSS,JavaScript的框架Bootstrap框架包含了很多常见的css样式,JavaScript的效果Bootstrap框架官方文档的案例足够你应付项目中大部分的需求。原创 2023-02-03 23:57:42 · 103 阅读 · 0 评论 -
瀑布流+慢加载
多个等宽的图片进行穿插排序成六列,并且在目前显示的最后一张图片显示之后,再进行下拉时能够在进行加载其他图片,每次下拉显示20-30张图片。原创 2023-01-17 08:44:46 · 209 阅读 · 0 评论