2

我有一个网站(VS2010、asp.net、VB)并且我正在使用一个母版页。我还有其他几个页面,在其中一个页面上,我想将背景颜色设置为内容占位符。我正在使用样式表并在 .aspx 页面上有以下代码。(这只是测试代码)

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Dashboard2.aspx.vb" Inherits="Dashboard2" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="body_color">
<table id="mainDisplay">
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</div>
</asp:Content>

我尝试引用内容占位符的 id 但不起作用。

以下是表格的 CSS,因为我将其水平和垂直居中。

#mainDisplay
{
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    width:900px;
    height:450px;
}

更新代码以在 aspx 页面上显示所有内容

4

2 回答 2

2

ContentPlaceHolder 元素不会在客户端代码上呈现。查看您生成的源代码并检查。您需要将样式应用于 ContentPlaceHolder 中的 div。

例子:

<style>
    #placeHolderDiv {
        width: 1000px;
        height: 650px;
        background-color: #AAA;
    }
    #mainDisplay {
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        width: 900px;
        height: 450px;
        background-color: #DDD;
    }
</style>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="placeHolderDiv">
        <table id="mainDisplay">
...
于 2013-10-04T13:42:05.510 回答
1

解决方案#1:CSS

如果这是一个 CSS 问题,并且您很容易发现内容周围的空白,您可能需要调整设置 div 样式的方式。尝试给容器 div (包含背景颜色的桌子周围的那个)这个类:

.container-div 
{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    top:100px;
}

这假设您希望在容器 div 的顶部有 100px 的间隙。


解决方案 #2:使用 jQuery 更改背景

在内容页面的标签内添加一个脚本标签。在 script 标签中,放置一个 jQuery 代码来更改相应背景层的类。以下示例假设您的背景

例子:

母版页 HTML

<body class="default-bg">
    <p>This is your content outside the ASP content place holder.</p>

    <asp:ContentPlaceHolder runat="Server" ID="ContentPlaceHolder1">
    </asp:ContentPlaceHolder>
</body>

内容页面 HTML

    <script>
        $(function(){
            $('.my-background-layer').removeClass('default-bg').addClass('alternate-bg');
        )};
    </script>



    <div>
        <table id="mainDisplay">
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
        </table>
    </div>
</asp:Content>

CSS

.default-bg {background:white;}
.alternate-bg {background:grey;}

请记住,ContentPlaceHolders 旨在仅替换母版页中的代码段。我遵循的一个好方法是在母版页的标题部分中放置至少两个 ContentPlaceHolder。

第一个用于您的默认 CSS 和 Javascript 引用,而第二个用于附加内容页面引用。如果您从内容页面中忽略这些 ContentPlaceHolders,则您的母版页中的默认设置将生效。但是,如果您想更改主要的 CSS 或 Javascript 引用,您只需为该 ContentPlaceHolder 添加一个标签并为该内容页面添加您的代码。


如何实现 jQuery

我想你可能需要一些关于如何安装 jQuery 的速成课程,因为你提到你不喜欢 javascript(顺便说一句,你迟早必须学习它)。这是一个体面说明的链接:

于 2013-10-04T13:50:46.910 回答