HTML5&CSS3 - 随笔分类 - Joanna Qian

创建无障碍的对话框(转)

摘要：如今的web应用程序中，对话框如同在桌面应用程序中一样常见。我们使用较少的JavaScript和CSS就可以很容易的显示或隐藏一个元素，但很少会考虑对话框对可访问性的影响。多数情况下，它是可访问性的一个灾难。输入焦点未能正确处理以及屏幕阅读器无法感知内容变化。其实，使对话框可访问并非如此困难，你只需... 阅读全文

posted @ 2015-03-05 02:30 Joanna Qian 阅读(800) 评论(0) 推荐(2) 编辑

使用jQuery Mobile的注意事项（译）

摘要：翻译编辑自：http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it一、Android和IOS的内置键盘（Native keyboard）是不一样的对手机的内置键盘的操作是比较复杂和富有争议的，不同的手机... 阅读全文

posted @ 2015-02-24 00:43 Joanna Qian 阅读(818) 评论(0) 推荐(0) 编辑

【必备】史上最全的浏览器 CSS & JS Hack 手册(转)

摘要：浏览器渲染页面的方式各不相同，甚至同一浏览器的不同版本（“杰出代表”是 IE）也有差异。因此，浏览器兼容成为前端开发人员的必备技能。如果有一份浏览器 Hack 手册，那查询起来就方便多了。这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScr... 阅读全文

posted @ 2015-02-11 12:17 Joanna Qian 阅读(718) 评论(0) 推荐(0) 编辑

iScroll4.2.5中的无法滑动或点击的解决方案（转）

摘要：又见iScroll问题，特别是三星手机和iPhone，顺便提一句，现在的项目中他们给div加了height属性来解决不能滚动问题，个人认为是个非常愚蠢的解决方案，我必须使用media query来解决随之而来的不同手机有不同高度问题，既不能适应所有手机，万一将来有了新手机型号，也会发生问题。不过他们... 阅读全文

posted @ 2015-02-11 11:57 Joanna Qian 阅读(4106) 评论(0) 推荐(0) 编辑

无障碍网页设计（WCAG2.0）

摘要：无障碍化是指无论健全人还是残疾人，年轻人还是老年人都可以平等地获取互联网上的信息和服务。无障碍化网站建设不单可以增加网站的受益群体，更是一个有情怀、有担当的互联网企业的责任，也是一个互联网从业人员应该关注到的一个方面。无障碍化受益人群：普通人普通网站用户；文化背景和习惯与主流用户不同的用户；老年人或... 阅读全文

posted @ 2014-11-07 23:20 Joanna Qian 阅读(5806) 评论(0) 推荐(1) 编辑

HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

摘要：SVG支持动画。可以通过以下几种方法获得动画效果：使用SVG动画元素。SVG可以描述随时间变化的图形对象，使用不同的动画元素可以定义运动路径，淡入淡出效果和对象的膨胀、收缩、旋转和变换颜色。使用SVG DOM。SVG DOM兼容DOM1和DOM2，而SVG又定义了一套附加的DOM接口，支持脚本动画。... 阅读全文

posted @ 2014-09-23 23:58 Joanna Qian 阅读(640) 评论(0) 推荐(0) 编辑

SASS学习笔记2 —— 语法

摘要：sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种是scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方... 阅读全文

posted @ 2014-09-23 03:33 Joanna Qian 阅读(494) 评论(0) 推荐(0) 编辑

支持新版chrome，用webstorm编译形成css和sourcemap，调试sass和less源文件（转）

摘要：旧版的chrome有个support for sass，但是新版chrome没有这个功能了。看到网上提供的方法比较多，也很乱，旧版新版的都有。而且不能指定自己所需要的路径。所以就做了下改版。sass和less都有提供一个map文件，这个文件是用来干嘛的呢？.map文件是一个json格式的文件，可以直... 阅读全文

posted @ 2014-09-23 00:18 Joanna Qian 阅读(1063) 评论(0) 推荐(0) 编辑

SASS学习笔记1 —— 安装、编译和调试

摘要：一、什么是SASSSASS是一种"CSS预处理器"（css preprocessor）的开发工具，为CSS加入编程元素，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。二、安装和使用2.1 安装SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使... 阅读全文

posted @ 2014-09-23 00:04 Joanna Qian 阅读(973) 评论(0) 推荐(0) 编辑

你需要知道的三个 CSS3技巧(转)

摘要：1. 在CSS中用attr()显示HTML属性值attr()功能早在CSS 2.1标准中就已经出现，但现在才开始普遍流行。它提供了一个巧妙的方法在CSS中使用HTML标签上的属性，在很多情况下都能帮你省去了以往需要Javascript处理的过程。要想使用这个功能，你需要用到三种元素：一个:befor... 阅读全文

posted @ 2014-05-29 22:43 Joanna Qian 阅读(256) 评论(0) 推荐(0) 编辑

HTML5的 2D SVG和SVG DOM的学习笔记（1）

摘要：（项目中要使用SVG，只好补充知识了）HTML体系中，最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。一、SVG概述可缩放矢量图形(Scalable Vector Graphics，简称SVG)是一种使用XML来描述二维图形的语言(SVG... 阅读全文

posted @ 2014-05-24 03:05 Joanna Qian 阅读(2516) 评论(0) 推荐(0) 编辑

响应式设计中的响应式图片制作

摘要：两种方法实现响应式图片：在该两个标签中使用srcset和sizes属性，如：配合的css如下article{ margin: 0 auto; max-width: 700px; }@media (max-width: 500px) { img {width: 250px } }... 阅读全文

posted @ 2014-05-22 00:19 Joanna Qian 阅读(491) 评论(0) 推荐(0) 编辑

BootStrap 最佳资源合集(转)

摘要：witter BootStrap是一款优秀的前端的框架，称得上是前端的一个框架利器。Web前端开发者每天都在与HTML、CSS、JavaScript打交道，然而不少人都是在周而复始的写模板、样式和交互效果，前没有想过如何将这些重复的工作整合在一起。Twitter推出的BootStrap能够帮助We... 阅读全文

posted @ 2014-04-26 04:49 Joanna Qian 阅读(847) 评论(0) 推荐(0) 编辑

用HTML5实现手机摇一摇的功能(转)

摘要：在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件：1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手... 阅读全文

posted @ 2014-04-25 02:35 Joanna Qian 阅读(448) 评论(0) 推荐(1) 编辑

JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner

摘要：一、Lateral On-Scroll Sliding with jQuery的使用View demo Download source1. HTML结构 November 2011 Some title November 28, 2011 Some Title ... 阅读全文

posted @ 2014-02-19 03:34 Joanna Qian 阅读(979) 评论(0) 推荐(0) 编辑

16个时髦的扁平化设计+视觉滚差的网站模板

摘要：Persona – HTML5 Parallax Portfolio Theme充满吸引力的一款网站模板，扁平化设计风格，动感的视差滚动效果。在线演示模板下载Superb – Responsive One-Page PortfolioSuperb 是一个基于 HTML5 & CSS3 的响应式单页作品集网站模板。在线演示模板下载Next – Unique & Easy Portfolio Template这款精美的网站模板提供了三套风格的设计：全屏背景、单页滚动以及 Metro 面板。在线演示模板下载Creatrix – Flat Responsive Template扁平化设阅读全文

posted @ 2014-01-25 05:18 Joanna Qian 阅读(1527) 评论(0) 推荐(0) 编辑

绝对应当收藏的10个实用HTML5代码片段（转）

摘要：HTML5绝对是一个流行元素，受到如此多的公司组织的追捧，作为极客来说，岂能错过呢？在今天这篇文章中，我们将分享一些超实用的HTML5的代码片段，相信大家一定会喜欢！正确的嵌入flash如果你经常需要在网页中插入flash的话，这段代码你应该用的上：HTML5视频和fallback——并且支持flash实用HTML5的一个好处就是简化了视频和音频的嵌入代码量，不过呢，如何兼容老版本的浏览器绝对是一个令人头疼的问题，特别是在天朝，老版本的浏览器绝对处于优势地位，下面代码或者能够帮你忙：表单获取Google地图输入地点一段非常简单的代码，通过用户输入... 阅读全文

posted @ 2014-01-10 01:22 Joanna Qian 阅读(551) 评论(0) 推荐(0) 编辑

IE9中Media queries在iframe无效的解决方法

摘要：在css中有5个media querie@media screen and(min-width:0px)and(max-width:319px){ body {background-color:red;}}@media screen and(min-width:320px)and(max-width:480px){ body {background-color:orange;}}@media screen and(min-width:481px)and(max-width:980px){ body {background-color:yellow;}}@media scree... 阅读全文

posted @ 2013-12-17 03:58 Joanna Qian 阅读(1239) 评论(0) 推荐(0) 编辑

多种方法实现div两列等高（收集整理）

摘要：HTML骨架头部主内容区域侧边栏页脚1.背景模拟（使用背景图片实现等高）：背景模拟主要依靠一张图片，然后将其平铺，使页面在视觉上，产生等高效果，如图背景模拟实现很简单，直接利用了background-repeat属性,使背景图片以Y轴方向重复。图片： css： background-repeat:repeat-y;关于背景图片，这个需更具你的实际项目需求，值得注意的是背景图片切图时必须以两列的形式，否这达不到等高效果。*{ margin:0; padding:0;}#header,#footer{ width:960px;/*设置头部，页脚宽度*/ height:30px;... 阅读全文

posted @ 2013-11-15 02:00 Joanna Qian 阅读(2435) 评论(0) 推荐(0) 编辑

meta标签

摘要：meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta标签用于网页的＜head＞与＜/head＞中，meta标签的用处很多。 meta的属性有两种：name和http-equiv。name属性name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个： 1、＜metaname="Generator"c 阅读全文

posted @ 2013-10-26 00:39 Joanna Qian 阅读(351) 评论(0) 推荐(0) 编辑

随笔分类 - HTML5&CSS3