随笔分类 - css
css样式
摘要：开发技术文档汇总：(持续更新)1Underscore 中文文档 github地址 英文文档2 Express中文文档 github地址3 Backbone中文文档Backbone英文文档 github地址4 Jquery中文文档（适合1.0--2,0）5 Bootstrap中文6 Less中文7 ...
阅读全文
摘要：面试时，考官问我都看过哪些前端的书，当时竟一时想不起来几本，抽个时间整理一下：一、Javascript方面的书籍：1JavaScript权威指南（第6版）：号称javascript圣经，前端必备；前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册；2JavaScript高级程序设计(第3版) ：前端必备书，如果你想真正进入前端世界，这是一本不可多得的进阶书，没什么好说的，必须细细品读；3JavaScript语言精粹 ：这是一本值得任何正在或准备从事JavaScript开发的人阅读，并且需要反复阅读的js书籍；4基于MVC的JavaS
阅读全文
摘要：周末闲来无事,做了一个响应式设计的例子。当然，由此并不能窥见响应式设计真谛之一斑。但，对于初次接触响应设计，对于响应式设计的概念依旧模糊不清的同学来说，或许是个启蒙！闲语暂且不表，进入正题，这里没有太多的表述，直接上代码：本例基于html5标签，所以为了兼容不支持html5标签的浏览器和不支持Media Query的浏览器引入以下文件：<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"><
阅读全文
摘要：自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。WebApp与Native App有何区别呢？Native App：开发成本非常大一般使用的开发语言为JAVA、C++、Objective-C更新体验较差、同时也比较麻烦每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有
阅读全文
摘要：前言现在使用移动设备人越来越多，移动版的Website随之也越来越重要；但是移动端设备的大小不一，屏幕分辨率各不相同，我们不可能为BlackBerry，iPhone， iPad等等每个都做单独的页面设计。所以我们需要的Website设计要能迎合多种device的要求并且兼容所有的屏幕分辨率，这种设计就叫响应式Web设计什么是响应式Web设计（Responsive Web design）？响应式Web设计是一种Web设计和开发能够根据屏幕大小、平台和方向对用户的行为和环境做出响应的设计。它包括了灵活的网格和布局，图像和智能使用CSS的media queries特性。当用户从Laptop切换到iP
阅读全文
摘要：<!doctype html><html><head><meta charset="gb2312"><title>响应式Web设计</title><meta name="viewport" content="width=device-width, initial-scale=1"><!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com
阅读全文
摘要：转文请注明：穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html利用css画图形，是个有利有弊的写法，好处是不用画图，且节省了一些流量，坏处是要写长串的css样式，而且有可能流量并没有减少，用与否视情况而定，个人选择。下面是我做测试的一些图形，也是参考了一些网站，简单的注解一下和归纳了一下，其中并没涉及到复杂的css画图形。其中用了css3.0的一些属性，所以这里声明：请用支持css3.0的浏览器看此文章！正方形矩形梯形平行四边形上面这几个相对比较简单,没什么可解释的,看下面源码：/*正方形*/.Square { w
阅读全文
摘要：转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/固定头部或者左侧导航现在网站中随处可见，主要是为了提高用户体验；以及右下角的固定广告，页面两侧的固定广告。这些实现起来其实并不困难，都基于一个属性：position:fixed;是可惜IE6不支持；只能退而求其次利用其它办法，比如利用js监听window的resize和scroll事件，重置位置。实现起来也很简单，主要是scrollLeft或者scrollTop以及可视窗口高度来定位。但这些都有一个问题好就是会出现“震动”。所以，又出现另外一种解法，就是利用Internet Explorer的CSS表
阅读全文
摘要：转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/一、BFC是什么？BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一
阅读全文
摘要：“交集”复合选择器是由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。注意其中第一个必须是标记选择器，如p.class1，但有时候会看到.class1.class2，即2个都是类选择器，在其他浏览器中是允许出现这种情况的，但IE6不兼容。如下表：两个类选择器的“交集”复合选择器浏览器支持表：Mac: Safari 4.0支持Mac: Chrome 5.0支持Mac: FireFox 3.6支持Mac: Opera 10支持Win: FireFox 3.6支持Win: Oper
阅读全文
摘要：table下面appendChild别忘了tbody
阅读全文
摘要：今天说说一个经典布局：头尾固定高度中间高度自适应布局！转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/相信做过后台管理界面的同学，都非常清楚这个布局。最直观的方式是框架这个我不想多写费话，因为我们的重心不在这里。如果有不了解的同学可以百度、google。这里我不得不吐下槽！！百度实在让我这个“粉丝”失望。就目前情况来说，百度已经完全轮为“有钱人排行榜”！再也不顾及用户的搜索需求了，因为主导地位实在是：不可撼动！不相信的同学，可以亲身对比下B vs G的搜索结果。别告诉我google如何强大！！很久以前，百度的搜索结果更符合目标，因为他更了解中国人的
阅读全文
摘要：[转]http://www.w3cfuns.com/forum.php?mod=viewthread&tid=5594311最近群里有人提了IE中a标签绝对定位设置高宽却无法点击的问题，其实这个是老问题了，最近在写一个JS效果的时候也遇到，今天顺便也做一个记录！元素绝对定位以后设置了高宽原因：1、元素内并无内容2、背景是透明的，无任何背景图或者颜色解决方法：1、如果不是绝对定位元素的，可以用相对定位2、给元素加透明的背景图3、IE可以只用 background:url(about:blank) 解决第三种方法平时用用是可以的，但是在某种情况下会有bug, 比如JS拖动层时候，拖动的事件
阅读全文
摘要：background-origin 用来决定 background-position 计算的参考位置。语法：background-origin： border-box | padding-box | content-box该属性的默认值为 padding-box 。该属性不会被继承。取值：padding-box默认值。该位置是相对于衬距方框而言的。对于单一方框，“0 0”是衬距边缘的左上角；“100% 100%”是右下角。border-box该位置是相对于边框方框而言的。content-box该位置是相对于内容方框而言的。兼容性视图：示例代码：<!DOCTYPE HTML><
阅读全文
摘要：_：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高\9：选择IE6+\0：选择IE8+和Opera[;property:value;];：选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意多个规则[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;];
阅读全文