ASP.NET---母板应用

最终效果

母板代码

<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;
}

ASP.NET---母板应用相关推荐

asp.net母板使用注意
1.母板中的路径问题如果你使用了母板,同时母板里面又使用了和"路径"有关的标签,比如头部: <script type="text/javascript" ...
Spring.NET学习笔记——前言
Spring.NET是一个应用程序框架,其目的是协助开发人员创建企业级的.NET应用程序.它提供了很多方面的功能,比如依赖注入.面向方面编程(AOP).数据访问抽象及ASP.NET扩展等等.Sprin ...
Step by Step WebMatrix网站开发之二：使用WebMatrix（3）
要学好用好一个工具,最好的办法是从模板入手,因而今天的任务就是从模板建立一个网站,然后分析一下模板的构成. 在WebMatrix开始页,单击"从模板创建网站",然后选择" ...
［翻译］在Asp.net 2.0中操作数据：：母板页和站点导航
在Asp.net 2.0中操作数据::母板页和站点导航英文原文 | 下载示例代码(C#) | 翻译进度 | 英文教程目录导言通常,用户友好的个性化站点都有着一致的,站点统一的页面布局和 ...
ASP.NET2.0数据操作之母板页和站点导航
http://www.anqn.com/aspx/2009-06-21/a09111817.shtml
Scott的ASP.net MVC框架系列文章之四：处理表单数据（2）
前几周我发表了一系列文章介绍我们正在研究的ASP.NET MVC框架.ASP.NET MVC框架为你提供了一种新的开发Web应用程序的途径,这种途径可以让应用程序变得更加层次清晰,而且更加有利于对代码 ...
MVC 之架构的基本原理及Asp.Net实现MVC
一.引言许多Web应用都是从数据存储中检索数据并将其显示给用户.在用户更改数据之后,系统再将更新内容存储到数据存储中.因为关键的信息流发生在数据存储和用户界面之间,所以很多应用将数据和用户界面这两部 ...
提供第三种代码生成方式——通过自定义BuildProvider为ASP.NET提供代码生成
2019独角兽企业重金招聘Python工程师标准>>> 之前写了一些关于代码生成的文章,提供了两种不同方式的代码生成解决方案,即CodeDOM+Custom Tool和T4.对于AS ...
ASP.NET用户控件的创建和使用
ASP.NET用户控件的创建和使用 1. Web用户控件概述 Web用户控件是一种服务器控件,它与ASP.NET页面有着同样的所见即所得的特点,并以.ascx为扩展名存储为文本文件,同样具有自己的界面 ...
asp.net基础复习(二)——母版页
1. 概述母版页中包含的是页面公共部分,即网页模板.因此,在创建示例之前,必须判断哪些内容是页面公共部份. 使用 ASP.NET 母版页可以为应用程序中的页创建一致的布局.单个母版页可以为应用程序中 ...

ASP.NET---母板应用

母板代码

CSS文件

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

ASP.NET---母板应用相关推荐

最新文章

热门文章

ASP.NET---母板应用

母板代码

CSS文件

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

ASP.NET---母板应用相关推荐

最新文章

热门文章

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