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;
width:800px;
}
div#title{
width:800px;
height:130px;
}
div#top{
width:800px;
height:200px;
}
div#left{
width:25%;
height:300px;
float:left;
}
div#right{
width:75%;
height:300px;
float:left;
} 添加使用母版的窗體
引用CSS檔案
<link rel=Stylesheet href=StyleSheet1.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> 轉載于:https://www.cnblogs.com/Energy240/p/3653088.html