使用母板页实现一个BabyHousing网站

最新推荐文章于 2020-06-30 13:14:22 发布

wangjingjing1014

最新推荐文章于 2020-06-30 13:14:22 发布

阅读量5k

点赞数 1

本文链接：https://blog.csdn.net/wangjingjing1014/article/details/8426534

版权

-------Site1.Master-------

<%@ Master Xlanguage="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="BabyHouse.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
     <div id="container">
   <div class="header">
<h1><span>Baby Housing</span></h1>
<div class="logo"><img src="images/logo.gif" /></div>
<ul class="mainNavigation">
<li class="current"><a href="index.aspx"><strong>网站首页</strong></a></li>
<li><a href="Aboutchanpin.aspx"><strong>产品介绍</strong></a></li>
<li><a href="xinxi.aspx"><strong>信息</strong></a></li>
<li><a href="sale.aspx"><strong>畅销排行榜</strong></a></li>
</ul>
<ul class="topNavigation">
<li><a href="#"><span>关于我们</span></a></li>
<li><a href="#"><span>联系方式</span></a></li>
<li><a href="#"><span>意见建议</span></a></li>
</ul>
<ul class="accountBox">
<li ><a href="#" class="login"><span>登录帐号</span></a></li>
<li ><a href="#" class="cart"><span>购物车</span></a></li>
</ul>
</div>


       <div class="content">
<div class="mainContent">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">


  <div class="recommendation img-left">
   <h2>今日推荐</h2>
   <a href="#"><img src="images/ex4.jpg" width="210" height="140"/></a>
   <p>七星瓢虫图案4件套，采用超柔和进口面料，手感极其柔软，舒适。采用高支高密精梳纯棉织物作为面料，手感柔软舒适，经久耐用，多款图案风格能够和不同家居设计完美搭配。</p>
   <p>缩水率以及退色率均符合国家检测标准，绿色环保。30度以下水温洗衣机弱洗，中性洗涤剂，中温熨烫。 </p>
  </div>
  <div class="recommendation">
   <h2>最受欢迎</h2>
   <div class="img-right"><a href="#"><img src="images/ex5.jpg" width="210" height="140"/></a></div>
   <p>九孔棉冬被选用优质涤纶面料，手感柔软、花型独特，填充料采用高科技的聚酯螺旋纤维精致而成，该纤维细如发，弹性极强。且饱含空气，恒温性强，使您倍感轻软舒适。经特殊工艺加工后，长期保持松软如新，为您提供健康舒适的睡眠需要。 </p>
  </div>
  <div class="recommendation multiColumn">
   <h2>分类推荐</h2>
   <ul>
    <li><a href="#"><img src="images/ex1.jpg" width="120" height="120"/></a>
     <p>休闲款式，柔软富有弹性。舒服自然，飘逸聪颖。</p></li>
    <li><a href="#"><img src="images/ex2.jpg" width="120" height="120"/></a>
     <p>棒球套装，柔软富有弹性。舒服自然，飘逸聪颖。</p></li>
    <li><a href="#"><img src="images/ex3.jpg" width="120" height="120"/></a>
     <p>丝制面料，柔软富有弹性。舒服自然，飘逸聪颖。</p></li>
   </ul>
            </div>
              </asp:ContentPlaceHolder>
  </div>

</div>
<div class="sideBar">
  <div class="searchBox">
   <span>
                <asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox> <asp:Button ID="submit" runat="server" Text="查询商品" />
   </span>
  </div>
  <div class="menuBox">
   <span>
   <h2>产品分类</h2>
   <ul>
    <li><a href="#">0-1岁玩具</a></li>
    <li><a href="#">2-3岁玩具</a></li>
    <li><a href="#">4-6岁玩具</a></li>
    <li><a href="#">0-1岁服装</a></li>
    <li><a href="#">2-3岁服装</a></li>
    <li><a href="#">4-6岁服装</a></li>
   </ul>
   </span>
  </div>
  <div class="extraBox">
  <span>
   <h2>特别提示</h2>
   <p>特别提示特别提示特别提示特别提示</p>
  </span>
  </div>
</div>
</div>
<div class="footer">
  <p class="p1"><a href="#">网站首页</a> | <a href="#">产品介绍</a> | <a href="#">信息</a> | <a href="#">畅销畅销榜</a></p>
  <p class="p2">版权属于前沿科技 artech.cn</p>
</div>

</form>
</body>
</html>
--------css样式--------

body {
}
body{
margin:0;
padding:0;
background: white url('images/header-background.png') repeat-x;
font:12px/1.6 arial;
}
ul{
margin:0;
padding:0;
list-style:none;
}

a{
text-decoration:none;
color:#3D81B4;
}

p{
text-indent:2em;
}

.header{
position:relative;
width:760px;
height:138px;
margin:0 auto;
font:14px/1.6 arial;
}

.header h1{
background:transparent url('images/title.png') no-repeat bottom left;
height:63px;
margin:0;
margin-left:40px;
}

.header .logo{
position:absolute;
top:10px;
left:0px;
}
.header h1 span{
display:none;
}
.header .topNavigation{
position:absolute;
top:0;
right:0;
}

.header .topNavigation li{
float:left;
padding:0 2px;
}

.header .mainNavigation{
position:absolute;
color:white;
font-weight:bold;
top:88px;
left:0;
}
.header .mainNavigation li{
float:left;
padding:5px;
}

.header .accountBox{
position:absolute;
top:44px;
right:10px;
}

.header .accountBox li{
float:left;
top:0;
right:0;
width:93px;
height:110px;
text-align:center;
}

.header .accountBox span{
display:none;
}
.header .accountBox a{
display:block;
height:110px;
width:93px;
float:left;/* For Ie 6 bug */
}
.header .accountBox .login{
background:transparent url('images/account-left.jpg') no-repeat;
}

.header .accountBox .cart{
background:transparent url('images/account-right.jpg') no-repeat;
}

.header .accountBox .login:hover{
background:transparent url('images/account-left.jpg') no-repeat left bottom ;
}

.header .accountBox .cart:hover{
background:transparent url('images/account-right.jpg') no-repeat left bottom ;
}

.header .topNavigation a{
display:block;
line-height:25px;
padding:0 0 0 14px;
background:transparent url('images/top-navi-white.gif') no-repeat;
float:left; /*For IE 6 bug*/
}

.header .topNavigation a span{
display:block;
padding:0 14px 0 0;
background:transparent url('images/top-navi-white.gif') no-repeat right;
}

.header .topNavigation a:hover{
color:white;
background:transparent url('images/top-navi-hover.gif') no-repeat;
}

.header .topNavigation a:hover span{
background:transparent url('images/top-navi-hover.gif') no-repeat right;
}

.header .mainNavigation a{
display:block;
line-height:25px;
text-decoration:none;
padding:0 0 0 14px;
color:white;
float:left; /*For IE 6 bug*/
}

.header .mainNavigation a strong{
display:block;
padding:0 14px 0 0;
}

.header .mainNavigation .current a{
color:white;
background:transparent url('images/main-navi.gif') no-repeat;
}

.header .mainNavigation .current a strong{
color:white;
background:transparent url('images/main-navi.gif') no-repeat right;
}

.header .mainNavigation a:hover{
color:white;
background:transparent url('images/main-navi-hover.gif') no-repeat;
}

.header .mainNavigation a:hover strong{
background:transparent url('images/main-navi-hover.gif') no-repeat right;
color:#3D81B4;
}

/************** Content ********************************************/

.content{
width:760px;
margin:0 auto;
}

.content a img{
padding:5px;
background:#BDD6E8;
border:1px #DEAF50 solid;
}

.content a:hover{ /* For IE 6 bug */
color: #FFF;
}

.content a:hover img{
padding:5px;
background:#3D81B4;
border:1px #3D81B4 solid;
}

.mainContent{
float:left;
width:540px;
}

.recommendation{
clear:both;
}

.recommendation p{

}

.recommendation h2{
padding-top:20px;
color:#069;
border-bottom:1px #DEAF50 solid;
font:bold 22px/24px 楷体_GB2312;
background:transparent url('images/rose.png') no-repeat bottom right;
}

.img-left img{
float:left;
margin-right:10px;
}

.img-right{
float:right;
margin-left:10px;
}

.multiColumn li{
float:left;
width:160px;
margin:0 10px;
text-align:center;
display:inline; /*For IE 6 bugs*/
}

.multiColumn li p{
margin:0 0 10px 0;
}
.sideBar{
float:right;
width:186px;
margin-right:230px;
margin-top:20px;
display:inline;/*For IE 6 bug*/
}

.sideBar div{
margin-top:20px;
background:transparent url('images/sidebox-bottom.png') no-repeat bottom;
width:100%;
}

.sideBar div span{
display:block;
background:transparent url('images/sidebox-top.png') no-repeat;
padding:10px;
}

.sideBar .searchBox{
text-align:center;
}

.sideBar input{
margin:5px 0;
}

.sideBar h2{
margin:0px;
font:bold 22px/24px 楷体_GB2312;
color:#069;
text-align:center;
}

.sideBar .menuBox li{
font:14px 宋体;
height:25px;
line-height:25px;
border-top:1px white solid;
}

.sideBar .menuBox li a{
display:block;
padding-left:35px;
background:transparent url('images/menu-bullet.png') no-repeat 10px center;
height:25px;
}

.sideBar .menuBox li a:hover{
display:block;
color:#069;
background:white url('images/menu-bullet.png') no-repeat 10px center;}
/*******************Footer***************************************/
.footer
{
clear:both;
height:53px;
margin:0;
background:transparent url('images/footer-background.png') repeat-x;
text-indent:0px;
text-align:center;
}

.footer p{
margin:0px;
}
.footer a{
color:white;
}
.footer .p1{
line-height:23px;
}
.footer .p2{
line-height:30px;
}
--------index.aspx--------

<%@ Page Title="" Xlanguage="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="BabyHouse.index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

  <div class="recommendation img-left">
   <h2>今日推荐</h2>
   <a href="#"><img src="images/ex4.jpg" width="210" height="140"/></a>
   <p>七星瓢虫图案4件套，采用超柔和进口面料，手感极其柔软，舒适。采用高支高密精梳纯棉织物作为面料，手感柔软舒适，经久耐用，多款图案风格能够和不同家居设计完美搭配。</p>
   <p>缩水率以及退色率均符合国家检测标准，绿色环保。30度以下水温洗衣机弱洗，中性洗涤剂，中温熨烫。 </p>
  </div>
  <div class="recommendation">
   <h2>最受欢迎</h2>
   <div class="img-right"><a href="#"><img src="images/ex5.jpg" width="210" height="140"/></a></div>
   <p>九孔棉冬被选用优质涤纶面料，手感柔软、花型独特，填充料采用高科技的聚酯螺旋纤维精致而成，该纤维细如发，弹性极强。且饱含空气，恒温性强，使您倍感轻软舒适。经特殊工艺加工后，长期保持松软如新，为您提供健康舒适的睡眠需要。 </p>
  </div>
  <div class="recommendation multiColumn">
   <h2>分类推荐</h2>
   <ul>
    <li><a href="#"><img src="images/ex1.jpg" width="120" height="120"/></a>
     <p>休闲款式，柔软富有弹性。舒服自然，飘逸聪颖。</p></li>
    <li><a href="#"><img src="images/ex2.jpg" width="120" height="120"/></a>
     <p>棒球套装，柔软富有弹性。舒服自然，飘逸聪颖。</p></li>
    <li><a href="#"><img src="images/ex3.jpg" width="120" height="120"/></a>
     <p>丝制面料，柔软富有弹性。舒服自然，飘逸聪颖。</p></li>
   </ul>

  </div>
</div>

</div>
</asp:Content>
------Aboutchanpin.aspx-------

<%@ Page Title="" Xlanguage="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Aboutchanpin.aspx.cs" Inherits="BabyHouse.Aboutchanpin" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<h2>产品介绍</h2>
<a href="#"><img src="images/11.png" width="210" height="140"/></a>
<p>由MAPA公司在德国泽文市(Zeven)所生产的NUK婴儿产品，已受到全球数以百万计的父母之高度信赖。

</p>

　　<p>MAPA拥有多年的丰富经验</p>

　　<p>MAPA充分了解婴儿的需要</p>

　　<p>MAPA对于产品品质有着最高标准的严格要求</p>

　　<p>NUK旗下的婴儿用品，有哺乳用品、奶瓶、餐具和护肤品等，以下小编搜罗了家长们对NUK奶瓶的评价，从评价中大家客观地了解以下这个牌子吧。</p>

　　<p>米其林宝宝：非常好用，我家的宝贝只认它，特别是奶嘴(黄色的那种)，换其他的就不吃了。其实奶瓶都一样，关键是奶嘴，黄色的口感特接近妈妈的乳头宝宝就不会抵触了，相信我。</p>

</asp:Content>

--------sale.aspx--------

<%@ Page Title="" Xlanguage="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="sale.aspx.cs" Inherits="BabyHouse.sale" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<h2>销售排行榜</h2>

<p>秋季宝宝肌肤补水保湿首选RUNFEEL润菲婴儿补水保湿霜</p>

　　<p>小婴奇舒爽护臀膏有效调理宝宝肌肤</p>

　　<p>洗发沐浴双效合一抱抱熊关爱中国宝宝肌肤健康</p>

　　<p>新妈必知新生儿冬季皮肤护理 </p>

　　<p>天然母婴用品更受青睐哈罗闪爱源自天然
</p>

</asp:Content>
--------xinxi.asx-------

<%@ Page Title="" Xlanguage="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="xinxi.aspx.cs" Inherits="BabyHouse.xinxi" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<h2>产品信息</h2>

<p>天然母婴用品更受青睐哈罗闪爱源自天然

</p>

　　<p>日用化学洗涤剂正在成为人类不可或缺的部分。然而，有科学家指出需要对此深刻反思。化学洗涤剂是石油垃圾开发的副产品。
</p>

　　<p>　每个宝宝的皮肤和身体都十分娇嫩，需要我们给予最好的呵护。特别是皮肤，头发的护理。宝宝的肌肤很细嫩和脆弱，免疫系统发育的不够成熟，功能都尚未完善。宝宝的皮肤仅有成人皮肤十分之一的厚度，表皮是单层细胞，而成年人的则是多层细胞;真皮中的胶原纤维少、缺乏弹性，不仅容易被外物渗透，而且容易因摩擦损伤皮肤。对于等量洗护用品中的化学物质，宝宝皮肤的吸收量要远远大于成人，同时，对过敏物质或毒性物的反应也尤为强烈。所以，保护好宝宝的皮肤，妈妈们要做的第一步就是选择一款适合宝宝使用，天然的洗护用品。而哈罗闪无疑是她们的首选</p>

　　<p>哈罗闪品牌的缘起，就是一个典型的天然的案例。在德国，妈妈生产前后都需要助产士帮忙。而在长期的实践中，助产士发现，在有炎症的婴儿肌肤上涂抹天然橄榄油或母乳，就可有效解决婴儿肌肤的炎症问题产生。于是哈罗闪的产品配方就产生了：采用了助产士推荐的天然橄榄油和接近于母乳的牛乳蛋白成分，为婴儿肌肤提供最安全有效的肌肤护理产品成分。随后，采用生态、天然的材质，成了哈罗闪的一个原则。几乎哈罗闪的所有产品，都尽可能地不采用成分含有化学成分的材料，而是直接采用大自然的天然成分。除了橄榄油精华和牛乳蛋白外，还包括天然的香料、天然柠檬酸、多种天然植物活性成分等。
</p>

</asp:Content>