当前位置：文江博客话题详情

使用 DIV + 的布局语法CSS？

发布于 2024-09-13 16:44:03 字数 139 浏览 4 评论 0原文

如何使用 div 将窗口拆分为左窗格以进行树视图导航，从而获得包含 3 个部分的 asp.net 母版页。右侧的主窗口将分为横幅类型顶部 div 和其下方的主窗口 div，用于主内容窗口，我希望在母版页实现中加载子页面。

有人能给我一个语法示例吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷离° 2024-09-20 16:44:04

我可能会选择这样的东西：

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>

放入背景颜色只是为了区分它们，祝你好运！

I'd probably go for something like this:

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>

Put in background colours just to tell them apart, good luck!

回复收藏 0 原文

離殇 2024-09-20 16:44:04

基于 Stann0rz 答案，母版页和内容视图如下所示。此示例是使用 ASP.NET MVC 完成的，但非常适用于传统的 ASP.NET Webform。

主页：

<%@ 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>

Building upon Stann0rz answer, here is what a master page and content view could look like. This example was done using ASP.NET MVC but would apply very closely to traditional ASP.NET Webforms.

MASTER PAGE:

<%@ 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>

CONTENT VIEW:

<%@ 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 原文

~没有更多了~