随笔分类 - HTML5 & CSS3
摘要：前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充
阅读全文
摘要：开发工具介绍 开发工具一般分为两种类型：文本编辑器和集成开发环境（IDE） 常用的文本编辑器：Sublime Text、Notepad++、EditPlus等 常用的IDE：WebStorm、Intellij IDEA、Eclipce等 我们这里主要介绍如何使用Sublime Text编辑器，它基本
阅读全文
摘要：在浏览网页的时候出现404错误是非常令人沮丧的，我敢肯定，随后的一两秒内如果没有什么吸引你的注意力的话，你会离开网站，再也不会回来。因此，很多网站都会去设计一个新颖的错误页面，以吸引用户继续浏览其它的内容。这里收集了50个非常有创意的404错误页面设计作品，希望能带给你灵感！一起欣赏：） Twurn
阅读全文
摘要：在HTML5规范中，我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API：
阅读全文
摘要：最近在慕课网看了一个案例教程——回到顶部效果（原生js实现） <a href="javascript:;" id="btn" title="回到顶部"></a> 这个a标签就是用来实现回到顶部的链接,其中 href=”javascript:;”是用来阻止a标签的默认行为，因为我们是要触发点击事件让滚
阅读全文
摘要：昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记…… 第1种效果： 代码如下： 第2种效果： 代码如下： 第3-5种效果： 代码如下： 第3-5种效果的css样式分别为： 第6-8种效果： 代码如下： 第6-8种效果的css样式分别为： 第9-10种效
阅读全文
摘要：每个前端工程师可能每天都会写一些css，其中选择器是很主要的一部分。但是，大家可能每天写的大多是#id,.class这样的选择器，这并不稀奇，但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器，就可以简化我们的代码。 我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度
阅读全文
摘要：近几年，移动端站点和app、手游井喷式的发展，大大出乎了当初从业者的预料，2010年前后中国还处于3G网时代，各种3G宣传铺天盖地，如果你稍稍回忆一下，那个时候中国几乎没有像样的移动站点；大约在12年左右，也就是iphone4s诞生的时代，在中国高级智能设备开始被普遍使用，4G的覆盖范围也越来越大，
阅读全文
摘要：第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。代码是： <ul><li><a href="1">首页</a></li><li><a href="2">产品介绍</a></li><li><a href="3">服务介绍</a></li><li><a href="4">技术支持</a
阅读全文
摘要：返璞归真，代码规范也是一门艺术 黄金定律 永远遵循同一套编码规范 -- 可以是这里列出的，也可以是你自己总结的。如果你发现本规范中有任何错误，敬请指正。通过open an issue on GitHub为本规范添加或贡献内容。 不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。
阅读全文
摘要：CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 媒体类型 一些CSS属性只设计了某些媒体。例如"voice-family"属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如，"font-size"属性可用于屏
阅读全文
摘要：@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了
阅读全文
摘要：1. 新的Doctype 尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcaption>来语义化地表示带标题的图片 <figure> <img src=”path/to/image” alt=”About im
阅读全文
摘要：一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M
阅读全文
摘要：但多数情况下，考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写，这里整理了19个Web安全字体，让你无需任何顾虑的情况下畅快使用。 1, Arial 微软公司的网页核心字体之一，最常用的sans-serif字体，当字号很小时不容易阅读。但是，大写的“I”和小写的“l”是无法
阅读全文
摘要：之前如果想在自己的网站使用某些好看的字体，总是迫不得已得在PS里先把字体图片做好。虽然这样做也能达到我们想要的效果，但是这样就增加了HTTP请求 （如果在多处使用的话），即使合并所有图片，也不好管理，灵活性不高，哪一天想换种更好看的字体，那工作量，想想都没劲！幸好CSS3新增了@font-face模
阅读全文
摘要：HTML5 LocalStorage 本地存储 说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示： 最早的Cookies自然是大家都知道，问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还
阅读全文
摘要：本文中将综合前端开发中常用的30个CSS3选择器，并且附带了浏览器的支持情况，希望对大家有所帮助。 1、*：通用元素选择器 *选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除默认CSS样式方法 *选择器也可以应用到子选择器中，例如下面的代码：
阅读全文
摘要：CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，
阅读全文
摘要：几乎所有浏览器(包括最古老的IE6)也支持的网络字体@font-face的用法是： 但进入到现代浏览器时代后，WOFF格式的字体受到了普遍的支持，所有，你可能只需要这样写： 或者只含WOFF格式： 然后，像这样使用： @font-face基本知识 在@font-face网络字体技术之前，浏览器显示网
阅读全文
浙公网安备 33010602011771号