2010-08-09 18 views
0

如何獲得一個asp.net的母版頁,其中有三個部分,使用div將窗口拆分爲左窗格以進行樹視圖導航。右側的主窗口將被劃分爲一個橫幅類型的頂部div和一個主窗口div,用於主要內容窗口,我希望在主頁面實現中加載子頁面。語法爲layouit使用DIV + CSS?

有人能給我一個語法的例子嗎?

回答

3

我可能會去這樣的事情:

CSS:

body { 
    margin: 0; 
    padding: 0; 
} 
div#left { 
    display: inline; 
    float: left; 
    height: 100%; 
    width: 30%; 
    background: #A00; 
} 
div#top_right { 
    display: inline; 
    float: right; 
    height: 30%; 
    width: 70%; 
    background: #000; 
} 
div#bottom_right { 
    display: inline; 
    float: left; 
    height: 70%; 
    width: 70%; 
    background: #CCC; 
} 

HTML:

<div id="left"> 
</div> 
<div id="top_right"> 
</div> 
<div id="bottom_right"> 
</div> 

放入背景顏色只是告訴他們分開,祝你好運!

+0

如何做這些東西使得鬥智鬥勇的方式進入母版頁? 以及如何在母版頁中獲得鏈接我想在頂部div加載各種.aspx頁到內容div部分。我使用內容窗格而不是div嗎? – kacalapy 2010-08-09 13:44:19

+1

您是否查看了http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx以定義母版頁及其內容? – Stann0rz 2010-08-09 14:01:44

1

建立在Stann0rz答案,這裏是一個母版頁和內容視圖可能看起來像。這個例子是使用ASP.NET MVC完成的,但會非常接近傳統的ASP.NET Webforms。

母版頁:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<style type="text/css"> 
    body { 
     margin: 0; 
     padding: 0; 
    } 
    div#left { 
     display: inline; 
     float: left; 
     height: 100%; 
     width: 30%; 
     background: #A00; 
    } 
    div#top_right { 
     display: inline; 
     float: right; 
     height: 30%; 
     width: 70%; 
     background: #000; 
    } 
    div#bottom_right { 
     display: inline; 
     float: left; 
     height: 70%; 
     width: 70%; 
     background: #CCC; 
    } 
</style> 
</head> 
<body> 
    <div id="left"> 
     <ul> 
      <li>Navigation Item 1</li> 
      <li>Navigation Item 2</li> 
     </ul> 
    </div> 
    <div id="top_right"> 
     <span>Tab 1</span> 
     <span>Tab 2</span> 
    </div> 
    <div id="bottom_right"> 
     <asp:ContentPlaceHolder ID="BottomRightContent" runat="server"> 
    </div> 
</body> 
</html> 

內容視圖:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="BottomRightContent" runat="server"> 
    [Bottom-right content goes here] 
</asp:Content> 
+0

我如何做到這一點,如果我有4個鏈接到內容頁面,我可以讓他們加載右下方的窗格內容? 即時通訊尋找具有類似於maser頁面部分頂部標題中的標籤的鏈接,並讓它控制將其他.aspx頁面加載爲頁面主div/content部分中的內容。 所以要有一個主頁3個部分,主要部分預先填充其他頁面,其中包含內容。 – kacalapy 2010-08-09 14:55:57

+0

如果我正確理解您的問題,您需要左側導航欄和頂部的標籤頁保持不變。唯一改變的是BottomRightContent中的內容。 您可以簡單地通過將導航和選項卡HTML直接添加到主頁面來完成此操作。那麼每個內容頁面將只包含對BottomRightContent的引用。 – 2010-08-09 16:08:19

+0

編輯代碼示例以在MasterPage中具有靜態導航和選項卡內容。 – 2010-08-09 16:12:51