![](https://img-blog.csdnimg.cn/20200221090147552.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
=>Web前端开发
Web前端,多彩的世界
飞翔的哈士奇
帐号已弃更,转Github(DelinQu) — 2021.05
展开
-
如何搭建个人网站
博客简介本篇博客介绍的是如何用sae服务器免费搭建个人网站,没错就是免费,服务器和域名全都免费,不花一分钱。如果你想要免费搭建服务器建立网页或者还没有决定选用什么服务器那么此篇博客,或许对你有用。搭建个人网页步骤如下:注册新浪云账号创建云应用SAE上传网页文件通过域名访问那么长话短说,开始搭建:注册新浪云(1) 为什么选用新浪云?对于Web开发者,SAE带来的好处有:硬件成...原创 2020-02-16 11:48:46 · 3258 阅读 · 0 评论 -
弹性盒模型
博客简介CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。在一些APP开发,微信小程序开发中,为了适应用户屏幕的尺寸变化,一种有效的布局就是使用弹性盒。属性如下: 属性 描...原创 2020-02-13 11:51:42 · 374 阅读 · 0 评论 -
用GitHub Page搭建个人网站
博客简介原创 2020-02-03 17:12:22 · 2698 阅读 · 0 评论 -
网页设计案例 马拉松宣传网页设计
博客简介本篇博客介绍一个典型而有效的网页设计案例,这个案例用到了HTML,HTML5,CSS,CSS3,JavaScript。囊括了主页设计,联系方式页面设计, 旋转唱片音乐页面,图片库页面,幻灯片设计,表单页面等等,同时布局方法具有一定的指导意义,最后提供了源码下载。资源结构页面结构导航栏设计幻灯片网页内部导航图片库旋转唱片音乐页面增强表格联系方式页面压缩代码资源...原创 2020-02-02 23:02:59 · 3919 阅读 · 5 评论 -
唱片旋转播放效果
博客简介本篇博客介绍一种较为方便的唱片旋转播放效果,我们用audio插入音频,并且在设计一个插入照片的div,当点击播放时,唱片旋转,点击暂停唱片回到原始位置,停止旋转。要点如下用audio插入音频设置div插入照片,设置边框为圆形设置CSS动画设置监听,当点击播放时,设置div的class为animation2,点击暂停设置div的class为animation2用audio插...原创 2020-02-02 21:11:15 · 6002 阅读 · 4 评论 -
HTML5音频
博客简介本片博客介绍了HTML5中提供的audio音频,以及标签的属性音频格式以及浏览器的支持audio标签的属性audio标签的使用举例音频格式以及浏览器的支持Web 上的音频直到现在,仍然不存在一项旨在网页上播放音频的标准。今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准...原创 2020-01-30 19:39:19 · 488 阅读 · 0 评论 -
HTML5视频video
博客简介本篇博客将会介绍HTML5中视频< vedio >的用法:视频简介以及格式< video > 标签的属性基本用法举例< vedio >+DOM视频简介以及格式Web 上的视频直到现在,仍然不存在一项旨在网页上显示视频的标准。今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了...原创 2020-01-30 17:32:39 · 1948 阅读 · 0 评论 -
canvas优化
博客简介canvas元素是众多广泛使用的网络2D图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。然而,随着网站和应用将canvas画布推至极限,性能开始成为问题。这篇博客是一些优化的技巧,后序还会继续添加更多的技巧技巧列举:将画布的函数调用集合到一起(例如,画一条折线,而不要画多条分开的直线)避免不必要的画布状态改变渲染画布中的不同点,而非整个新状态尽可能避免 ...原创 2020-01-30 13:28:26 · 452 阅读 · 1 评论 -
canvas像素操作 取色器 写入像素数据 缩放和反锯齿 保存图片
博客简介HTML5中的canvas允许我们直接对像素进行操作,我们可以通过ImageData对象操纵像素数据,读取或将数据数组写入该对象中。这里还会介绍如何控制图像使其平滑(反锯齿)以及如何从Canvas画布中保存图像。imageData对象读取或写入imageDate对象缩放和反锯齿保存图片Image对象ImageData对象中存储着canvas对象真实的像素数据,包含以下只读...原创 2020-01-30 11:47:37 · 973 阅读 · 0 评论 -
canvas 动画——刚体碰撞小球
这篇博客中介绍了几个基础的动画,但是我们可以设置监听,通过鼠标控制实现更为高级的动画,在这里将绘制一个简单的桌面,桌面上再绘制一个刚体小球,我们可以给这个小球加上初速度,加速度,长尾效果…这是一个很经典的样例,在许多地方你都有可能见到它,并且应用到。首先创建一个对象var ball={ x:100, y:100, vx:5, vy:3, r:20, ...原创 2020-01-29 19:05:16 · 1002 阅读 · 1 评论 -
canvas动画 时钟动画 太阳系动画 动态蚂蚁线 全景照片
canvas给我们提供了绘图API,这些API基于JavaScript实现,那么我们可以方便的实现一些动画,在这里我们将展示几个经典的动画绘制技巧,包括:时钟,太阳系,动态虚线框,全景照片动画绘制的基本步骤我们知道动画是由关键帧拼接而成,在人眼的视觉暂留下连续起来从而具有动态的效果,在这篇博客中我们也介绍了一些方法,canvas动画的绘制也大同小异:清空canvas:新一动画帧绘制前,我们...原创 2020-01-29 11:48:06 · 949 阅读 · 0 评论 -
HTML5 canvas 合成与裁切
在之前的例子里面,我们总是将一个图形画在另一个之上,对于其他更多的情况,仅仅这样是远远不够的。比如,对合成的图形来说,绘制顺序会有限制。不过,我们可以利用 globalCompositeOperation 属性来改变这种状况。此外, clip属性允许我们隐藏不想看到的部分图形。globalCompositeOperation我们不仅可以在已有图形后面再画新图形,还可以用来遮盖指定区域,清除画布...原创 2020-01-28 18:08:55 · 426 阅读 · 0 评论 -
HTML5 canvas变换
简介:在上一篇博客中,我们介绍了canvas对图片的操作,在这一里我们将继续介绍canvas的变换方法,这些方法很类似于CSS,如果你对CSS比较了解,那么这些方法将十分轻松:旋转rotate,缩放scale,移动translate,矩阵变换transform,下面我们将介绍这些方法:1.状态的保存和恢复save() 和restore()状态绘制复杂图形时涉及到状态的保存和恢复,在canv...原创 2020-01-28 15:33:03 · 493 阅读 · 0 评论 -
HTML5 canvas操作图片
1.canvas操作图像的能力canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。和往常一样,canvas操作图像需要两步基本操作:获取图片源:获得一个指向HTMLImageEl...原创 2020-01-28 11:36:29 · 1110 阅读 · 0 评论 -
HTML5 canvas绘制文本
HTML5的canvas也提供渲染文本的方法.1.绘制文本方法:fillText和strokeTextfillText(text,x,y[,maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.strokeText(text,x,y,[,maxWidth]) 在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的fillText样例function ...原创 2020-01-27 21:31:10 · 1051 阅读 · 0 评论 -
HTML5 canvas样式和颜色
色彩ColorsfillStylestrokeStyle透明度TransparencyglobalAlphargba()线型Line styleslineWidth属性lineCap属性lineJoin属性虚线setLineDash和lineDashOffset渐变GradientscreateLinearGradientcreateRadialGradient图案样式...原创 2020-01-27 17:29:49 · 5750 阅读 · 0 评论 -
HTML5 canvas绘制图形
HTML5添加了许多新的标记元素如:< section >,< article >,< header >,< footer >也提供了很多交互以及媒体元素,类如< canvas >,< audio >,< vedio >等等。表单元素得到了加强,新增了颜色拾取器,数据选择器,滑动条和进度条,除此之外许多新的元素还带...原创 2020-01-26 20:03:46 · 947 阅读 · 0 评论 -
JavaScript实现动画效果
动画基础(1)位置(2)时间(3)设置时间增量(4)抽象用动画增强网页效果(1)设置动画(2)变量作用域(3)改进(4)生成HTML标记添加安全检查原创 2020-01-25 15:37:58 · 7371 阅读 · 1 评论 -
className属性以及函数抽象
在之前的文章中,我们使用DOM方法进行了添加,修改,样式设置,更新属性…,但是我们不得不思考一个问题:JavaScript作为处理行为层的语言实现交互,然而我们却用来处理表示层的信息,那么JavaScript岂不是和CSS性质无异?我们想要更换某些元素的样式,就只能去设置函数更改与样式设置有关的语句。这不是最好的方法,也不是JavaScript的意义所在,**更高明的方法是:与其使用DOM直接改变...原创 2020-01-23 14:12:22 · 894 阅读 · 0 评论 -
何时选用CSS何时选用DOM?
用DOM方法设置样式十分灵活,可以动态创建标记,设置内嵌.style样式(驼峰命名)或者说直接改变一个class属性。而CSS样式丰富多彩,引入许多选择器first-child, last-child,nth-child(),nth-of-child()等等,也有伪类选择器属性 描述a:link a:visited a:hover a:active等等。那么什么时候用CSS设置样式,什么时候用DO...原创 2020-01-23 13:04:27 · 667 阅读 · 0 评论 -
充实文档——略缩语列表 文献来源链接 快捷键清单
这篇博客主要是对DOM方法的练习,同时也考虑网页的兼容性可访问性。我们将设计几个实用的小功能来进行练习。下面看这样一段HTML标记:<!DOCTYPE html><html><head> <title>Explaining the Document Object Model!</title></head><...原创 2020-01-22 15:12:12 · 3269 阅读 · 0 评论 -
Ajax简介
Ajax用于概括异步加载页面内容的技术,主要优势是对页面的请求以异步的方式发送到服务器,而服务器不会用整个页面来相应请求,他会在后台处理请求,与此同时用户还能继续浏览页面并与页面进行交互。脚本则可以用来按需求加载和创建页面内容,而不会打断用户的浏览体验。利用Ajax技术,Web应用可以呈现出功能丰富,交互敏捷,类似于桌面应用般的体验。Ajax依赖于JavaScript,所以存在一些浏览器不支持它,...原创 2020-01-21 15:41:57 · 1916 阅读 · 0 评论 -
动态创建标记+图片库最终版
HTML标记负责创建网页结构,而JavaScript则用来改变细节,同时JS也能通过动态创建新元素,修改旧元素来改变网页结构.传统方法在将文本节点插入到文档中时,在过去经常用到document.write和innerHTML两种方法:(1)document.write方法<!DOCTYPE html><html><head> <meta c...原创 2020-01-20 21:43:03 · 2124 阅读 · 0 评论 -
图片库改进版
在上一篇博客中已经设计了一个简易的图片库,可以实现把整个图片库的浏览链接集中放在图片库主页里,只在用户点击了这个主页的链接时才把相应的链接发送给他,在点击链接后将网页中的图片替换,而不是网页跳转,点击链接伴随着图片下方文字的替换:HTML:<!DOCTYPE html><html><head> <meta charset="utf-8">...原创 2020-01-19 21:01:30 · 752 阅读 · 0 评论 -
分离JavaScript
我们的JavaScript和HTML文档都已经分离在两个文件中了,为什么还要提到分离JavaScript呢?实际上在内嵌的事物处理函数中,JavaScript和HTML是紧密相连的。比如说也这样一个函数:function popUp(){ window.open()}...原创 2020-01-18 20:37:59 · 756 阅读 · 0 评论 -
Web学习路线中常用的工具网站
在学习Web前端的过程中,会遇到一些好用的工具,网站,这些有用的工具网站很有必要汇总到一起。在一个有些规模的汇总之前,必然会有一些荒芜,这样短小的博客显然是对自己,对CSDN,对读者的不符责任,但是我相信经历一些阶段后,这个汇总将会变得庞大,变得有实用价值。代码压缩工具Douglas CrockFord的JSMin:http://www.crockford.com/javascrip/jsm...原创 2020-01-24 23:56:38 · 279 阅读 · 0 评论 -
经典案例——图片库
案例介绍:将图片发布有很多方法,可以将所有图片直接同意放在网页里,但是这样加载网页就会十分缓慢。我们也可以为每一张图片设计一个像网页,就不存在加载缓慢的问题,但是这对于设计人员来说是繁琐的,这个时候我们可以考虑创建一个图片库:把整个图片库的浏览链接集中放在图片库主页里,只在用户点击了这个主页的链接时才把相应的链接发送给他:设计要求:1.设置HTML和CSS样式2.将图片展示在网页中3...原创 2020-01-18 14:21:43 · 1124 阅读 · 0 评论 -
HTML+CSS+JS实现简单的魔方
3天把JS过了一遍,因为网课太水就没能继续看下去,我知道这远远不够,计划研究JavaScript编程艺术,在此之前,先来一个小设计熟悉JS编程习惯:案例介绍:设计一个不停旋转的4阶魔方,魔方每一个面的方格能够依次飞出原位置,稳定在一个大的范围,紧接着旋转 恢复原位。魔方之下有一个圆形的发光区域。HTML部分:HTML部分主要是结构,包括了三个部分,魔方之下的圆形区域主容器contain...原创 2020-01-17 11:08:36 · 11986 阅读 · 11 评论 -
BOM浏览器对象模型简介
浏览器对象模型:Browser Object Model专门操作操作浏览器窗口的API——没有统一标准,但存在兼容性问题。浏览器对象模型中常用的方法: 方法 作用 window 代表整个窗口 history 封装当前窗口打开后成功访问过的url记录 navigator 封装浏览器配置信息 document 封装当前正在加载的网页内容 locati...原创 2020-01-15 19:48:30 · 624 阅读 · 0 评论 -
DOM添加
在DOM中,添加元素有三步:创建空元素设置关键属性将元素添加到DOM树中1.创建空元素var elem=document.createElement(“元素名”)var tr=document.createElement(“tr”)var td=document.createElement(“td”)2.设置关键属性在创建好空元素之后要给空元素设置样式(1)设置关键属性 元素...原创 2020-01-15 19:12:13 · 827 阅读 · 2 评论 -
DOM属性的设置
对于DOM标准来说,核心DOM可操作一切结构化文档的API包括HTML和XML,它的范围更广。而对于HTML DOM,它是专门操作HTML文档的简化版DOM,仅对于常用的复杂的API进行了简化,范围限于HTML。而在开发过程中,我们要根据实际情况合理地分配和选择,尽量用最小的开销达到最大的效果,以快速实现效果为原则.下面介绍4个核心DOM的操作1读取属性值(1)先获取节点对象,再通过对象获...原创 2020-01-15 15:59:28 · 624 阅读 · 0 评论 -
随机产生验证码
随机产生验证码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>随机产生验证码</title> <style type="text/css"> #code{ width: 145px; height: 50px; b...原创 2020-01-15 12:14:08 · 392 阅读 · 0 评论 -
DOM查找
什么是 DOM?DOM 是一项 W3C (World Wide Web Consortium) 标准。DOM 定义了访问文档的标准:“W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问、更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分:Core DOM - 所有文档类型的标准模型XML DOM - XML 文档的标准模型HTM...原创 2020-01-15 11:20:34 · 738 阅读 · 0 评论 -
JavaScript数组API
API的全称为Application Programming Interface,中文叫应用程序编程接口,是指一些预先定义的函数。目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。api在不同的系统下:1.Windows API操作系统的用户接口API函数包含在Windows系统目录下的动态连接库文件中。Windows AP...原创 2020-01-14 21:30:59 · 406 阅读 · 0 评论 -
JavaScript中的数组
在JavaScript中,数组就是内存中连续储存的多个书数据的数据结构。普通变量只能存储一个数据,而数据结构是数据在内存中的存储方式,好的数据结构可以极大地提高我们算法的效率,数组就是一个典型的代表。数组分为索引数组和关联数组。索引数组:连续的存储空间与C++中数组不同的是JavaScript中的数组:(1)不限制数组的个数,长度可变,无需设置长度(2)不限制下标越界(3)不限制元素...原创 2020-01-14 19:34:28 · 558 阅读 · 0 评论 -
JavaScript中的数据类型
在JavaScript中数据基本类型有2大类,原始类型和引用类型(对象类型),原始类型又分为number,string,boolean,null,undefined类型,而原始类型(对象)分为Function,Arry,Data等等。这里来介绍数据类型以及数据类型的转换。1. 数据类型:原始类型: 按值访问,可以操作保存在变量中实际的值,分为number,string,boolean,null...原创 2020-01-14 12:53:43 · 446 阅读 · 1 评论 -
JavaScript变量var
1.在介绍变量之前,先介绍内存:保存程序在运行过程中所需要的用到的数据。 8bit(比特是表示信息的最小单位) 1byte(字节) 1024byte 1kb 1024kb 1M 1024M 1G 1024G 1T 2.变量:就是内存中的一段空间名,内存空间的别名,可以自定义值,保存在内存空间的数据(1...原创 2020-01-13 21:05:23 · 375 阅读 · 0 评论 -
了解JavaScript
今天,我学完HTML和CSS,写了一个小网页就立马进入JavaScript的学习,那么,什么是JavaScript?他和C/C++有什么区别?运行环境是什么?能够实现什么功能?这里我们对JavaScript做一个初步的了解以便往后的学习.什么是JavaScript?JavaScript是一种运行于JavaScript解释器/引擎中的解释型脚本语言解释型和编译型的区别?(1)之前我接触的是...原创 2020-01-13 19:53:34 · 504 阅读 · 0 评论 -
HTML+CSS制作的纯静态网页
刚学完HTML+CSS,一定要按照自己的想法去制作网页,虽然没有交互,但是可以对前面的知识有一个很大的重用,你的知识框架会更加完美。css基础html是勾勒,css是染色,基础的css学完你会有种想写页面的冲动,这时候你不用抑制住那种感觉,直接按照自己所想开写,这是你的第一个项目,从期末就一直想学Web前端设计,现在刚放假4天,自己也是真真正正的看了4天慕课,大体过了一遍HTML,CSS,我想我是...原创 2020-01-13 15:41:10 · 22069 阅读 · 8 评论 -
CSS3——3D变换
CSS3中的3D变换主要是实现一些3维的旋转,相对于2D旋转,3D旋转多了一个z轴方向的变化,同时为了达到一种视觉效果,3D变换又不是简单的旋转,他还可以设置人眼到平面的距离,透视等等,从而让图像立起来。在用transform属性变换时我们要告诉编译器进行的是3D变换而不是2D,所以要加上一行transform-style:preserve-3d;1.transform属性——旋转一个元素可...原创 2020-01-12 12:28:34 · 1335 阅读 · 1 评论