Cs Tip12: 簡單的站底

 

譯自: http://soup.co.za/weblog/archive/2006/04/02/CS-Tip-12_3A00_-Simple-Sitewide-Footers.aspx

在Cs Tip02(中文, 英文)中我們介紹了簡單的站點頭部，現在我們來介紹怎樣做一個簡單的站點底部

查看Demo

Cs中有一個非常有用的Genernic Control可以來包含我們我Footer, 你可以簡單的修改
控件地址: <CS:GenericControl SkinName = "Foo.ascx" runat = "Server" />

您要先打開Themes/default./skins/Skin-GenericControl.ascx.另存爲Skin-CustomFooter.ascx

插入代碼

<div class="customfooterright">
<CS:RepeaterBar ID="RepeaterBar2" runat="server">
<SkinTemplate>
<asp:Repeater EnableViewState="false" runat="server" id="Menu">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><a href="<%# DataBinder.Eval(Container.DataItem, "NavigateUrl") %>"><%# DataBinder.Eval(Container.DataItem, "Text") %></a></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</SkinTemplate>
</CS:RepeaterBar>
<p>Terms and Conditions Apply. We own all your data</p>
</div>

如果您要在每個頁面都加上這個控件，還需要在Themes/default/Masters/Master.ascx 中添加

<CS:MPRegion id="BodyFooterRegion" runat="server" >
<CS:GenericControl SkinName = "Skin-CustomFooter.ascx" runat="Server" id="CustomFooter1" />
<CS:Footer runat="server" id="Footer1"/>
</CS:MPRegion>

Css文件:

修改Common.Css, 這個修改對應的Master.ascx對應的ID樣式

#CommonFooter{
color: #FFF;
font-size: 11px;
text-align: left;
background-color: #333;
padding: 8px 20px 8px 20px;
}

#CommonFooter a{
color: #FFF;
}

這個修改Skin-CustomFooter.ascx

.customfooterright{
text-align: right;
float: right;

}
.customfooterright ul {
margin: 0;
padding: 0;
list-style: none;
}

.customfooterright li {
display: inline;
margin: 0;
padding: 0 0 0 10px;
}

ok 刷新一下頁面就可以看到對應的效果了