当前位置：文江博客话题详情

暂时覆盖 ASP.NET 中的主题 CSS

发布于 2024-07-24 06:05:18 字数 371 浏览 4 评论 0原文

我有一个两列布局的母版页，左列菜单，右列内容。整个页面是XHTML/Divs/CSS布局。所以这些列是 div，并应用了 CSS 来调整它们的大小。

对于一页（网格页），我只希望一列（内容列）的宽度为 100%，以实现最大查看区域。

如何在这个一次性例外页面上使用相同的母版页和相同的主题？

仅针对这一页创建一个全新的母版页并向主题添加新的 CSS 属性似乎有些过头了。有没有办法只在这个页面上覆盖内容 div 的 CSS 宽度属性？我不是 CSS 专家，但我认为有一种方法可以做到这一点。

不过，对于让客户端进行覆盖，我确实有一些保留；出于兼容性原因。我更喜欢服务器端覆盖。

有什么建议么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫性小仙女 2024-07-31 06:05:18

在代码中为每个页面指定一个不同的 CSS 类，并在 CSS 中定位该类。这是一个愚蠢而简单的方法来完成它：

创建您自己的 MasterPage 类：

class MyMasterPage : MasterPage
{
    public string BodyClass {get;set;}
}

在您的母版页中：

<%@ Master Inherits="MyNamespace.MyMasterPage" %>
...
<body class="<% =this.BodyClass %>">
    <asp:ContentPlaceHolder ... />
</body>
...

在页面的代码隐藏中：

void Page_Load(object sender, EventArgs e)
{
    ((MyMasterPage)Master).BodyClass = "specialpage";
}

在您的 CSS 类中：

.specialpage .mainColumn {width:100%;}
.specialpage .otherColumn {display:none;}

Give each page a distinct CSS class in code, and target that class in your CSS. Here is a stupid-simple way to accomplish it:

Create your own MasterPage class:

class MyMasterPage : MasterPage
{
    public string BodyClass {get;set;}
}

In your Master Page:

<%@ Master Inherits="MyNamespace.MyMasterPage" %>
...
<body class="<% =this.BodyClass %>">
    <asp:ContentPlaceHolder ... />
</body>
...

And in the codebehind of your page:

void Page_Load(object sender, EventArgs e)
{
    ((MyMasterPage)Master).BodyClass = "specialpage";
}

And in your CSS class:

.specialpage .mainColumn {width:100%;}
.specialpage .otherColumn {display:none;}

回复收藏 0 原文

橘虞初梦 2024-07-31 06:05:18

您可以使用类似的东西：

#content {
    /* Some styles */
    width: 100% !important;
}

You can use something similar to:

#content {
    /* Some styles */
    width: 100% !important;
}

回复收藏 0 原文

情归归情 2024-07-31 06:05:18

工作起来就像一个魅力。解决方案是使用分配有 100% 宽度 CSS 的新 div 添加另一个区域到母版页。还要在 CSS 文件中创建一个新的样式条目。在内容页面上，将您想要 100% 宽度的内容放在具有 100% 样式的区域中，而不是与两列布局对应的区域中。

之后，只需将内容页面设置为使用内容页面内容的母版页内容即可。

母版页：

<!-- start page -->
<div id="page">
    <!-- start content -->
     <div id="contentOneColumn" >
      <asp:ContentPlaceHolder ID="ContentPlaceHolderContentOneColumn" runat="server">
      <!-- content that needs 100% width, one column -->
     </asp:ContentPlaceHolder>
     </div>     
    <div id="content" >
        <asp:ContentPlaceHolder ID="ContentPlaceHolderContent" runat="server">
        <!-- content that works with two column -->
        </asp:ContentPlaceHolder>

CSS：

/* Content */

content {
    float: right;
    width: 600px;
}

/* ContentOneColumn */
contentOneColumn {
    float:none;
    width: 850px;
}

Worked like a charm. Solution to this is to add another region to the masterpage with a new div that has the 100% width CSS assigned to it. Also create a new style entry in your CSS file. On the content page put the content you want to be 100% width in the region that has the style for 100% and not in the one that corresponds with the two column layout.

After that it's just a matter setting the content page to either use the masterpage content of the content page content.

MasterPage:

<!-- start page -->
<div id="page">
    <!-- start content -->
     <div id="contentOneColumn" >
      <asp:ContentPlaceHolder ID="ContentPlaceHolderContentOneColumn" runat="server">
      <!-- content that needs 100% width, one column -->
     </asp:ContentPlaceHolder>
     </div>     
    <div id="content" >
        <asp:ContentPlaceHolder ID="ContentPlaceHolderContent" runat="server">
        <!-- content that works with two column -->
        </asp:ContentPlaceHolder>

CSS:

/* Content */

content {
    float: right;
    width: 600px;
}

/* ContentOneColumn */
contentOneColumn {
    float:none;
    width: 850px;
}

回复收藏 0 原文

只有影子陪我不离不弃 2024-07-31 06:05:18

使用 OnPreRenderComplete 事件，如下所示：

protected override void OnPreRenderComplete(EventArgs e)
    {
        base.OnPreRenderComplete(e);
        rfv_login.CssClass = "ValidatorReset";
        rfv_pwd.CssClass = "ValidatorReset";
    }

Use OnPreRenderComplete event, like this:

protected override void OnPreRenderComplete(EventArgs e)
    {
        base.OnPreRenderComplete(e);
        rfv_login.CssClass = "ValidatorReset";
        rfv_pwd.CssClass = "ValidatorReset";
    }

回复收藏 0 原文

~没有更多了~