Question

我是ASP.NET新手，现在正在学习＃34;使用Visual Studio 2015开始ASP.NET和＃34;作者：William Penberthy。在关于使用母版页进行布局的第7章中，我使用样式表RentMyWrox创建了一个自定义母版WebForms，并将ManagedItems.aspx页面的各种控件的内联样式移动到RentMyWrox.css。这会导致布局混乱。

当我切换回默认母版页并将内联样式添加到默认Site.css样式表时，布局正确显示。我下载了这本书的源代码，它有同样的问题。谁能解释一下，问题是什么？

我的自定义母版页面WebForms.Master

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="Content/RentMyWrox.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="header">

        </div>
        <div id="nav">
            Navigation content here
        </div>
        <div id="section">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

            </asp:ContentPlaceHolder>
        </div>
        <div id="footer">
            Footer content here
        </div>
    </form>
</body>
</html>

自定义母版页RentMyWrox.css的样式表

body {
    font-family: verdana;
}
#header {
    background-color:#C40D42;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;          
}
#section {
    width:750px;
    float:left;
    padding:10px;        
}
#footer {
    background-color:#C40D42;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;      
}
.dataentry input{
    width: 250px;
    margin-left: 20px;
    margin-top: 15px;
}

.dataentry textarea{
    width: 250px;
    margin-left: 20px;
    margin-top: 15px;
}

.dataentry label{
    width: 75px;
    margin-left: 20px;
    margin-top: 15px;
}

#fuPicture {
    margin-top: -20px;
    margin-left: 120px;
}

Page ManagedItems.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/WebForms.Master" AutoEventWireup="true" CodeBehind="ManageItem.aspx.cs" Inherits="RentMyWrox.Admin.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div>
        <div class="dataentry">
            <asp:Label ID="Label1" runat="server" Text="Name" 
                AssociatedControlID="tbName"></asp:Label>
            <asp:TextBox ID="tbName" runat="server"></asp:TextBox>
        </div>
        <div class="dataentry">
            <asp:Label ID="Label2" runat="server" Text="Description" 
                AssociatedControlID="tbDescription"></asp:Label>
            <asp:TextBox ID="tbDescription" runat="server"
                TextMode="MultiLine" Rows="5"></asp:TextBox>
        </div>
        <div class="dataentry">
            <asp:Label ID="Label3" runat="server" Text="Cost" 
                AssociatedControlID="tbCost"></asp:Label>
            <asp:TextBox ID="tbCost" runat="server"></asp:TextBox>
        </div>
        <div class="dataentry">
            <asp:Label runat="server" Text="Item Number" AssociatedControlID="tbItemNumber"/>
            <asp:TextBox runat="server" ID="tbItemNumber" /> </div> <div class="dataentry">
            <asp:Label runat="server" Text="Picture" AssociatedControlID="fuPicture"  />
            <asp:FileUpload ID="fuPicture" ClientIDMode="Static" runat="server" />
        </div>
        <div class="dataentry">
            <asp:Label runat="server" Text="Acquired Date" AssociatedControlID="tbAcquiredDate"/>
            <asp:TextBox runat="server" ID="tbAcquiredDate"/>
        </div>
        <asp:Button Text="Save Item" runat="server" OnClick="SaveItem_Click" /> 
    </div>

</asp:Content>

根据这本书，这应该是它的样子

这就是它的实际外观

源代码可以在http://media.wiley.com/product_ancillary/27/11190774/DOWNLOAD/RentMyWrox_Chapter7_CSharp..zip

下载

Answer 1

代码是附加/链接的“之前”还是“之后”修改代码？我的建议是使用浏览器的工具来检查CSS文件是否实际加载。在Chrome中，您可以按F12，然后点击“来源”标签。这将显示左下方的内容，我猜你的CSS文件不存在。

如果是这种情况，它可能是您在主文件中的引用。目前您将其视为：

但该链接不是您在“管理”文件夹内的manageitem.aspx页面的有效链接。

相反，请尝试“〜/ Content / RentMyWrox.css” - 这应该映射来自应用程序根目录的正确路径，而不是相对于加载主服务器的子页面。

移动到样式表

1 个答案: