worldpress小工具自定义html,WorldPress Grid html代码设置浅析,代码非常简洁

WorldPress Grid

html代码浅析:

首先,多用公共样式

里面的标签(h1\h2..p.),无论用了其中的某一个,其定义的样式都是全局的,这样的好处就大大减少了css代码量,网络维护起来可想是多么的方便了.

for

instance:

h3{

margin-top:20px;

}

其次,值相等

里面的margin,padding样式定义的值都是有一定的联系的.

for

instance:

h3{

margin-top:20px;

}

p{

padding:5px

0;

margin-bottom:10px;

}

p元素占用的空间可以看出来是多少了吧,p的占高度是:5px+5px+10px=20px,

上面的h3的margin-top值也是20px.

看出来了吧,不要小看这个,这样做的好处其实是非常的多的,

for

instance:

如果模块与模块之间的距离是20px，大模块与大模块之间的距离是30px,那么根本不要多余的css代码就完全可以实现了.

模块

style="visbility:hidden">

模块

只要将模块之间加上p标签,css属性设置为visbility:hidden,这样就实现了功能,而且代码非常的少.

Conclusion:我们在用wordpress模板的时候可以尽量的让margin和padding的值产生关联.

for

instance:

h3{margin-top:20px;}

p可以设置如下:

(1).p{padding:10px

0}

(2).p{padding:3px

0 7px 0; margin-bottom:10px;}

(3).p{padding:10px

0 0 0; margin-top:10px;}

............

这里只要让p和h3的标签所占空间的值相等就行了,至于怎么设看各位的创意了