table-cell元素水平等宽布局

水平等宽布局

一直以来,想要将一个列表水平排列,并且等宽,都只是将li浮动,然后设置宽度(按照列表项的个数来设置百分比或者一个固定的值-16.6%,33.3%…),这个宽度无论怎么设置都是不理想的,甚至是比较痛苦的。。。

最近一直在做手机站,所以在不用考虑IE6、7浏览器的情况下,我发现了一个非常完美的解决方案!

table布局

“。。。你不会说直接用表格布局吧,这就是你说的完美?。。。”。

当然不是,虽然直接用表格可以比较完美的解决,但是写一大堆的table,tr,td是我所接受不了的,所以,我要说的当然不是直接写…

背景全屏显示

全屏

给网页设置背景图片非常简单,但是当浏览器的宽高度变化之后,如何保证背景图片一直充满整个页面呢?比如像:http://www.lofter.com/

实现方法

方法1:background-size:cover

background-size:cover是CSS3中才有的,下面做一个测试,先在body里面放一个div,然后给它加一些基本的样式:

div.bg{
	position:fixed;
	

media queries的书写顺序问题

假设定义了一个minxin

@mixin breakpoint($point) {
	@if $point == big {
		@media (max-width: 1024px) 

JS批量操作元素样式之css函数

JS中设置元素样式

在JS中,操作元素样式有多种方法,比如:改变元素的style属性,改变样式表(cssRule),改变元素style的cssText属性。但是每次写起来都比较的麻烦,如果要设置高和宽的话,JS里常见的写法是这样:

obj.style.width = 100;
obj.style.height = 100;

如果我们能够像jQuery里那样设置就方便多了,比如像这样:

css(obj,{
	"width":"100px",
	"height":"100px"
});

OK,按照这个思路开写。…

JS练习-模仿MacOS下的Dock

苹果系统下的Dock

苹果系统下最吸引睛球之一的就是它下面的Dock了:

macosdock

在学习JS的过程中,试着将这个效果简单的实现了一下:JS练习Mac OS下的Dock

代码实现:

准备工作

首先把所需要的图片准备好(一些苹果系统下面的图片和Dock的背景图):

icons

dockbg

然后把它们引入到HTML中做一下简单的布局:

<div class="dock">
	<img src="icon/1.png">
	

16.FlexBox弹性盒子详解

RUNTIME: 50:50

详细介绍 CSS3 中的FlexBox 布局。
直接购买「JavaScript高级程序设计」

JavaScript高级程序设计

[美] 尼古拉斯·泽卡斯 著

一本包含了所有JavaScript知识的厚书。

直接购买「ES6标准入门」

ES6标准入门

阮一峰 著

前端越来越规范,JavaScript越来越规范了~

直接购买「CSS禅意花园」

CSS禅意花园

[美] Dave Shea / Molly E. Holzschlag 著

没错,就是这本「禅」书让我入的前端坑!

直接购买「CSS世界」

CSS世界

张鑫旭 著

不管你是新手还是资深开发,这本书里都会有你不知道的东西。