Ga Ga Love Front

精通flex弹性布局在远古时代，兼容ie6的年代使用float、position+display传统方式布局，经常会遇到一些奇奇怪怪的布局问题，所以在css3中的flex布局就营运而生，也就是弹性布局。一、兼容性目前为止已经有超过98%的浏览器已经全面支持flex布局(除非你的项目属于远古时代的项目)，所以基本都可以使用flex布局。二、注意要点如果使用了flex布局之后，容器中子元素...

效果图如下：虽然丑了一点，但是功能实现了！钟使用的技术是css3的旋转、背景渐变（径向渐变）、圆角，还有负边距的定位，兼容ie9以上的浏览器，firefox、chrome、opera、safari等主浏览器，仅供参考，莫喷我！！！

listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件，基础库可以使用jquery.js或者zepto.js操作dom节点，目前我是使用了zepto.js作为基础库操作dom，以jquery插件的形式存在。如果不想以插件方式使用，则只需要把listloading直接移植你需要的库里面就ok啦。listloading主要针对移动端而生，在使用浏览器自带滚动，用户体验很不友好，与Android和ios差别甚远，所以选择iscroll.js，它实

本文属于转载，为尊重原作者的劳动成果，在此标注原文地址，点击此处浏览网页布局（layout）是CSS的一个重点应用布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完

.bg{ width:300px; height:50px; background:#caca8c; background-image:-webkit-gradient( linear,50% 0,0 100%, from(transparent), color-stop(.5,transparent),

body { background: #2B353E; margin: 0; padding: 0;}#slider { width: 400px; height: 17px; position: relative; margin: 100px auto; background: #10171D; -webki

css3content的用法#gaga::before{ font-family:"gaga-font-icon"; content:'\1234'}gaga实体的用法#gaga{ font-family:"gaga-font-icon";}&#x1234效果是一样，content的优势在于灵活的控制，而且减少节点，实体如果要

视差滚动(Parallax Scrolling)效果的原理和实现视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。可以先看看效果：http://www.ok-studios.de/home/一、什么是视差滚动？ 视差效果，原本是一个天文学术语，

css部分  #gaga{position:fixed;top:0;left:0;background:#f00;width:100px;height:100px;_position:absolute;cursor:move;}html部分 javascript部分/* 2013-4-2 尜尜制作 鼠标拖拽效果* 1、要实现鼠标拖拽功能，就是三个事

// live主要用于对动态加载出来的元素绑定事件// 产品目录 $(".lm_div_q dd").live({ mouseenter: function() { $(this).find("strong").addClass("tj_strong"); $(this).find("strong").next().slideDown(200); // 显示下拉框

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与 content="IE=7"在无论页面是否包含指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循指令。对于多数网站来说，它是首选的兼容性模式。为了避免制作出的页面在IE8下面出现错误，建议直接将IE8

css代码：*{margin:0;padding:0;}.gaga_tb{margin:30px;}.gaga_tb tr th,.gaga_tb tr td{height:30px;border:1px solid #ccc;text-align:center;}js代码：function gaga_x(arr,e){ // 冒泡法 for(var i =

在写javascript中，经常要用到style对象的css属性，很多不记得其实很好记，基本就是CSS中的“-”转化为javascript的驼峰写法，除了注意下float盒子标签和属性对照CSS语法（不区分大小写）JavaScript语法（区分大小写）borderborderborder-bottomborderBottom

主要是使用了圆角的border-radius，剩下的就是定位了，其实也没有甚么东西而已，无聊的时候乱玩一下而已

纯属自己乱玩而已，CSS3的圆角就是好玩 哈哈哈

今天看了一篇文章说265个class可以干掉一个id，自己还不相信，就试了一下，还真的可以，其实id的权重是在10，class的权重是在1，class远远不是id的对手，但是现在感觉class团结起来真是无敌啊HTML如下我是神马颜色css样式#gaga{color:#f00;}.gaga1.gaga2.gaga3.gaga4.gaga5.gaga6.gaga7.gaga

曾几何时，display:inline-block 已经深入「大街小巷」，随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了，上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inline-block 了吗？本文将带你深入剖析该属性值的前世今生，让你更好的理解和运用 inline-

虽已数年，但未就学习专门写过文章，这回破处了。苍蝇不叮没有缝隙的鸡蛋，领导不做没有跟拍的表演，同样，想到写CSS学习的文章也是有原因的（虽然我的不少行为没有原因）。情景再现（尊重隐私，下面故事中人名均为化名，有加工）：如月姑娘（本届D2上微博中奖上台最漂亮的那位）的内部分享会——关于CSS3 background相关内容~~……一顿巴拉巴拉……如月：假设背景图片500px*50

css代码：@keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(-360deg); }}@keyframes spin-vertical {from { transform: rotateX(0); }to { transform: rotateX(360deg); }}/************

原作者：phil 　　这也许不仅仅是一款游戏，也许是一个新世界的开始。障碍越野赛是体感游戏的第一款游戏。 　　通过建立长链接将手机（wifi连接）与PC浏览器进行绑定，将用户覆盖最广的电子设备——手机成为电脑游戏的游戏手柄，通过手机上下晃动控制游戏人物赛跑。一个前端的技术、一个全新的交互方式、一个融入SNS元素的全新游戏模式。这不仅是一款游戏，我们有了更广阔的想象空间。产品

讲到响应式布局，相信大家都有一定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计（通过CSS3Media Query实现响应布局）。一、什么是响应式布局?响应式

看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验。减少了页面加载的时间了，也减轻了服务器的压力，就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可见界面的图片是加载进来的，而不可见页面（通过滚动条下拉

随着css3属性的广泛支持，越来越被设计师所青昧 ，常常可以创造出惊人的网站作品出来，特别是视差滚动的出色表现。关于视差滚动在实现方面，在之前的文章中《利用JARALLAX实现超强视差滚动网页效果》也为大家介绍了一个小插件的实现方式，在这里就不多介绍了。在本文，将为大家分享14个非常优秀并且带有故事性趣味的视差滚动网站，认真的欣赏下去，或许你会喜欢上其中的某一个故事哦。你会发现这些网站不单单技术牛

看到一网站做了一个彩色扇子的视频教程，尼玛还需要10大洋至此，我有点不爽，这么一点东西也许要钱，我擦啊，于是闲的蛋痒的我，自己去搞了一个HTML代码 尜尜制作 CSS代码.main{width:800px;position:relative;height:500px;top:50%;lef

对于常见的IE6下面的bug做一个总结，记下这个犯贱的IE6一些令人厌恶的bug1、png的问题，每次遇到这样的透明的问题，都很蛋疼，特别是渐变透明的时候，让我想拍死它。解决方法:用png8或者gif透明，是在没有办法就使用iepng.js来处理了；2、display:inline-block问题，解决方法:触发hasLayout就可以了，*display:inline;*zoom:1;I

关于默认元素在不同浏览器中的margin值是多少的问题，今天做了一个探讨   /*2013-4-11*/// body的margin值firefox 20.0 ----------------------- body的margin为: margin:8px 8px 8px 8px;Internet Explorer 6.0 ----------- body的margin为: mar

要使得一个DIV或者其他表情自适应屏幕的高度，除了可以用JS来获取屏幕的高度之外，还可以用CSS来控制其标签的高度，就是设置html,body{height:100%},再设置其标签的高度为100%，这样就可以设置其高度充满屏幕了。