gpt4 book ai didi

c# - 移至样式表时布局困惑

转载 作者:行者123 更新时间:2023-11-28 05:12:15 25 4
gpt4 key购买 nike

我是 ASP.NET 的新手,目前正在学习 William Penberthy 撰写的“使用 Visual Studio 2015 开始 ASP.NET”一书。在关于母版页布局的第 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;
}

页面 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>

书上应该是这样的 How it should look

实际情况是这样的 How it actually looks like

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

最佳答案

代码是否附加/链接了“之前”或“之后”的修改代码?我的建议是使用浏览器的工具来检查 CSS 文件是否实际加载。在 Chrome 中,您可以按 F12,然后单击“来源”选项卡。这将向您显示左侧加载的内容,我猜您的 CSS 文件不存在。

如果是这样,它可能是您在主文件中的引用。目前你有它作为:

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

相反,尝试“~/Content/RentMyWrox.css”——这应该从您的应用程序的根映射正确的路径,而不是相对于加载母版的任何子页面。

关于c# - 移至样式表时布局困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39488302/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com