синтаксис для Layouit с использованием DIV + CSS? - PullRequest
Новая
       4

синтаксис для Layouit с использованием DIV + CSS?

0 голосов
/ 09 августа 2010

Как я могу получить главную страницу для asp.net с 3 разделами, используя div, чтобы разбить окно на левую панель для навигации в виде дерева.Главное окно справа будет разделено на верхний div типа баннера и основное окно div под ним для основного окна контента, где я хочу, чтобы дочерние страницы загружались в реализацию главной страницы.

может кто-нибудь дать мнеПример синтаксиса?

Ответы [ 2 ]

3 голосов
/ 09 августа 2010

Я бы, наверное, выбрал что-то вроде этого:

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>

Вставьте фоновые цвета, чтобы отличить их друг от друга, удачи!

1 голос
/ 09 августа 2010

Опираясь на ответ Stann0rz, вот как может выглядеть главная страница и представление контента. Этот пример был сделан с использованием ASP.NET MVC, но он очень близко применим к традиционным веб-формам ASP.NET.

ОСНОВНАЯ СТРАНИЦА: 

<%@ 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...