web前端
关注
分享
扫一扫
文章平均质量分 82
旗smile
这个作者很懒，什么都没留下…
展开
-
浮动的优缺点，如何清除浮动？
什么是浮动？元素浮动以后可以想做或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。浮动的好处：在图片周围包含文字 创建网页布局 浮动的缺点：无法撑起父元素。同级别的兄弟元素会围绕在周围。清除浮动这是一个浮动的demo：<!doctype html><html><head><me原创 2016-08-05 10:46:23 · 3062 阅读 · 0 评论 -
CSS 面包屑导航栏
先看一下效果图 1.首先写好HTML代码<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Info</a></li> <li><a href="#">Contact</a></li></ul>这里只是写一个例子，为了方便就不添加id和class,直接为原创 2016-10-25 10:13:12 · 2638 阅读 · 0 评论 -
学习CSS3 3D转换，制作一个3D立方体
要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需要注意的地方，这里把我学习的方法，过程分享给大家。再讲知识点之前，还是先弄清楚3D的坐标系吧，从网上搜了一张经典坐标系图，供大家回顾一下。1. 3D视图 transform-style:flat（默认，二维效果）/preserv原创 2016-10-26 16:28:27 · 6017 阅读 · 0 评论 -
CSS3 几步即可实现loading动画效果
例子1：菊花状的Loading效果１.第一步画出静态的小菊花。 sk-fading-circle { width: 40px; height: 40px; position: relative;}.sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0;原创 2016-10-08 18:14:51 · 5825 阅读 · 0 评论 -
HTML5中的data-*自定义属性
HTML5增加了一项新功能是：自定义数据属性，也就是data-*自定义属性。在HTML5中我们可以使用data-为前缀来设置我们需要的自定义属性，来进行一些数据的存放。当然高级浏览器下可以通过脚本进行定义和数据存取。在项目实践中非常有用。例如：<div id="div1" class="div1" data-id = "myId" data-class = "myClass" data-id-and原创 2016-11-25 12:05:02 · 5747 阅读 · 0 评论 -
HTML5——sessionStorage和localStorage
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 而localStorage用于持久原创 2016-09-28 13:01:17 · 3353 阅读 · 0 评论 -
HTML5 <script>标签中的async和defer
在HTML中执行脚本最重要的方法就是使用<script>元素，但是执行<script>元素时会阻塞后面文档的加载，为了解决这个问题HTML5为<script>元素添加了async和defer属性。一、浏览器加载到<script>元素，没有设置async或者defer<script src="main.js"></script>浏览器执行到这个元素的时候会立即下载src所指向的脚本并且执行，在执行完该原创 2016-08-09 11:54:20 · 957 阅读 · 0 评论 -
在 2017 年将会更加流行的 6 个 Web 开发趋势
原文： https://dzone.com/articles/the-6-web-dev-trends-youre-going-to-see-more-of-in每到年底，人们总喜欢展望下一年，Web 开发领域也不例外。在 Web 开发领域，技术革新的速度堪比光速，未来总是超乎我们的想象，我们只能尽自己所能做一些合理的预测。以下是我们需要关注的一些趋势：1.更加移动优先响应式设计显然是目前 web翻译 2016-12-16 10:19:25 · 5694 阅读 · 1 评论 -
30分钟掌握ES6/ES2015核心内容
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了…在我们正式讲解ES6语原创 2016-12-23 16:40:18 · 7066 阅读 · 0 评论 -
canvas动画之二 -- 创建动态粒子网格动画
最近看到一个粒子网格动画挺炫的，自己也就做了一个，当背景挺不错的。优快云不能上传超过2M的图片，所以就简单截了一个静态图片：可以点击这里查看动画.下面就开始说怎么实现这个效果吧： 首先当然是添加一个canvas了：<canvas id="canvas"></canvas>下面是样式：<style> #canvas{ position: absolute;原创 2016-12-13 11:50:20 · 15620 阅读 · 4 评论 -
说一说z-index容易被忽略的那些特性
前言关于z-index，每个人都会用，但大多人都不理解其真正的生效机制。最近做项目有很多用到z-index的地方，才发现以前用的一知半解，所以上网查了一些资料梳理了一下。关于z-index的生效机制并不复杂，但如果不花一点时间研究其特点，有很多关键点容易被忽略。问题HTML文档中有三个div元素，每个div中存在一个span元素，三个span元素分别设置背景颜色为red，green，以及blue。然原创 2016-12-06 11:27:54 · 8373 阅读 · 1 评论 -
通俗易懂的讲解DOM
DOM是所有前端开发每天打交道的东西，但是随着jQuery等库的出现，大大简化了DOM操作，导致大家慢慢的“遗忘”了它的本来面貌。不过，要想深入学习前端知识，对DOM的了解是不可或缺的，所以本文力图系统的讲解下DOM的相关知识，如有遗漏或错误，还请大家指出一起讨论^ ^。一、DOM是什么 DOM（文档对象模型）是针对HTML和XML文档的一个API，通过DOM可以去改变文档。这个说法很官原创 2016-11-21 22:22:17 · 4191 阅读 · 0 评论 -
jQuery自定义插件
jQuery是一个功能强大的库，提供了开发JavaScript项目所需的所有核心函数。然而，有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率。 jQuery库是为了加快JavaScript的开发速度而设计的，通过简化编写JavaScript的方式，减少代码量。jQuery编写插件有两种方式 1.添加jQuery对象级别的插件，原理是给jQuery类添加方法。 写法如下：(fun原创 2016-08-07 14:07:44 · 671 阅读 · 0 评论 -
九个让JavaScript调试更简单的console命令
一、显示信息的命令<!doctype html><html><head><meta charset="utf-8"><title>常用console命令</title></head><body><script> console.log("hello"); console.info("info"); console.error("error"); conso原创 2016-08-20 13:19:24 · 581 阅读 · 0 评论 -
JavaScript中的本地对象、内置对象和宿主对象
初学JavaScript的时候总是分不清什么是本地对象、内置对象和宿主对象，现在写一篇博客来记录一下。一、本地对象ECMA-262把本地对象（native object）定义为：独立于宿主环境的ECMAScript实现的对象。 这里简单说一下JavaScript的应用环境，JavaScript的应用环境由宿主环境和运行期环境构成。宿主环境主要是指外壳程序（shell）和Web浏览器等，运行期环境由原创 2016-08-09 14:29:04 · 6733 阅读 · 0 评论 -
前端面试基础总结
引言作为一个刚毕业的大学生，出来求职面试必不可少，在6月份的面试中很多公司的笔试题中都提到很多相同的知识要点，再结合网上查找的一些资料，写下了这篇文章来帮助更多准备做前端的初学者，让准备深入前端的初学者们节约下更多的时间取探索自己想要深入的一方面。面试笔试涉及到的领域HTML/CSS 对web标准的理解、浏览器的内核差异、兼容性、CSShack、布局、盒子模型、选择器的优先级、HTML3、CSS3原创 2016-08-07 18:33:35 · 2242 阅读 · 0 评论 -
js操作cookie的方法
cookiecookie，有时候也用其复数形式Cookies，指某些网站为了辨别用户身份，进行session跟踪而储存在用户本地终端上的数据（经常通过加密）。定义于RFC2109和2965都已废弃，最新取代的规范是RFC6265。cookie的作用服务器可以利用Cookie包含信息的任意性来筛选经常性维护这些信息，以判断在HTTP传输中的状态。Cookie最典型的英语是判断注册用户是否已经登录网站，原创 2016-09-18 16:16:13 · 1145 阅读 · 0 评论 -
bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover(弹出框)使用总结+案例bootstrap的官方文档(不过是英文的)一. popover常用配置参数：//常用配置参数：$(document).ready(function() { $('#temp').popover( { trigger:'click', //触发方式 template:原创 2016-10-18 12:06:27 · 28919 阅读 · 1 评论 -
圣杯布局的实现过程
圣杯布局和双飞翼布局，它们都要求三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，而双飞翼布局是对圣杯布局的一种改良，下一篇会讲到。圣杯布局：用到浮动、负边距、相对定位，不添加额外标签。DOM结构：<div class="header">Header</div><div class="bd"> <div class="main">Main</div>原创 2016-11-28 21:50:33 · 2870 阅读 · 0 评论 -
说说web缓存
为什么要用缓存一般针对静态资源如CSS,JS,图片等使用缓存，原因如下：请求更快：通过将内容缓存在本地浏览器或距离最近的缓存服务器（如CDN），在不影响网站交互的前提下可以大大加快网站加载速度。节省带宽：对于已缓存的文件，可以减少请求带宽甚至无需请求网络。降低服务器压力：在大量用户并发请求的情况下，服务器的性能受到限制，此时将一些静态资源放置在网络的多个节点，可以起到均衡负载的作用，降低服务器原创 2016-11-30 10:24:04 · 3266 阅读 · 0 评论 -
利用CSS、JavaScript及Ajax实现图片预加载
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。用CSS和JavaScript实现预加载单纯的使用css可以将图片加载到页面元素的背景上，这种方法简单、高效：#preload-01 { backgr原创 2016-11-30 17:53:45 · 3019 阅读 · 0 评论 -
前端必会的html知识总结整理
1.浏览器内核ie：trident（三叉戟）内核firefox：gecko（壁虎）内核safari：webkit（浏览器核心）内核opera：以前是presto（急速）内核，现在是和谷歌共同开发的blink（闪烁）内核chrome：blink（基于webkit，谷歌和opera software共同开发）附：浏览器内核的理解浏览器内核分为两部分：渲染引擎和js引擎渲染引擎：负责取得网页原创 2016-12-27 11:33:58 · 6507 阅读 · 0 评论