寒假前端
小青龙8085
这个作者很懒,什么都没留下…
展开
-
类360极速浏览器官网html
打算考考研了,所以把之前没写的博客都补一下。赶紧去钻进考研的学习中。效果图动画部分代码动画部分采用替换标签中类的方法,有两个类,init(动画初始化)、done(动画开始)。当显示该页面时就开始该页面的动画,并且初始化上一个页面的动画。 var animationElement={ ".box1":[ ".font1", ".phone1", ...原创 2020-04-13 23:15:13 · 416 阅读 · 0 评论 -
canvas之手势锁屏
这个是效果图 首先是创建canvasLock这个对象,并且设置width(画布的宽)、height(画布的高)、chooseType(每行1圆得数量)、pwd(解锁手势,用数字表示的字符串)属性 window.canvasLock=function(obj){ this.width=obj.width; this.height=obj.height; this...原创 2020-03-27 20:02:03 · 775 阅读 · 0 评论 -
HTML5表单验证
HTML5表单验证表单验证的两种方式: form表单提交到后台(学习这个) 无刷新页面的ajax提交(之前做过) HTML5约束验证API willValidate属性 willValidate: 指定 input 是否需要验证 willValidate属性 该属性获取一个布尔值,表示表单元素是否需要验证。如果表单元素设置了required特性或patter...原创 2020-03-23 14:49:38 · 1031 阅读 · 0 评论 -
网页版音频播放器,歌词随音乐而动
制作不易,多多支持,谢谢!!我的博客里面还有关于视频播放器的,感兴趣的小伙伴可以来看看。这个是效果图这是利用audio做的一个歌词随音乐而动的html页面。这个简单的音频播放器是用ajax请求本地服务器的lrc文件,lrc文件就是歌词文件。歌词滚动的基本思想把歌词放在盒子里面,通过audio的timeupdata事件监听音乐的播放,并获取当前播放的时间current...原创 2020-03-08 15:15:05 · 1837 阅读 · 0 评论 -
网页版视频播放器
原创、不易,望多多支持,谢谢!!!目录 主要功能图片展示1、视频进度条2、播放暂停按钮和全屏3、时间4、音量5、倍速6、键盘控制本来想上传一个gif的,但一直上传失败。所以就只能上传一些截图了。主要功能:可以拖动小船改变视频进度,直接点击进度条视频可以直接跳到该位置。可以通过键盘和鼠标来调音量,也可以调倍速,快进快退。图片展示...原创 2020-03-04 17:56:39 · 1442 阅读 · 0 评论 -
关于AJAX
什么是Ajaxajax是什么?作用是什么?AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件,但需要用户允许JavaScript...原创 2020-02-20 18:06:01 · 118 阅读 · 0 评论 -
过渡式轮播图
效果图:(制作不易,多谢支持)寒假里因为新型肺炎的事情不敢出门,虽然整天呆在家里,但我感觉也并不是那么无聊,可能我真的比较宅吧,话说回来这么长时间什么也不干也不太好,所以就利用这宝贵的时间学点知识。其实在还没放假的时候就已经做好了好好学习的打算,到今天也差不多坚持了快一个月了,虽然上午基本上是用睡觉度过的,但感觉通过这些天的学习还是收获了许多。今天这个案例是做轮播图,其实早就想做这个...原创 2020-02-10 20:58:51 · 1399 阅读 · 0 评论 -
CSS3之动画狗
这个会动的哦,今天花了一下午的时间做的。效果:html代码:<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"/> <title></title> <link rel="stylesheet" href="3.css">...原创 2020-01-30 21:27:57 · 360 阅读 · 0 评论 -
transform之筛子
效果:代码:<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style> body{ perspective: 800px;/*视角距离*/ perspective-...原创 2020-01-29 21:39:11 · 193 阅读 · 0 评论 -
animation案例
效果:这是一个动画代码:<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"/> <title></title> <style type="text/css"> div:nth-child(1){ width: ...原创 2020-01-29 20:41:05 · 298 阅读 · 0 评论 -
transform案例示意图
效果:当点击每个蓝色方块的时候后都会有相应的效果。代码:<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"/> <title></title> <style type="text/css"> *, *:after, *...原创 2020-01-28 22:13:01 · 365 阅读 · 0 评论 -
text-overflow
text-overflow定义和用法text-overflow 属性规定当文本溢出包含元素时发生的事情。语法text-overflow: clip|ellipsis|string;值 描述 clip 修剪文本,直接减去多余的文本。 ellipsis 显示省略符号来代表被修剪的文本。 string 使用给定的字符串来代表被修剪的文本。 注...原创 2020-01-26 16:26:08 · 618 阅读 · 0 评论 -
border-image
border-image语法border-image: source slice width outset repeat|initial|inherit;值 描述 border-image-source 用于指定要用于绘制边框的图像的位置 border-image-slice 图像边界向内偏移 border-image-width 图像边界的宽度 ...原创 2020-01-25 17:17:54 · 284 阅读 · 0 评论 -
h5新增的结构标签
结构标签(块状元素)-----有意义的div标签 描述 article 标记定义一篇文章 header 标记定义一个页面或一个区域的头部 nav 标记定义导航栏链接 section 标记定义一个区域 aside 标记定义内容部分的侧边栏 hgroup 标记定义一个区块中相关内容 figure 标记定义一组媒体内容 ...原创 2020-01-21 16:31:59 · 500 阅读 · 1 评论 -
侧边栏导航跟随案例
效果图:代码:<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; ...原创 2020-01-18 21:14:29 · 419 阅读 · 0 评论 -
position之sticky,让某些元素在滚动一定距离之后固定在某个位置
position:sticky作用:relative+fixed的结合,制造出吸附效果。再向上滚动页面的时候,有时我们想让某些元素在滚动一定距离之后固定在某个位置,这个时候就可以用这种定位方式。效果:滚动前:滚动后:代码:<!DOCTYPE html><html> <head> <meta charset="...原创 2020-01-18 18:38:10 · 2648 阅读 · 0 评论 -
position之fixed
position:fixed作用:固定在浏览器的某个位置运用这个定位方式,可以是元素固定到浏览器的某个位置效果:代码:<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style ty...原创 2020-01-18 18:18:11 · 289 阅读 · 0 评论 -
position之absolute
position:absolute作用:使元素脱离常规流特点: 脱离常规流 用百分比设置元素宽和高的时候要注意是按照谁的百分比设置的------最近定位祖先元素 如果没有最近定位祖先元素,会默认body是 z-index可以控制堆叠顺序 案例一(1,4)html <body> <div class="box">A...原创 2020-01-18 18:08:31 · 311 阅读 · 0 评论 -
div的height、width设置为百分比之后如何让里面的元素垂直水平居中
效果展示:方法很简单,将父盒子display:table,将里面的内容display:table-cell,还有就是要把body,html宽高也设置为100%,要不然盒子的高度会出现问题。<body> <div class="box"><span>box</span></div></body>*{...原创 2020-01-18 17:20:40 · 988 阅读 · 0 评论 -
position之relative
position:relative作用:是元素成为containing-block,可定位的祖先元素。意思就是绝对定位是的参照元素特点: 可以使用top|right|bottom|left|z-index进行相对定位,相对的是常规流中自己的位置。 相对定位元素不会离开常规流,意思就是其原来的位置还在,不会被其他后面的元素占有 任何元素都可以设置为relative,...原创 2020-01-18 13:00:07 · 6564 阅读 · 0 评论 -
position之static
position :static静态定位/常规定位/自然定位作用:使元素定位于常规流/自然流中特点: 忽视top、bottom、left、right、z-index,是这些关键字作用失效 如果两个元素都设置了外边距,最终的外边距取决于外边距大的 在具有固定width和height值时的元素,如果把左右边距设置成auto,则左右边距会自动扩大占满剩余宽度,实现这...原创 2020-01-18 11:59:02 · 16449 阅读 · 0 评论 -
清除浮动的五种方法
我们在使用float的时候可能会遇见这种问题那条黑线其实是红、黄、蓝这三个div的父级容器的边框,粉色为这个父级元素下面的一个div解决这个问题的五种方法:1、浮动元素后使用一个空元素 <div class="clear"></div>.clear{ clear:both;}2、给浮动元素的容器添加overfloat :hidden...原创 2020-01-17 16:37:42 · 222 阅读 · 0 评论 -
float之文字围绕图片
效果图:在这个案例中,只是给图片加了个float:left,文字就围绕图片了。这是因为,图片虽然脱离了文档流,但仍在文本流当中,所以图片不会覆盖掉文字。并且浮动的图片只会使其之后的元素产生影响所以对图片上一段的文字并不会产生影响(图片上面那一段文字围绕图片)。下面是代码:<!DOCTYPE html><html> <head> ...原创 2020-01-17 15:57:52 · 870 阅读 · 0 评论 -
盒子模型案例
效果图代码:<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> *{ margin: 0 auto; font-family...原创 2020-01-15 19:40:51 · 744 阅读 · 0 评论 -
vertical-align垂直居中
vertical-align:设置元素内容的垂直对齐,用于行内标签,可用于单元格td语法:vertical-align :baseline|sub|super|top|text-top|middle|bottom|text-bottom|长度|百分比效果展示:代码:<!DOCTYPE html><html> <head> &...原创 2020-01-14 23:18:32 · 280 阅读 · 0 评论 -
letter-spacing与word-spacing区别
效果:区别:代码:<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> p{ text-decoration: u...原创 2020-01-14 22:42:58 · 201 阅读 · 0 评论 -
表单
效果图代码<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> </head> <body> <h2 align="center">注册信息</h2> ...原创 2020-01-13 21:42:21 · 97 阅读 · 0 评论 -
寒假学习之课程表格案例
以下是效果展示下面是代码,运用了表格嵌套,colspan,rowspan,border,bgcolor,cellspan等属性。<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> </head>...原创 2020-01-13 17:33:15 · 152 阅读 · 0 评论