最终效果

母板代码

<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .style1
        {
            width: 100%;
            margin-bottom: 0px;
        }
        .style2
        {
            height: 86px;
            text-align: left;
        }
        .style3
        {
            height: 95px;
            text-align: left;
        }
        .style4
        {
            height: 87px;
            text-align: center;
        }
        .style5
        {
            height: 86px;
            text-align: right;
            width: 194px;
        }
        .style6
        {
            height: 95px;
            text-align: right;
            width: 194px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="bar">
            <div class="item"><a href="">首页</a></div>
            <div class="item"><a href="">资讯</a></div>
            <div class="item"><a href="">下载</a></div>
            <div class="item"><a href="">更多</a></div>
        </div>
        <div class="img">
        </div>

        <div class="con">
            <div class="con1">
                
                <table class="style1">
                    <tr>
                        <td class="style5">
                            <asp:Label ID="Label1" runat="server" style="text-align: right" Text="用户名："></asp:Label>
                        </td>
                        <td class="style2">
                            <asp:TextBox ID="TextBox1" runat="server" style="margin-left: 0px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="style6">
                            <asp:Label ID="Label3" runat="server" Text="密码："></asp:Label>
                        </td>
                        <td class="style3">
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="style4" colspan="2">
                            <asp:Button ID="Button1" runat="server" Height="22px" Text="登录" Width="159px" />
                        </td>
                    </tr>
                </table>
                
            </div>
            <div class="con2">
                <asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            
        </div>

        <div class="foot">
            <div class="it">
                <a href="">百度</a>
                <a href="">新浪</a>
                <a href="">知乎</a>
            </div>
            <div class="it">
            版权所有 翻版必究
            </div>
        </div> 
    </div>
    </form>
</body>

CSS文件

body 
{
}
.img
{
    background-image:url('../img/1234.png');
    width:1000px;
    height:200px;
    margin:0 auto;
}
.bar
{
    background-color:#FFB6C1;
    width:1000px;
    height:50px;
    margin:0 auto;
}
.bar .item
{
    width:25%;
    height:50px;
    line-height:50px;
    text-align:center;
    float:left;
}
.con
{
    width:1000px;
    height:300px;
    margin:0 auto;
}
.con1
{
    width:50%;
    height:300px;
    margin:0 auto 0 0;
    background-color:#F5F5DC;
    float:left;
}
.con2
{
    width:50%;
    height:300px;
    margin:0 0 0 auto;
    background-color:#FA8072;
    float:left;
}
.foot
{
    background-color:#C0C0C0;
    width:1000px;
    height:100px;
    margin:0 auto;
}
.foot .it
{
    margin:0 auto;
    line-height:50px;
    text-align:center;
}
.foot .it a
{
    margin:0 10px;
}

只实现 图片+导航栏+页脚（内容不分块）的代码

//母版代码
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="img">

        </div>
        <div class="bar">
            <div class="item"><a href="">比赛</a></div>
            <div class="item"><a href="">状态</a></div>
            <div class="item"><a href="">题库</a></div>
            <div class="item"><a href="">题库</a></div>
        </div>
        <div class="con">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="foot">
            <div class="it">
                <a href="">百度</a>
                <a href="">新浪</a>
                <a href="">微博</a>
            </div>
        </div>
    </div>
    </form>
</body>

//css文件
body 
{
    
}
.img
{
    background-image:url('../images/23725.jpg');
    width:600px;
    height:200px;
    margin:0 auto;
}
.bar
{
    background-color:#EEE685;
    width:600px;
    height:50px;
    margin:0 auto;
}
.bar .item
{
    width:25%;
    height:50px;
    line-height:50px;
    text-align:center;
    float:left;
    
}
.con
{
    width:600px;
    height:300px;
    margin:0 auto;
}
.foot
{
    background-color:#EEE685;
    width:600px;
    height:100px;
    margin:0 auto;
}
.foot .it
{
    margin:0 auto;
    line-height:100px;
    text-align:center;
}
.foot .it a
{
    margin:0 10px;
}