前端
芬贝
爱学习的程序员小芬芬
展开
-
HTML5 draggable 拖拽实例
拖拽杨幂小姐姐到指定区域吧!!!原创 2020-04-18 07:56:20 · 724 阅读 · 0 评论 -
【 JavaScript 】异步加载 时间线一览
异步加载jsjavascript 异步加载的三种方案defer 异步加载,但要等到dom文档全部解析完才会被执行。能把js写在script 标签里。只有IE能用。async 异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script 标签里。除了IE都能用。以上两种方式执行时不阻塞页面<script type="text/javascript" src="t...原创 2020-04-16 18:59:24 · 198 阅读 · 0 评论 -
[ JavaScript Date对象 ] 如何做一个日历?
Date对象 日历实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...原创 2020-04-14 22:32:05 · 313 阅读 · 0 评论 -
JavaScript事件之鼠标、键盘、文本操作事件
图文并茂,内含深度理解实例,知识点总结全是干货!原创 2020-04-13 21:38:43 · 415 阅读 · 0 评论 -
[ js事件实例 ]定制专属于你的可拖动颜色渐变小球吧!
知识点总结详细,封装函数主要解决浏览器的兼容性问题(希望看到这篇博客的你收获多多)原创 2020-04-12 22:40:52 · 195 阅读 · 0 评论 -
[ JavaScript ] 敲完这几行代码,DOM基本操作也就学会了!
带着例子学Dom 几行代码就搞定!原创 2020-04-10 23:56:14 · 352 阅读 · 0 评论 -
[ Demo ] 巧用img-date 涂色卡实例
轻松愉快的涂色卡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...原创 2020-04-08 15:09:20 · 283 阅读 · 1 评论 -
[ Demo ] HTML/CSS/JS 炫酷魔方
先来展示一下效果吧~HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...原创 2020-04-06 22:23:20 · 1451 阅读 · 4 评论 -
[ CSS-CSS3 ] 更适合你的CSS样式一览表
CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和positionCSS3CSS3(I) 圆角边框与阴影CSS3(II) 文本与文字CSS3(III) 2D转换...原创 2020-04-05 16:33:27 · 3856 阅读 · 4 评论 -
html/css 个人网站实例(一)
显示效果HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...原创 2020-04-04 22:26:11 · 2540 阅读 · 1 评论 -
网页命名规范+注意事项
(一)网页内容类标题: title摘要: summary箭头: arrow商标: label网站标志: logo转角/圆角: corner横幅广告: banner子菜单: subMenu搜索: search搜索框: searchBox登录: login登录条:loginbar工具条: toolbar下拉: drop标签页: tab当前的: current列表: l...原创 2020-04-04 21:56:51 · 629 阅读 · 1 评论 -
图文详解 video和audio元素的属性、事件及使用
集合类型定义集合操作符集合处理方法集合类型应用场景原创 2020-04-04 15:07:10 · 4101 阅读 · 1 评论 -
图文详解 表单的验证方式
HTML5的input元素验证方式包括:自动验证方式1.min属性和max属性2.step属性调用checkValidity()方法实现验证自定义提示信息设置不验证自动验证方式HTML5表单自动验证主要是通过表单元素的属性设置来实现的。在图文详解 新的input类型和属性一文中介绍的input元素公用属性required以及pattern,就是分别用来验证输入框是否为空以及输入信息是否符合设定...原创 2020-03-29 19:07:22 · 1858 阅读 · 0 评论 -
html/css 简单的表单实例
如何实现如下图片的内容?下面我们一起制作该表单页面如下图是布置的作业如下图是完成的作业实例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...原创 2020-03-27 21:19:04 · 2368 阅读 · 1 评论 -
用VScode写前端,这几个快捷键提升了我的效率
多行注释快捷添加段落内容快捷标签[属性赋值]快捷标签嵌套删除当前行:shift + ctrl + k选中文字:shift + left / right / up / down 完成学习任务,喜欢记得点赞...原创 2020-03-23 17:51:17 · 963 阅读 · 1 评论 -
图文详解 新的input类型和属性
自定义标题email类型日期时间类型range类型search类型number类型url类型新的input公用属性1.autofocus属性2.pattern属性3.placeholder属性4.required属性email类型在HTML5中将一个input元素的类型设置为email时,表明该输入框用于输入电子邮件地址。当页面加载时,该input元素对应文本框与其他类型文本框显示效果相同,但...原创 2020-03-22 15:11:31 · 1752 阅读 · 0 评论 -
应用@import简化页面多文件引入
html代码中引入了太多的css文件,使得代码不够简洁,为了简化页面,可以应用@IMPORT简化页面来解决多文件引入哦。示例如下:建立三个css文件使h1,h2,h3标签分别变色为蓝色,绿色,红色,用来假设多文件哦(现实中当然一个css文件就可以搞定了)方法步骤1.用一个新建的css文件(如图为aoxiaobao.css)代替注释部分的多个css文件。2.将注释部分的css文件应用@im...原创 2020-01-15 16:51:05 · 580 阅读 · 0 评论 -
html标签中 lang="en-US"和lang="zh-CN"的区别,你知道吗?
我们在初学html时,可能会发现编辑器默认生成的格式是<html lang="en"></html>,其实这也是有原因的,lang是language的缩写,代表该网页属于哪一个国家或是地区的网页。下面列举几个常用lang:en-US 英国(美国)zh-CN 中文(简体,中国大陆)zh-SG 中文(简体,新加坡)zh-HK 中文(繁体,香港)zh-MO ...原创 2020-01-09 10:16:25 · 33865 阅读 · 4 评论 -
HTML5/CSS3 炫酷键盘 不规则布局 内含知识点总结
炫酷键盘图片效果展示看到这里是不是很想学呢?在这里我要说一定会让你有所收获的那么我先结合代码总结一下我在学习写这篇代码生成炫酷键盘时的收获,其次在最后面将代码 give you 参考,ok,Let’s go!结合代码知识点总结SEO_网站优化 三要素 <meta name="keywords=" content=""><!--1 SEO 百度搜索关键字--> ...原创 2019-08-10 12:13:19 · 665 阅读 · 0 评论 -
七夕情人节最强表白特效,为你的她/他准备一个吧
效果展示区CSS代码部分<style> body{ margin:0;/*外边距*/ background-image:url("3.jpg");/*背景图片*/ background-size:cover;/*等比例覆盖*/ } .snowfall-flak...原创 2019-08-07 08:46:55 · 931 阅读 · 0 评论 -
CSS3水滴动画
效果如下美滋滋,是不是很想get到呢??? let‘go!CSS代码部分<style> body{ margin: 0;/*外边距*/ background-color:#3498db; /*padding: 0;/*内边距*/ /*background-image:...原创 2019-08-05 17:58:00 · 1311 阅读 · 0 评论 -
轩辕剑官网手风琴特效走一波
轩辕剑官网手风琴特效带尺寸的图片:原创 2019-08-04 19:46:24 · 341 阅读 · 0 评论 -
HTML/CSS/JS表白特效 一学就会
HTML/CSS/JS表白特效 一学就会效果小姐姐爱了爱了,看到效果后是不是很想学呐~~let‘s go~~代码如下CSS部分<style> body{ margin:0%;/*外边距 解决各浏览器兼容性问题*/ padding:0%;/*内边距 解决各浏览器兼容性问题*/ ...原创 2019-07-31 12:36:01 · 9162 阅读 · 0 评论