html5
Web企鹅
这个作者很懒,什么都没留下…
展开
-
CSS3 动画实践:用 @keyframes 实现热点图
例子原创 2020-09-11 12:22:11 · 229 阅读 · 0 评论 -
响应式开发
响应式开发原理使用 媒体查询 针对不同宽度的设备进行布局和样式的设置,从而适配不同的设备。响应式布局容器响应式需要一个父级作为布局容器(一般类名为 container),来配合子元素来实现变化效果。原理:在不同屏幕下,使用 媒体查询 来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下看到不同页面布局和样式变化的效果。设备划分设备划分尺寸区间常用的尺寸划分(设置宽度)超小屏幕(手机)< 768px100%小屏设备(平板)768px原创 2020-09-02 18:36:36 · 284 阅读 · 0 评论 -
html5 css3 新增总结
html5新增的语义化标签标签名称<header>头部标签<nav>导航标签<article>内部标签<section>定义文档某个区域<aside>侧边栏标签<footer>尾部标签新增的多媒体标签新增视频标签<video src = "文件地址"></video>常见属性:属性值描述mutedmuted静原创 2020-08-17 12:27:03 · 258 阅读 · 0 评论 -
电商首页的轮播图
实现功能1、自动轮播2、鼠标划入左右按钮出现,划出消失3、左右按钮点击转换4、下方小圆点实现切换效果html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2020-08-11 22:57:20 · 1394 阅读 · 1 评论 -
一个简单易懂的拖拽实例
鼠标拖动方块,并限制出界:实现效果:html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link r原创 2020-08-07 18:38:49 · 340 阅读 · 0 评论 -
跟随鼠标 光点 练习
是一个简单的小练习,最后实现的效果如下:就是蓝色的点,跟着鼠标走,后面的也清除。思路最后的点先移到倒数第二的位置,倒数第二移到倒数第三的位置,以此类推…最后让第一个点,到达鼠标的位置;ps: 不要想着先挪第一个再挪第二个,那你第二个很可怜,都找不到第一个之前的位置…html 文件就是简单的设置了 20 个 div 标签:<!DOCTYPE html><html lang="en"><head> <meta charset="UT原创 2020-08-07 12:23:59 · 413 阅读 · 0 评论 -
js, css, html 实践:跟随鼠标移动提示框
html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鼠标移动提示框</title> <link rel="stylesheet" href=".原创 2020-08-05 22:30:47 · 1228 阅读 · 0 评论 -
用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"> <title>选项卡</title>原创 2020-08-03 17:39:30 · 921 阅读 · 2 评论 -
备忘录进阶版: html, css, js
利用 jQuery 做一个备忘录,有记录,选中删除,选中拷贝等功能:html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节点操作练习</title>原创 2020-08-01 21:14:23 · 860 阅读 · 0 评论 -
js 笔记_09 节点操作知识 及 备忘录实战
获取子节点childNodes:访问当前节点下所有的子节点;firstChild:访问子节点中的首位;lastChild:访问子节点中的最后一位;nextSibling:访问当前节点的下一个兄弟节点;previousSibling:访问当前节点的上一个兄弟节点;但是上述的方法会将空格,回车等作为文本节点记入。(虽然空格回车等确实就是字符,但我们获取的时候并不想带它们,所以需要一个将纯空白的文本节点剔除的方法)下面的方法只获取子节点中的元素节点。[ IE8 以下不兼容 ]和前面的功能对应:原创 2020-08-01 00:11:40 · 200 阅读 · 0 评论 -
js 笔记_08 BOM 及 DOM 相关
BOM系统对话框alert():弹出对话框;confirm():弹出一个带确定和取消的提示框;返回值:如果点击确定,返回 true;如果点击取消,返回 false;prompt():弹出一个带输入框的提示框;第一个参数:面板上显示的内容;第二个参数:输入框里面的默认内容;(可以不写)返回值:如果点击确定,返回输入框中的内容;如果点击取消,返回 null;history 对象作用:当前窗口历史记录,只要加载的 url 不一样就会产生历史记录;注意不是浏览器的,而是当前窗口的历史记原创 2020-07-31 15:19:54 · 139 阅读 · 0 评论 -
用 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"> <title>秒表</title> <link rel="stylesheet"原创 2020-07-30 11:19:49 · 1315 阅读 · 0 评论 -
js 笔记_06 实例练习以及与 html, css 实现敏感词替换
在数组的后面新增该数组的倒序,以新数组输出思路:1、用一个新数组拷贝原数组;2、将原数组倒序;3、用 push 放入新数组。function array(arr){ let arr2 = arr.concat(); arr.reverse(); for(let i = 0; i < arr.length; i++) { arr2.push(arr[i]); } return arr2;}console.log(array(原创 2020-07-29 16:53:54 · 472 阅读 · 0 评论 -
js 笔记_05 字符串
字符串在 js 中字符串既是基本数据类型,又是复合数据类型。声明方式1、通过 new 运算符去声明字符串:(下面的 100 被声明成一个字符串)let str1 = new String(100);2、省略 new 声明字符串:(下面的 100 被声明成一个字符串)let str2 = String(100);3、字符串常量赋值:let str3 = "100";let str4 = '200';相关方法以下将自命名的字符串名字用 str 代替来方便举例:str. length原创 2020-07-28 19:26:21 · 168 阅读 · 0 评论 -
js 笔记_04 ECMA5新增数组的方法
严格模式写在哪个作用域下,对哪个作用域生效。"use strict";在严格模式下:全局变量声明时,必须加 let;函数内不可写重名属性;arguments 对象不允许被动态改变;新增保留字:implements, interface, package, private, protected, public, static, yield ;严格模式的目的:消除语法中的一些不合理,不严谨;消除代码中的一些不安全;提高编译器效率;ECMA5新增数组的方法以下将自命名的数组名字用原创 2020-07-27 19:45:27 · 136 阅读 · 0 评论 -
用 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"> <title>登陆界面</t原创 2020-07-26 22:40:20 · 1899 阅读 · 0 评论 -
小白必备:html、css、js 融会贯通(超简单)
不会分文件的小朋友点击这里了解一下在原创 2020-07-23 18:23:05 · 480 阅读 · 0 评论 -
js 笔记_01 js 相关基础
注释注释://多行注释:/****/变量定义松散类型 ,弱引用类型之前用 var,现在全用 let注意:这样定义是局部变量,也就是在函数中定义的话,只可以在这个函数中使用,在此之后,这个变量会被销毁。要想在函数中定义全局变量,只需省略 var 或 let 。(不推荐,容易出错,还不如不在函数里用 var 或 let 定义一个作用于为整体的变量)数值范围超出 js 数值范围的值:正数会被转化成 Infinity,负数会被转化成 -Infinity;如果某次计算返回了正或负原创 2020-07-21 21:10:44 · 125 阅读 · 0 评论 -
学习CSS浮动知识 & 做个简单对话框
浮动以三个div为例,如果直接运行,会从上至下排列。效果如下:那么如何让图片乖乖的从左到右排列呢?我们利用float,即浮动布局。div{ float:left; /*左浮动*/}效果如下:若要让三者中间有间隔呢?可利用margindiv{ float:left; /*左浮动*/ margin: 10px;}效果如下:下面制作出一个简单的聊天对话框,利用列表:html 文件:<!DOCTYPE html><html lang="e原创 2020-07-20 17:34:13 · 554 阅读 · 0 评论 -
CSS 知识快速养成
CSS 入门第一步:学会分文件建立文件夹在编辑器里新建一个文件夹,在文件夹中,新建三个文件夹:cssressrc在 css 文件夹中新建 css 文件在 src 文件夹中新建 htnl 文件两者的联系需要在 html 文件的 head 标签中使用 link<link rel="stylesheet" href="./css/style.css"><!-- href 中写 css 所在的地址 -->例如:注意文件夹建立之后注意文件之间的连接;在 c原创 2020-07-20 17:32:15 · 185 阅读 · 0 评论 -
CSS 容器和选择器的简单应用
CSS 介绍层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML(标准通用标记语言的一个应用)或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。以上来自百度百科通俗的说,CSS 就是用来修饰网页样式的语法。容器基本了解容器标签不具备任何原创 2020-07-19 12:49:48 · 366 阅读 · 0 评论 -
html5简单表格制作
形成表格table 标签table 标签包含要定义的表格的全部内容组成:thead tbody tfoot,具体如下:(如果不写这三个直接写内容,浏览器会自动将所写的东西归入到 tbody 中)在这里插入代码片原创 2020-07-18 21:31:12 · 3118 阅读 · 1 评论 -
Web前端基础标签第二讲
Web前端基础标签第二讲列表图片列表无序列表有序列表图片如果电脑中有图片,就在src里调用文件所在的路径位置,这种路径叫做绝对路径;若图片需要下载,建议保存在html文件所在的同级文件夹,调用的时候更为方便,这种路径称为相对路径;/ 表示调用下级目录./ 表示调用同级目录…/ 表示调用上级目录…/…/ 表示调用上上级目录width可调节宽度,同时高度也会同比例改变;若想同时定义宽度和高度,会使图片变形<img src="./images/wenji原创 2020-07-18 00:14:17 · 459 阅读 · 0 评论 -
Web小白初入门
web小白初入门前端开发相关名词解释HTMLHTML5(简称H5)W3C全栈CSSJavaScript浏览器前期工作编程工具建立前端开发相关名词解释HTML介绍:HTML 英文全称为 Hyper Text Markup Language,即超文本标记语言。HTML 是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。作用:HTML 之所以称为超文本标记语言,是因为文本中包含了所谓的“超级链接”点。所谓超级链接,就是一种 URL 指针,通过点击它可使浏览器方便地获取新的网页。网页的本原创 2020-07-17 18:10:23 · 869 阅读 · 0 评论