1.套用别人的CSS
新建一个样式表！将其 <style type="text/css">内的代码 复制到该样式表
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #F3FAFF;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* =-=-=-=-=-=-=-[Menu One]-=-=-=-=-=-=-=- */
#menu {
200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border- 1px;
margin: 10px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(menu1.gif);
padding: 8px 0 0 10px;
}
#menu li a:hover, #menu li #current {
color: #26370A;
background: url(menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu li a:active {
color: #26370A;
background: url(menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}
2.将CSS 样式表中的图片添加到项目中，并将更改项目中样式表中的图片路径，添加样式到项目中。
3.在项目中添加一DataList控件，并在后面添加如下代码
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
ShowCategories();
ShowProducts();
}
}
private void ShowCategories()
{
DataTable tb = NorthWind.DBHelp.GetTable("select * from 类别");
this.DataList1.DataSource = tb;
this.DataList1.DataBind();
}
private void ShowProducts()
{
if (Request.QueryString["categoryID"] != null)
{
int categoryID = int.Parse(Request.QueryString["categoryID"].ToString());
DataTable dt = NorthWind.DBHelp.GetTable("SELECT 产品ID from 产品 where 类别ID=" + categoryID);
this.DataList2.DataSource = dt;
this.DataList2.DataBind();
}
}
4.前台代码如下 (控件Repeater也一样，做如下处理便得到其Repeater效果)
<body>
<form id="form1" runat="server">
<div style="float:left">
<asp:DataList ID="DataList1" runat="server" RepeatLayout="Flow">
<HeaderTemplate>
<div id="menu3" >
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><a href='<%# Default.aspx?nameID="+Eval("类别ID") %>' ><%# Eval("类别名称") %></a></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</FooterTemplate>
</asp:DataList>
</div>
<div style="float:left"> //添加新的右边显示的DataList
<asp:DataList ID="DataList1" runat="server" RepeatLayout="Flow">
//在该控件模板中添加设计好了的用户控件 代码如5
<uc1:Product ID="Product1" runat="server" ProductID='<%# Eval("产品ID") %>'/>
</asp:DataList>
</div>
</form>
</body>
5.创建并设置 自定义模板 代码如下
public partial class UC_Product : System.Web.UI.UserControl
{
private int productID = 1;
public int ProductID
{
get { return productID; }
set { productID = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
//if (!Page.IsPostBack)
{
//获取编号为ProductID的产品信息
DataTable dt = NorthWind.DBHelp.GetTable("SELECT Product.产品ID, Product.产品名称, Supply.公司名称, Supply.城市, Category.类别名称, Category.图片, Product.单位数量, Product.单价, Product.库存量, Product.中止 FROM Category INNER JOIN Product ON Category.类别ID = Product.类别ID INNER JOIN Supply ON Product.供应商ID = Supply.供应商ID where 产品ID=" + productID);
//显示出来
this.Image1.ImageUrl = "../" + dt.Rows[0]["图片"];
this.Label1.Text = dt.Rows[0]["产品名称"].ToString();
this.Label2.Text = dt.Rows[0]["单位数量"].ToString();
this.Label3.Text = dt.Rows[0]["单价"].ToString();
this.Label4.Text = dt.Rows[0]["公司名称"].ToString();
this.Label5.Text = dt.Rows[0]["库存量"].ToString();
}
}
}