ASP.NET MasterPage布局解析-CSDN博客

本文链接：https://blog.csdn.net/qq_42140101/article/details/89635140

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>
    <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .style1
        {
            width: 100%;
            height: 297px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class ="bar">
        <div class="item">项目一</div>
        <div class="item">项目二</div>
        <div class="item">项目三</div>
        <div class="item">项目四</div>
    </div>
    <div class="img">

    </div>
    
    <div class="content">
         <div class="con1">

             <table class="style1">
                 <tr>
                     <td style="text-align: center">
                         <asp:Label ID="Label1" runat="server" Text="用户名："></asp:Label>
                     </td>
                     <td>
                         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                     </td>
                 </tr>
                 <tr>
                     <td style="text-align: center">
                         <asp:Label ID="Label2" runat="server" style="text-align: center" Text="密码："></asp:Label>
                     </td>
                     <td>
                         <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="2" style="text-align: center">
                         <asp:Button ID="Button1" runat="server" Height="38px" 
                             style="text-align: center" Text="登录" Width="113px" />
                     </td>
                 </tr>
             </table>

        </div>
        <div class="con2">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                <p>
                    &nbsp;</p>
            </asp:ContentPlaceHolder>
        </div>
    </div>
    <div class="foot">
        <div class="it">
            <a href="">百度</a>
            <a href="">新浪</a>
            <a href="">微博</a>
            <p>版权所有 @2019 违版必究</p>
        </div>
    </div>
    </form>
</body>
</html>

body {
}
.img
{
    background-image:url('../images/123.png');
    width:800px;
    height:200px;
    margin :0 auto;
}
.bar
{
    background-color:#EEE685;
    width:800px;
    height:100px;
    margin:0 auto;
}
.bar .item
{
    line-height :100px;
    text-align:center;
    float:left;
    margin:0 10px;
    width:20%;
}
.content
{
    width:800px;
    height:300px;
    margin:0 auto;
}
.content .con1
{
    width:50%;
    margin:0 auto 0 0;
    height :300px;
    background-color:#71C671;
    float:left;
}
.content .con2
{
    width:50%;
    margin:0 0 0 auto;
    height:300px;
    background-color:#FF69B4;
    float:left;
}
.foot
{
    width:800px;
    height:100px;
    margin:0 auto;
    background-color:#EEE685;
}
.foot .it
{
    
    text-align:center;
    line-height :100px;
    margin:0 auto;
}
.foot .it a
{
    margin:0 10px;
}

母版页面及css样式