Asp.net母版和使用母版的窗体

1.效果截图和思路

思路：首先在Adobe Dreamweaver CS6写好Css和Html。

然后添加母版页。再添加使用母版页的窗体。

母版的好处：母版里放置的是DIV布局，不用每个页面重复的写DIV布局，使用母版的页面可以共用一个DIV布局。甚至可以共用一个Css+Div模板。

2.母版

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.master.cs" Inherits="WebForm1.Site2" %>

<!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">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="title">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>

       <div id="top">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>

       <div id="left">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>

       <div id="right">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>

 
    </form>
</body>
</html>

对应的简单的DIV布局示意图

3.使用母版的窗体

首先添加一个Css文件StyleSheet1.css进工程

body{
    margin: 0 auto; 
    text-align:center;
    800px;
    
}
    
div#title{
    
    800px;
    height:130px;
    
}

div#top{
    
    800px;
    height:200px;
}


div#left{
    
    25%;
    height:300px;
    float:left;
}

div#right{
    
    75%;
    height:300px;
    float:left;
}

添加使用母版的窗体

引用CSS文件

<%@ Page Title="" Language="C#" MasterPageFile="~/Site2.Master" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebForm1.WebForm3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel=Stylesheet href=StyleSheet1.css />
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<img src="./Image/title.png"  width="770px"
    height="120px" />
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<img src="./Image/top.png"  width="770px"/>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder3" runat="server">
<img src="./Image/q1.png" />
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder4" runat="server">
<img src="./Image/q2.png" />
</asp:Content>