实验二 ASP.NET 4.5 网站开发基础
一、实验名称：ASP.NET 4.5 网站开发基础
二、实验内容：
1. 建立一个描述MyPetShop网站信息的XHML5文件
<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="MyPetShop,XHTML5"/>
<title></title>
<style type ="text/css">
aside{float:left ;width :15%;}
section{float:right ;width :85%;}
footer{clear :both ;}
</style>
</head>
<body>
<header>
<img alt ="MyPetShop" src ="F:/web程序设计/Experiment1/Experiment1/2013.gif" />
</header>
<aside>
<nav style ="background-color:#C0C0C0">
<a href ="HTML5.html" >介绍</a><br />
<a href ="HTML5.html" >数据库设计</a>
</nav>
</aside>
<section>
<h3>MyPetShop</h3>
<article>
MyPetShop是本书提供的一个综合实例，用来展示ASP.NET 4.5网络开发技术。
</article>
<article>
<h4>MyPetShop</h4>
MyPetShop包括前台商品浏览、用户管理、购物车、订单结算和后台管理等模块。
</article>
</section>
<footer style ="background-color:#C0C0C0">Copyright 2014 MyPetShop</footer>
</body>
</html>
2. 利用table实现页面布局
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TableLayout.aspx.cs" Inherits="TableLayout" %>
<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.auto-style1
{
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="width:100%">
<tr>
<td rowspan="2">
<asp:Image ID="ImgLogo" runat="server" ImageUrl="~/2013.gif" Width="160px" />
</td>
<td sthle ="text-align:center;background-color:#99CCFF">
<asp:LinkButton ID="lnkbtnDefault" runat="server">首页</text align centerasp:LinkButton>
</td>
<td sthle ="text-align:center;background-color:#99CCFF">
<asp:LinkButton ID="lnkbtnReset" runat="server">个性重置</asp:LinkButton>
</td>
<td sthle ="text-align:center;background-color:#99CCFF">
<asp:LinkButton ID="lnkbtnRegister" runat="server">注册</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="3" style="background-color:#CCFFFF">登录状态</td>
</tr>
<tr>
<td colspan="4"style="background-color:#33CCCC">您的位置：</td>
</tr>
</table>
</div>
</form>
</body>
</html>
3. 利用div实现页面布局
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DivLayout.aspx.cs" Inherits="DivLayout" %>
<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="top">
<div id="logo_navi_stat">
<div id="logo"style="float :left ;width :30%">
<asp:Image ID ="imgLogo" runat="server" ImageUrl="~/Images/logo.gif" />
</div>
<div id="navigation"style="background-color:#99CCFF;height:30px;">
<asp:LinkButton ID="lnkbtnDefault" runat="server">首页</asp:LinkButton>
|
<asp:LinkButton ID="lnkbtnReset" runat="server">个性重置</asp:LinkButton>
|
<asp:LinkButton ID="lnkbtnRegister" runat="server">注册</asp:LinkButton>
</div>
<div id="status"style="background-color:#CCFFFF;height:30px;">登陆状态</div>
</div>
<div id="position"style="background-color :#33CCCC">您的位置：</div>
</div>
</form>
</body>
</html>
4. 建立独立的.css文件
（1）设置样式
table{width :100%;}
.navigation{text-align :center ;background-color:#99CCFF;}
.status{background-color:#CCFFFF;}
.position{background-color:#33CCCC;}
#logo{float :left ;width :30%;}
#navigation{background-color:#99CCFF;height :30px;}
#status{background-color:#CCFFFF;height :30px;}
#navigation{background-color:#99CCFF;height :30px;}
#position{background-color:#33CCCC;}
（2）将样式应用于表格布局
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TableCSS.aspx.cs" Inherits="TableCSS" %>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论