结构化CSS

八月 8th, 2011 by yangyao | Filed under DNN实习.

如何增加css代码的复用率,这个制约着开发的效率。

这么多天学习DNN皮肤,我懂得了一点就是结构化。在DNN皮肤的制作中,我发现了DNN在写html和css代码的连个很大的优点。

其中一个就是固定的一个HTML代码块,叫做pane结构,还有一个代码块叫做container,container代码是书写在pane结构中的。

在书写了很长时间的CSS之后很多人都会发现自己写的结构放佛是固定的。

从上到下,一次是head,logo menu,然后是banner,下面再是某种左右或者上下结构。。

DNN中pane结构就是用了解决下面的问题的,pane结构大致是这样子的。

<div id=”allPane”>
<div id=”TopPane” runat=”server” visible=”false”></div>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<tr>
<td id=”LeftPane” runat=”server” visible=”false”></td>
<td>
<div id=”HeadPane” runat=”server” visible=”false”></div>
<div>
<div id=”CenterTopPane_AB_A”><div id=”CenterTopPane_A” runat=”server”></div></div>
<div id=”CenterTopPane_AB_B”><div id=”CenterTopPane_B” runat=”server”></div></div>
</div>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<tr>
<td id=”MiddleLeftPane_A” runat=”server” visible=”false”></td>
<td id=”MiddleCenterPane_A” runat=”server”></td>
<td id=”MiddleRightPane_A” runat=”server” visible=”false”></td>
</tr>
</table>
<div id=”ContentPane” runat=”server” visible=”false”></div>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<tr>
<td id=”MiddleLeftPane_B” runat=”server” visible=”false”></td>
<td id=”MiddleCenterPane_B” runat=”server”></td>
<td id=”MiddleRightPane_B” runat=”server” visible=”false”></td>
</tr>
</table>
<div>
<div id=”FooterPane_ABCD_A”><div id=”FooterPane_A” runat=”server”></div></div>
<div id=”FooterPane_ABCD_B”><div id=”FooterPane_B” runat=”server”></div></div>
<div id=”FooterPane_ABCD_C”><div id=”FooterPane_C” runat=”server”></div></div>
<div id=”FooterPane_ABCD_D”><div id=”FooterPane_D” runat=”server”></div></div>
</div>
<div id=”FooterPane” runat=”server” visible=”false”></div>            </td>
<td id=”RightPane” runat=”server” visible=”false”></td>
</tr>
</table>
<div id=”BottomPane” runat=”server” visible=”false”></div>
</div>

由一张很大的表组成,上下左右各有头部,上下左右,各有很多pane。pane结构的CSS代码如下:

#allPane {
padding:0px 22px 3px;
min-height:280px; position:relative; z-index:11;
}

.dnnpane {
padding: 0 10px 0;
}

.pane-box,.MiddleCenterPane_A {
vertical-align: top;
}

.LeftPane,.RightPane {
width: 20%;
vertical-align: top;
}

.MiddleLeftPane_A,.MiddleRightPane_A {
width: 27.3%;
vertical-align: top;
}

#CenterTopPane_AB_A {
float: left;
width: 50%;
}

#CenterTopPane_AB_B {
float: right;
width: 49.9%
}

html>/**/body #CenterTopPane_AB_B {
width: 50%;
}

#Middle_ABC_A,#Middle_ABC_B {
float: left;
width: 33.333%;
}

#Middle_ABC_C {
float: right;
width: 33%;
}

html>/**/body #Middle_ABC_C {
width: 33.333%;
}

#FooterPane_ABCD_A,#FooterPane_ABCD_B,#FooterPane_ABCD_C {
float: left;
width: 24.9%;
}

html>/**/body #FooterPane_ABCD_A,html>/**/body #FooterPane_ABCD_B,html>/**/body #FooterPane_ABCD_C {
width: 25%;
}

#FooterPane_ABCD_D {
float: right;
width: 24.9%;
}

html>/**/body #FooterPane_ABCD_D {
width: 25%;
}

.CenterTopPane_A,.CenterTopPane_B,.MiddleCenterPane_A,.MiddleLeftPane_B,.MiddleCenterPane_B,.MiddleRightPane_B,.FooterPane_A,.FooterPane_B,.FooterPane_C,.FooterPane_D {
width: auto !important;
}

.DNNEmptyPane {
width: 0;
margin: 0;
padding: 0;
}
/* =E Pane */

pane的结构是很灵活的,没有任何绝对的像素,都采用白分比以及最小宽高组成。如果不往pane加内容pane也就不显示。

这个大大的方便了CSS的编码,只要做少量的修改既可以增加和完善pane,并且可以不断的重复使用。

在DNN中的另外一个优势是container,在网页布局中我们总是使用各种类似容器的东西承载各种内容。

就像一个小盒子,每个盒子都有标题,背景,然后有一个内容框。做这样一个框框放置于pane结构中。选好适合的pane效果就排出来了。

container的代码相对简单,这里就不全部放出了。

大致就是这些,在DNN中的MENU使用了jquery的一个jdmenu的控件,这个给导航条的建立提供了很大的方便,这一点也是很方便的,限于篇幅以后附上。

Tags: ,

Comments are closed.

回到 顶部 ↑