[英]syntax for layouit using DIV + CSS?
如何使用div將asp.net的主頁分為3個部分,以將窗口拆分為用於樹狀視圖導航的左窗格。 右側的主窗口將被划分為標題類型top div和其下的main窗口div,用於主要內容窗口,在該窗口中我希望子頁面加載到母版頁實現中。
有人可以給我一個語法示例嗎?
我可能會選擇這樣的東西:
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>
放上背景色只是為了告訴他們,祝您好運!
基於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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.