08 2016 档案
摘要：CSS3实现二十多种基本图形 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。 这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角
阅读全文
摘要：前端之HTML知识点整理 一、html概述 htyper text markup language 即超文本标记语言 超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 标记语言: 标记（标签）构成的语言. 网页==HTML文档，由浏览器解析，用来展示的 静态网页：静态的资源，如
阅读全文
摘要：这是一款使用纯CSS3制作的超酷文章卡片UI设计效果。该文章卡片带有阴影效果，当鼠标滑过卡片时，文章的描述信息会以滑动动画的方式显示在卡片中。 在线预览 源码下载 使用方法 一张卡片的HTML结构如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="tile">
阅读全文
摘要：我们经常使用地图查位置、看公交、看街景，同时地图还开放第三方的API给开发者。利用这些API进行地图的个性化的展示和控制，例如北京被水淹了，开发一个网页显示北京被淹的地图，地图上面标志被水淹的位置、严重程度，或者我是交警，想要在地图上标志发生车祸、被交通管制的路段，甚至是利用地图的街景，控制街景的位
阅读全文
摘要：ES6笔记（一）：ES6所改良的javascript“缺陷” 块级作用域 ES5没有块级作用域，只有全局作用域和函数作用域，由于这一点，变量的作用域甚广，所以一进入函数就要马上将它创建出来。这就造成了所谓的变量提升。 ES5的“变量提升”这一特性往往一不小心就会造成一下错误： 内层变量覆盖外层变量
阅读全文
摘要：前面的话 尽管DOM作为API已经非常完善了，但是为了实现更多的功能，DOM仍然进行了扩展，其中一个重要的扩展就是对选择器API的扩展。人们对jQuery的称赞，很多是由于jQuery方便的元素选择器。除了前面已经介绍过的getElementsByClassName()方法外，DOM拓展了query
阅读全文
摘要：改变你代码习惯的ES6 最近读阮一峰老师的ES6标准入门，让我感觉到了ES6的强大之处，读书之余整理了一些笔记，因为边读边记录的，所以可能会比较杂乱。 ECMAScript和Javascript的关系 1996年11月，Javascript的创造者--Netscape公司，决定将Javascript
阅读全文
摘要：说说你对闭包的理解 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。 闭包有三个特性： 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收 请你谈谈Cookie的
阅读全文
摘要：js引出函数概念的案例 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script> 7 /*输入两个数，再输入一个运算符，得到结果*/ 8 var num1 = window.pr
阅读全文
摘要：【前端安全】JavaScript防http劫持与XSS 作为前端，一直以来都知道HTTP劫持与XSS跨站脚本（Cross-site scripting）、CSRF跨站请求伪造（Cross-site request forgery）。但是一直都没有深入研究过，前些日子同事的分享会偶然提及，我也对这一块
阅读全文
摘要：前面的话 有一天心血来潮，1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮。果不其然，ip当时就被禁用了。后来，重启自己的路由器，重新获取ip才可以访问博客园主页。那么，设置一个限定时间内(比如1秒)防止按钮被重复点击的方法会不会更好一点呢？ 思路一 最直接的思路可能就是点击按钮后，按钮的事
阅读全文
摘要：canvas游戏小试：画一个按方向键移动的圆点 自己对canvas，但又有一颗做游戏的心TT。然后记录一下对canvas的学习吧，用一个按方向键控制的小圆点来做练习。（编程时用了一些es6的语法） 示例的html很简单，只有一个canvas元素: <html> <head> <link rel="s
阅读全文
摘要：这本书中就像它前言中说的那样，这本书不是给初学者的。需要一定的基础，而且有一定的编码实践，才能很好的理解书里讲到的内容。学习一门编程语言，需要熟悉它的语法、形式和结构，这样才会编写合法的、符合语义的、具有意义和行为正确的程序。此书的目的是加深理解如何有效地使用js构建更可预测的、可靠和可维护的js应
阅读全文
摘要：相信很多前端开发碰到这样一个问题，我开发的网站大量用HTML5、CSS3，但是用360浏览器打开的时候，居然默认使用兼容模式，所有的新技能效果全没了，天了噜 于是去网上找办法解决，但是找到的据说360官方提供的方法：加meta标签，加上去居然没有效果，360你这是什么鬼！ 下面这绝对是干货，没有任何
阅读全文
摘要：H5图片裁剪升级版 前段时间做了个跟裁剪相关的活动《用H5中的Canvas等技术制作海报》，这次公司要做个与奥运相关的活动，扫车牌赢奖。 于是我就在上一个活动的基础上，将代码重新封装一下，并且将计算方式写的更通用。下图是活动中裁剪的页面： 先来看看两个活动的不同： 1、原先的活动每次旋转只能90°，
阅读全文
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>面向对象贪吃蛇</title> <style> html, body { margin: 0; padding: 0; background: rgb(162, 1
阅读全文
摘要：js代码： 游戏的对象 ，食物，蛇 ，游戏控制思路如下 （完整代码在https://github.com/774044859yf/ObjectSnakeGame下载） var snake = {
阅读全文
摘要：CSS代码： body { counter-reset: icecream; } input:checked { counter-increment: icecream; } .total::after { content: counter(icecream); } HTML代码： 下面中国十大冰淇淋你吃过几个？ 哈根达斯 和路雪wall's 八喜冰淇淋...
阅读全文
摘要：手把手教你玩转 CSS3 3D 技术 要玩转css3的3d，就必须了解几个词汇，便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。旋转则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z
阅读全文
摘要：关于HTML面试题汇总之H5 一、H5有哪些新特性，移除了哪些元素？如何处理h5新标签的浏览器兼容性问题，如何区分html和html5 1. html5不在是SGL（通用标记语言）的一个子集，而包含了：图像、位置、存储、多任务等功能 2. 新增的图像为canvas类，媒体回放video和audio元
阅读全文
摘要：CSS实现元素水平垂直居中—喜欢对称美，这病没得治 [TOC]在CSS中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用text-align:center;如果它是一个块级元素，就对它自身应用margin:auto。然而要对一个元素进行垂直居中，就有点束手无策了，本文介绍了几
阅读全文
摘要：可以看到，蓝色的边框破坏了页面的整体美感，很多时候我们都是不需要的。通过设置相应的css可以去除点击过后的蓝色边框。 效果如图，点击过后厌人的蓝色的边框不见了，页面也美美的了！
阅读全文
摘要：随笔之——各大热门网站search 搜索框的写法，浅析！ 关于搜索框，写法有很多种，搜索框这一块是一个比较细的活，要先计算好他的高、宽； 下面我就以京东搜索框为例，给大家浅析一下。 上面就是最终search框效果图。 先送出代码>>>>>> 1 <span style="color: #ff00ff
阅读全文
摘要：颜色和单位的使用 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色 px:像素,与分辨率设置相关. %相对于浏览器的百分之多少,可以对宽度width做设置,不可以对height做
阅读全文
摘要：30个最常用css选择器解析 你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。 1. * * { margin: 0; pad
阅读全文
摘要：1.认真看设计图，然后思考设计图的结构，哪些部分是头部，哪些部分是侧边栏，哪些部分是底部，看清楚了再来开始前端页面重构的，看到一些问题要及时提出。（我曾经试过把一个项目改了三次，老总才说ok。） 2.合理切图，该切图的地方就切图，不要一整块的切图。（不要使用PS切图生成图像与html的方法。） 3.
阅读全文
浙公网安备 33010602011771号