vs2015 dynamicweb7-1 主题样式如何使用

258 篇文章 2 订阅

项目中添加App_Themes文件夹,其下添加Green文件,

文件夹中增加2个文件,分别为 .skin .css

skinfile1.skin


<%-- 3、建立主题文件夹App_Themes,增加SkinFile1.skin文件,在文件内添加控件主题样式--%>
<asp:TextBox runat="server" BackColor="#ccffcc" ForeColor="#666699" />
<asp:Button runat="server" BackColor="#ccffcc" ForeColor="666699" BorderColor="#336600" BorderStyle="Solid" BorderWidth="1px" />
<%-- 6、增加SkinId,可以单独给控件用 --%>
<asp:TextBox runat="server" SkinId="txtYellow" BackColor="Yellow" />

stylesheet1.css

/*4、在主题文件夹下,增加css文件,添加控制各元素的样式代码
    
    */

body {
    background-color:#eafcfe;
}


#top {
    background-image:url("images/BannerG.jpg");
    background-color:green;
}

#mid #left {
    background-image:url("images/LogoLeftG.jpg");
    background-color:green;
}

创建模板页

masterpage.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="dynamicweb7_1.MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            margin:0;
        }

        #top {
            width:800px;
            height:150px;
            margin: 0 auto;
            border:1px solid #c0c0c0;
            background:url("images/banner.jpg");
            background-repeat:no-repeat;
            background-position:center center;
            background-color:#00ff90;
        }

        #mid {
            width:800px;
            height:450px;
            margin: 0 auto;
            border:1px solid #808080;
            
        }

        #mid #left {
            width:150px;
            height:450px;
            float:left;
            background:url("images/logoleft.jpg") left top no-repeat;
            background-color:#00ff90;
        }

        #mid #main {
            width:648px;
            height:450px;
            float:right;
        }

        #bottom {
            border:1px solid #808080;
            width:800px;
            height:40px;
            margin: 0 auto;
            text-align:center;
            font-size:small;
        }
    </style>
</head>
<body>
    <!-- 1、母版页的制作 -->
    <form id="form1" runat="server">
        <div id="top">
            Banner
            网站标题:<asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>
        </div>
        <div id="mid">
            <div id="left">
                <br /><br /><br />
                <asp:HyperLink ID="hlDefault" runat="server" NavigateUrl="~/Default.aspx" ForeColor="#ffcc00">主页</asp:HyperLink><br />
                <asp:HyperLink ID="hlSignIn" runat="server" NavigateUrl="~/SignIn.aspx" ForeColor="#ffcc00">登录</asp:HyperLink><br />
                <asp:HyperLink ID="hlRegister" runat="server" NavigateUrl="~/Register.aspx" ForeColor="#ffcc00">注册</asp:HyperLink><br />
                <asp:HyperLink ID="hlPerInfo" runat="server" NavigateUrl="~/PersonalInfo.aspx" ForeColor="#ffcc00">个人信息</asp:HyperLink><br />
                <asp:HyperLink ID="hlFeedback" runat="server" NavigateUrl="~/Feedback.aspx" ForeColor="#ffcc00">建议反馈</asp:HyperLink><br />
                <asp:HyperLink ID="hlStudentInfo" runat="server" NavigateUrl="~/StudentInfo.aspx" ForeColor="#ffcc00">学生信息管理</asp:HyperLink>
            </div>
            <div id="main">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
            </div>
        </div>
        <div id="bottom">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/logo.jpg" ImageAlign="Middle"/>
            Bottom
        </div>
    </form>
</body>
</html>

创建内容页

studentinfo.apsx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StudentInfo.aspx.cs" Inherits="dynamicweb7_1.StudentInfo" MasterPageFile="~/MasterPage.Master" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <center><h3>学生信息管理</h3></center>
    <!--2、内容页,套用模板页的制作 -->
</asp:Content>

default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="dynamicweb7_1.Default" MasterPageFile="~/MasterPage.Master" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div style="text-align:center">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        学生信息管理系统主页<br /><br />
        <asp:Label ID="lblUname" runat="server" Text=""></asp:Label><br /><br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Timer ID="Timer1" runat="server" Interval="10000"></asp:Timer>
                网站在线人数:<asp:Label ID="lblOnLineNum" runat="server" Text=""></asp:Label>
                &nbsp;&nbsp;当前用户在线时间:<asp:Label ID="lblOnLineTime" runat="server" Text=""></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

personalinfo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PersonalInfo.aspx.cs" Inherits="dynamicweb7_1.PersonalInfo" MasterPageFile="~/MasterPage.Master" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <center><h3>个人信息</h3></center>
    <asp:Button ID="btnGet" runat="server" Text="获取标题" OnClick="btnGet_Click" />
    <asp:Label ID="lblShow" runat="server" Text=""></asp:Label>
</asp:Content>

personalinfo.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace dynamicweb7_1
{
    public partial class PersonalInfo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnGet_Click(object sender, EventArgs e)
        {
            //9、如何从内容页获取母版页控件的值
            TextBox tbTitle = (TextBox)Master.FindControl("txtTitle");
            if (tbTitle != null)
            {
                lblShow.Text = tbTitle.Text;
            }
        }
    }
}

register.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="dynamicweb7_1.Register" MasterPageFile="~/MasterPage.Master" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <center><h3>注册</h3></center>

</asp:Content>

register.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace dynamicweb7_1
{
    public partial class Register : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Page_PreInit(object sender, EventArgs e)
        {
            //8、采用编程方式,可以在PreInit事件中,添加主题
            Page.Theme = "Green";
        }
    }
}

signin.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SignIn.aspx.cs" Inherits="dynamicweb7_1.SignIn" MasterPageFile="~/MasterPage.Master" Theme="Green" %>
<asp:Content runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
    <!-- 5、在页面中首行配置中,添加Theme=“”,可以配置页面级的主题模式 -->
    <center><h3>用户登录</h3></center>
    <table style="border:1px solid #cccccc;margin:0 auto;text-align:center;">
        <tr>
            <td>
                用户名:
            </td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                密码:
            </td>
            <td>
                <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Button ID="Button1" runat="server" Text="登录" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <!-- 7、在控件中,设置SkinId,可以单独配置某个控件的主题样式-->
                单独设置控件主题的文本框:<asp:TextBox ID="TextBox3" runat="server" SkinID="txtYellow"></asp:TextBox>
            </td>
        </tr>
    </table>
</asp:Content>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虾米大王

有你的支持,我会更有动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值