Cool的博客

在本文中，我列出了十个我过去没用过的HTML5功能，但现在发现它们很有用，废话不多说，让我们开始吧。???? detais 标签<details>标签向用户提供按需查看详细信息的效果。 如果需要按需向用户显示内容，简单的做法就是使用此<details>标签。 默认情况下，它是收起来的，打开后，它将展开并显示被隐藏的内容。事例：<details> <summary>Click Here to get the user details<

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script type="text/javascript" src="jqu

早前2011年5月就在站上写了一篇《CSS3 Transform》介绍CSS3中Transform属性的简单应用。但这篇文章里的知识无法满足大家对Transform的一个全面认识，最近重新整理了一个Transform系列的文章，希望对初学者有所帮助。前几天介绍了《CSS3 Transform——transform-origin》、《Transform-style和Perspective属性》和《C...

1.父元素：display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;2.子元素：-webkit-box-flex: 1; -moz-box-flex: 1; width: 25%; -webkit-flex: 1; -ms-flex: 1; -webkit-box-f...

通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！在本章中，您将学习如下多列属性：column-count column-gap column-rule

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。   ...

移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。iOS下的 Fixed + Input BUG现象让我们先举个栗子，最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局，可能使用如下布局（以...

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="jquery-1.8.3.min.js"&

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。   FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：1.检测浏览器对FileReader的支持 [javascript] view plain copyi...

H5项目常见问题及注意事项Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面[javascript] view plain copy//一、HTML页面结构   &lt;meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale...

//处理input输入框被输入法遮住function inputIos(inputBox){ var inputF = $(inputBox).find('input');//找到对应的input if(inputF == document.activeElement){ //获取焦点时用喔 setTimeout(function(){ ...

 img与div（block类型元素）下边界有距离（或者叫缝隙、空隙）。解决方案：法宝一：给图片img标签display:block法宝二：定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。 img{vertical-align:bottom;}  至于HTML属性align="cen...

美化效果的属性：(一)column-gap主要来设置列与列之间的间距：语法：column-gap: normal || &lt;length&gt;  1）默值为1em（如果你的字号是px，其默认值为你的font-size值）。2）length的话，使用px,em单位的任何整数值，但不能是负值。(二)column-span 跨列设置，定义一个分列元素中的子元素能跨列多少。语法：colu...

1、HTML 的 head 部分中加入如下代码：&lt;meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;其中 width：viewport 的宽度，可以指定为一个像素值，如：640，或...

最近刚接触前端开发，接手了一个移动端H5项目。着实体会掉了前端的坑之多，和H5移动端的坑之多多。如今项目告一段落，在这里做一总结屏幕自适应方案介绍方案之前，首先还是交代一下项目背景与需求，毕竟一切方案也不能脱离实际需求。需求与背景设备宽度 &gt; 800px， body宽度为800px 320px &lt; 设备宽度 &lt; 800px， 宽度根据设备宽度自适应 设备宽...

html:&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"

原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html原作很强悍导航前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变（发散） 图形变形（平移、旋转、缩放） 矩阵变换（图形变形的机制） 图形组合 给图形绘制阴影 绘制图像（图片平铺、裁剪...

HTML5 LocalStorage 本地存储说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示： 最早的Cookies自然是大家都知道，问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了，就好像以前禁用javas...

H5的一个重要特性就是离线存储，所谓的离线存储就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法（更新相关文件或者使用相关API），可以更新、删除离线存储等操作； H5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的，使用如&lt;html manifest='offline.manifest'&gt...

省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 代码如下 ...

html: &lt;div class="point_pop pf"&gt; &lt;div class="pop_box pf"&gt; &lt;div class="msg"&gt; &lt;h3&gt;&lt;/h3&gt; &lt;p class="tc f140pct"&gt;点言

作者： 阮一峰日期： 2012年6月19日学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css prepro...

给scroll元素增加css样式：-webkit-transform:translate3d(0,0,0);

区别不同浏览器的CSS hack写法：区别IE6与FF：background:orange;*background:blue;区别IE6与IE7：background:green !important;background:blue;区别IE7与FF：background:orange; *background:green;区别FF，IE7，IE6：background:orange;*b...

做touchweb开发的时候，做头疼的是，电脑上面时候好的，有些手机上面也是好的，个别手机和浏览器出现问题，对于这些，只能慢慢调试，找问题。今天说一下比较老的IOS的问题，那就是“iOS下的 Fixed + Input 调用键盘的时候fixed无效问题”。案例如下&lt;body class="layout-fixed"&gt; &lt;!-- fixed定位的头部 --&g...

 1.row{ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }2.col{ -webkit-box-flex: 1; -moz-box-flex: 1; width: 100%; -webkit-flex: 1; -ms-flex: 1...

方法一（推荐）： position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; 方法二： position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 方法三： position...

downloadgit clone https://github.com/lzxb/flex.css.gitnpmnpm install flex.css --save为什么需要flex.css?在移动端开发中，并不是所有的浏览器，webview，微信等各种版本都支持标准的flex，但是基本上都会支持-webkit-box，所以flex.css的主要作用是保证每一个属性...

  &lt;div class="mall-divider"&gt; 华币明细&lt;/div&gt;  .mall-divider { display: table; white-space: nowrap; height: auto; overflow: hidden; /*line-height: 1;*/ text-align: cente...

/** * flex布局 */.flex { display: -webkit-flex; display: flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;...

前话好久没写教程了（可能会误导新手的菜鸟教程(￣▽￣)”）。这是我的github，欢迎前端大大们和我一起学习交流 https://github.com/pwcong最近入职公司做前端实习，这几个星期来学到了移动端H5页面适配。（以前根本没做过移动端网页/(ㄒoㄒ)/~~，还是微信端的）所以把我学到的一个小知识点写下来，也分享给前端新手们。正文0x00 大概说明做移动...

人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思？它们的出现是源于BEM和Nicolas Gallagher...BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开...

/*初始化类*/@charset "UTF-8";html { font-family: sans-serif; font-size: 20px;}html,body { -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-col...

http://www.css88.com/tool/csstidy/

&lt;!-- 一些易忘点 --&gt;&lt;!-- 1.css background 背景 --&gt;1.background-attachment 背景图片是固定还是随滚动而滚动&lt;!-- 2.css Text文本 --&gt;1.direction 设置文本方向2.letter-spacing 设置字符间距3.text-decoration 文本添加修饰4.tex...

BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么？　　在解释 BFC 是什么之前，需要先介...

(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidt...

1.引入reset.css重置css样式2.引入base.css 设置一些全局默认的css样式和公共css3.可以根据需求加入common.css 局部或者组件的公共css4.可以根据需求引入阿里iconfont.css 图标文件 @font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/fon...

a,button,input,textarea { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}input:focus { outline: none;}body { -webkit-overflow-scrolling: touch; line-height: 1; line-height: 1.6;}...

 css:正方形 width: 100%;padding-top: 100%;display: block;position: relative;background-size: cover;background-position: 50% 50%;比例  width: 100%;padding-top: 57%;display: block;p...