asp.net--站点构架(页首设计)

来源：互联网发布：网络备课的好处编辑：程序博客网时间：2024/05/09 06:45

首先创建母版页

.master代码如下：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="mst_lv0.master.cs" Inherits="mst_lv0" %><!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="App_style/CSS_DEFAULT.css" rel="stylesheet" type="text/css" />    <asp:ContentPlaceHolder id="head" runat="server">    </asp:ContentPlaceHolder></head><body>    <form id="form1" runat="server">    <asp:ScriptManager ID="ScriptManager1" runat="server">    </asp:ScriptManager>    <div>        <div id="divmst_topBar">            <div class="safeWidth al_r">                <a href="#" id="a_eEnter" >电商入口</a>                <a href="#" id="a_setHome" >设为首页</a>                <a href="#" id="a_setFav" >加入收藏</a>            </div>        </div>        <div id="divmst_LogoNav" class ="safeWidth">            <asp:Image ID="img_logo" runat="server" ImageUrl="~/App_imgs/LOGO.jpg"             Width="200" CssClass="fl" />            <asp:Menu ID="menu_mainNav" runat="server" CssClass="fr"                 MaximumDynamicDisplayLevels="0" StaticDisplayLevels="2"                 Orientation="Horizontal" DataSourceID="SiteMapDataSource1"                OnPreRender="menuPreRender" >            </asp:Menu>            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />            <div class ="clr"></div>        </div><%--banner大图--%>        <div id="divmst_bigimg">            <asp:ContentPlaceHolder ID="cph_bigimg" runat="server" />        </div><%--标题--%>        <div class ="safeWidth">        <div id="divmst_sitemapPath" runat="server">            您当前的位置：<asp:SiteMapPath ID="SiteMapPath1" runat="server">            </asp:SiteMapPath>        </div>        <asp:Label ID="lbl_subpageTitle" runat="server"             Text="子页大标题" CssClass ="labSubpageTitle" />        </div>        <div id="divmst_content">            <asp:ContentPlaceHolder id="cph_content_temp" runat="server"></asp:ContentPlaceHolder>        </div>        <div id="divmst_submenuList">            <div class ="safeWidth" runat="server" id="div_submenus">                                <asp:Table runat="server" CssClass="tbl_quickLinks">                    <asp:TableRow runat="server" ID="row_links"></asp:TableRow>                </asp:Table>                        </div>        </div>        <div id="divmst_copyRight">            <div class ="safeWidth">页脚copyRight</div>        </div>    </div>    </form></body></html>

其中主CSS文件代码如下：

body,div,p,ul,li,h1,h2,h3,h4,h5,h6,table     { margin:0px; padding:0px; font-family:"微软雅黑";}/*通用类*/.fl { float:left !important;}.fr { float:right !important;}.clr{ clear:both;}.al_r { text-align:right;}.al_l { text-align:left;}.safeWidth { margin:0px auto; width:760px;}/*母版页结构*/#divmst_topBar,#divmst_copyRight{background-color:Black; padding:8px;}/*各种超链接*/    a{ text-decoration:none;}    /*topBar3个超链接*/    #a_eEnter,#a_setHome,#a_setFav    { color:#AEAEAE; font-size:12px;      padding:2px 0px 2px 16px;  margin-left:5px;      background-image:url(../App_imgs/back.png); background-repeat:no-repeat;      }    #a_setHome  { background-position:0px -20px;}//后两个链接贴图位置    #a_setFav   { background-position:0px -40px;}<span style="font-family: Arial, Helvetica, sans-serif;">//后两个链接贴图位置</span>    #divmst_topBar a:hover { color:White;}            /*主导航*/    #menu_mainNav *{outline:none;}    #menu_mainNav a      <span style="color:#ff0000;">注释：注意 <span style="font-family: Arial, Helvetica, sans-serif;">! important的作用！</span></span>    {   display:block !important;        padding: 20px 15px 20px 15px !important ;         margin-left:7px;          border-radius:8px;  border-top-left-radius:0px; border-top-right-radius:0px;         border-top:6px solid white; border-right:1px solid white;        color:Black; font-size:15px; }    #menu_mainNav a:hover, #menu_mainNav a.selected    {   border-top:6px solid #FAB41E;        border-bottom:1px solid #d1d1d1;  border-right:1px solid #eaeaea;        background-color:#fafafa;        color:#ffaa11; }

.master.cs代码如下：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Data.OleDb;using newClasses;public partial class mst_lv0 : System.Web.UI.MasterPage{    protected void Page_Load(object sender, EventArgs e)    {    }    protected void menuPreRender(object sender, EventArgs e) {        try        {            MenuItem mi = menu_mainNav.FindItem(SiteMap.CurrentNode.ResourceKey);            mi.Selected = true;                   }        catch { }            }}

以上代码用于在选中当前结点时改变显示样式！

效果如下：

0 0