1、1. 创建页头部小商小贩小买卖蓝色紫色红色天蓝色橙色淡绿色2. 创建样式表文件 ,header.css, 通过语句，引入样式表/*头部样式开始*/#headerwidth:800px; height:80px; border: 1px solid #AAAAAA;margin:10px auto; background:#3B5998;/*logo 样式开始*/#logo float:left; margin:0 0 0 10px; color:#FFF; font-size:3em; font-weight:700;line-height:80px;/*切换皮肤样式*/#skin float
2、:right; margin:10px; padding:4px; width:120px; list-style:none; border: 1px solid #CCCCCC; background:#FFF;#skin li float:left; margin-right:4px; width:15px; height:15px; text-indent:-9999px; overflow:hidden; display:block; cursor:pointer; background-image:url(/images/theme.gif); #skin_0 background-
3、position:0px 0px; #skin_1 background-position:15px 0px; #skin_2 background-position:35px 0px; #skin_3 background-position:55px 0px; #skin_4 background-position:75px 0px; #skin_5 background-position:95px 0px; #skin_0.selected background-position:0px 15px; #skin_1.selected background-position:15px 15p
4、x; #skin_2.selected background-position:35px 15px; #skin_3.selected background-position:55px 15px; #skin_4.selected background-position:75px 15px; #skin_5.selected background-position:95px 15px; 3. 添加“导航栏”首 页衬 衫短袖衬衫长袖衬衫无袖衬衫卫 衣开襟卫衣套头卫衣裤 子休闲裤卡其裤牛仔裤短裤联系我们4. 添加样式表 /*导航样式开始*/#navigation width:784px; padd
5、ing:8px; margin:8px auto; /*居中*/background:#3B5998;height:18px;#navigation ul li float:left; margin-right:14px;position: relative ;z-index:100;#navigation ul li a display:block;padding:0 8px; background:#EEEEEE; font-weight:700;#navigation ul li a:hover background:none; color:#fff;#navigation ul li
6、ulbackground-color: #88C366;position: absolute;width: 80px;overflow:hidden;display:none;#navigation ul li:hover ulbackground-color: #88C366;position: absolute;width: 100px;display:block;#navigation ul li ul liborder-bottom: 1px solid #BBB;text-align: left;width: 100%;/*导航样式结束*/* margin:0; padding:0;
7、 word-wrap:break-word; word-break:break-all; body background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; a color:#0287CA; text-decoration:none; a:hover text-decoration:underline; ul, li list-style:none; img border:none; h1, h2, h3, h4, h5, h6 font-size:1em; html overflow:-moz-scr
8、ollbars-vertical; /* 在Firefox下始终显示滚动条*/5. 添加代码 响应代码using System;using System.Collections.Generic;using System.Linq;using System.Xml.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Text;pu
9、blic partial class Default2 : System.Web.UI.PageHttpCookie ck = new HttpCookie(“username“);protected void Page_Load(object sender, EventArgs e)if (Response.Cookies“username“.Value = null)username.Visible = true;password.Visible = true;login.Visible = true;Label1.Text = “用户名：“;Label2.Text = “密码：“;els
10、eusername.Visible = false;password.Visible = false;login.Visible = false;Label1.Text = “欢迎您，用户：“ + Response.Cookies“username“.Value + “;protected void login_Click1(object sender, EventArgs e)if (username.Text.ToString() = “ | password.Text.ToString() = “)Response.Write(“alert(用户名或密码不能为空！);“);else/ 得
11、到XDocument对象根结点下所有XDocument doc = XDocument.Load(Server.MapPath(“user.xml“);var xml = doc.Root.Elements(“User“);foreach (XElement xe in xml) / 循环操作所有User子结点。 / 通过Xml_Linq结点的id属性来判断操作的正确结点 if (xe.Attribute(“username“).Value = username.Text.ToString() ck.Expires = DateTime.Now.AddMinutes(10);ck.Domain
12、 = “http:/localhost:3618“;Response.Cookies.Add(ck);username.Visible = false;password.Visible = false;login.Visible = false;Label1.Text = “欢迎您，用户：“ + ck.Value + “;Label2.Text = “您卡上的余额为：“ + xe.Attribute(“money“).Value + “;protected void buyList_Click(object sender, EventArgs e)Response.Cookies“userna
13、me“.Value = ck.Value;Response.Redirect(“myBuyList.aspx“);6. 数据文件 。XML ，-user.xml 7. 添加主题体最新动态甜美宽松毛衣今秋一定红 .秋装百搭小马甲不到 50 元.修身韩版小西装万人疯抢 .夏末雪纺店主含泪大甩卖 .瑞丽都疯狂推荐的秋装.48 元长款针织小开衫卖疯啦.长袖雪纺衫单穿内搭都超美.产品分类衬衫短袖衬衫长袖衬衫卫衣开襟卫衣套头卫衣裤子休闲裤免烫卡其裤牛仔裤短裤12345新款上市免烫高支棉衬衣 1$120.00免烫斜纹衬衣 $129.00棉小方格正装衬衣 $129.00小米兰格衬衣蓝色 $129.00免烫高支
14、棉衬衣 2$120.00免烫斜纹衬衣 $129.00棉小方格正装衬衣 $129.00小米兰格衬衣蓝色 $129.00免烫高支棉衬衣 3$120.00免烫斜纹衬衣 $129.00棉小方格正装衬衣 $129.00小米兰格衬衣蓝色 $129.008. 添加样式表 detail.css#contentmargin:10px auto;width: 800px;/*左侧样式*/.content_leftbackground:#eee;border: 1px solid #AAAAAA;width:200px;float:left;margin-right:10px; .global_module pos
15、ition:relative;background:#EEEEEE;padding-bottom:8px;.module_up_down position:absolute; top:9px; right:10px; cursor:pointer;.global_module h3 height:26px; background:#3B5998;color:#FFF; line-height:26px; text-indent:6px;.content_left .news ul padding:5px 0 5px 15px; .content_left .procatalog ul padd
16、ing:5px 0 5px 15px; /*最新动态 样式*/.content_left .scrollNewswidth:200px;height:85px;line-height:20px;overflow:hidden;background:#FFFFFF;.content_left .scrollNews liheight:20px;/*产品分类样式*/.procatalog .m-treeviewbackground:#FFFFFF;.procatalog .m-treeview li span cursor: pointer;.procatalog .m-treeview li.m
17、-expanded padding-left:16px;background:url(/images/treeview-expanded.gif) no-repeat 0 0;.procatalog .m-treeview li.m-expanded ul li list-style-image: url(/images/treeview-item.gif);.procatalog .m-treeview li.m-collapsed padding-left:16px;background:url(/images/treeview-collapsed.gif) no-repeat 0 0;.
18、procatalog .m-treeview li.m-collapsed uldisplay:none;/*右侧样式*/.content_rightbackground:#eee;border : 1px solid #AAAAAA;width: 586px;float:left;/*滚动广告样式*/.content_right .ad margin-bottom:10px;width:586px; height:150px; overflow:hidden;position:relative;.content_right .slider,.content_right .numpositio
19、n:absolute;.content_right .slider li list-style:none;display:inline;.content_right .slider img width:586px; height:150px;display:block;.content_right .num right:5px; bottom:5px;.content_right .num lifloat: left;color: #FF7300;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family:
20、 Arial;font-size: 12px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 1px solid #FF7300;background-color: #fff;.content_right .num li.oncolor: #fff;line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;background-color: #FF7300;font-weight: bold;/*新款上市样式*/.cont
21、ent_right .prolist position:relative; height: 220px;margin-bottom:10px; overflow:hidden; border: 1px solid #AAAAAA;background:#FFFFFF;.content_right .prolist .prolist_contentposition:absolute; width:1800px;top:26px; left:0px;padding:20px 0 0 8px;.content_right .prolist ul margin-bottom:10px; float:l
22、eft;height: 220px;.content_right .prolist ul li float:left;display:inline;text-align:center;margin-right:22px; .content_right .prolist ul li span display:block;overflow:hidden; .content_right .prolist ul li img display:block; width:124px; height:124px; background:#EEE; border:0;.module_left_right po
23、sition:absolute; top:5px; right:10px; cursor:pointer;/* tooltip */#tooltipposition:absolute;border:1px solid #333;background:#f7f5d1;padding:1px;color:#333;display:none;/* imgHover */span.imageMaskbackground:white; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;span.imageOverbackground:url(/images/zoom.gif) no-repeat 50% 50%;filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity: 0.6;opacity: 0.6;9. 添加广告图片滚动效果
