无法将图像添加到登录页面

时间:2013-10-03 15:18:20

标签: html asp.net css webforms

首先是login.aspx页面的代码:

<%@ Page Title="Log In" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Login.aspx.cs" Inherits="DoubleEntryForm.Account.Login" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
    &nbsp;Log In
</h2>
<%--<p>
    Please enter your username and password.
    <asp:HyperLink ID="RegisterHyperLink" runat="server" EnableViewState="false">Register</asp:HyperLink> if you don't have an account.
</p>--%>
<asp:Login ID="LoginUser" runat="server" EnableViewState="false" RenderOuterTable="false" DestinationPageUrl="~/Destruction Form.aspx">
    <LayoutTemplate>
        <span class="failureNotification">
            <asp:Literal ID="FailureText" runat="server"></asp:Literal>
        </span>
        <asp:ValidationSummary ID="LoginUserValidationSummary" runat="server" CssClass="failureNotification" 
             ValidationGroup="LoginUserValidationGroup"/>
        <div class="accountInfo">
            <fieldset class="login">
                <legend>Account Information</legend>
                <p>
                    <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Username:</asp:Label>
                    <asp:TextBox ID="UserName" runat="server" CssClass="textEntry"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" 
                         CssClass="failureNotification" ErrorMessage="User Name is required." ToolTip="User Name is required." 
                         ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
                </p>
                <p>
                    <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
                    <asp:TextBox ID="Password" runat="server" CssClass="passwordEntry" TextMode="Password"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" 
                         CssClass="failureNotification" ErrorMessage="Password is required." ToolTip="Password is required." 
                         ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
                </p>
                <p>
                    <asp:CheckBox ID="RememberMe" runat="server"/>
                    <asp:Label ID="RememberMeLabel" runat="server" AssociatedControlID="RememberMe" CssClass="inline">Keep me logged in</asp:Label>
                </p>
            </fieldset>
            <p class="submitButton">
                <asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="LoginUserValidationGroup"/>
            </p>
        </div>
    </LayoutTemplate>
</asp:Login>

在这个页面上,我正在尝试添加一些CSS样式,我正在尝试的每种方式都不起作用。这就是造型:

<style type="text/css">

body{
    margin:0;
    padding:0;
    background-color:#eae9e9;}

#scan-table-wrapper {
    width: 968px;
    margin: 0 auto 0 auto;
    background-image: url("Images/wrapper-bg.png");}    

#scan-table-body{
    margin:0 30px 0 30px;
    padding-top:30px;}

.auto-style1 {
    width: 880px;
    height: 100px;}

</style>

我也在尝试添加标题图片。但是,如果我把代码放在HeaderContent部分,看起来它试图显示标题图像并失败,并且根本不显示背景(通过失败,我的意思是一个空盒子显示一个小红色X在里面)。如果我把它放在MainContent中,它表示我不能将样式放在div中。但是,我不是把它放在div中,而是将它放在MainContent启动的正下方的行中。

这是我第一次大量处理CSS,所以我有点不熟悉。我应该把它们放在哪里,以便它们能在我的页面上正确显示?

1 个答案:

答案 0 :(得分:2)

确实你的标签会进入HeadContent,内容。如果您正在看到带有红叉的图像,这意味着css工作正常,但无法在您提到的目录中找到该图像。请使用../设置适当的路径,这意味着一个目录。

例如,如果您的项目结构是

Root -> Images/wrapper-bg.png
     -> Pages/Your Aspx pages

在您的aspx页面中,您拥有自己的风格,然后必须使用

background-image:url('../ Images / wrapper-bg.png');} //使用单引号

../会将你移到页面目录之外并将你放在root中,如果是上面的话,那么Images / Wrapper-bg.png和路径将会得到满足。就这样。

For Body Bg

将您的CSS移至母版页的Head部分。确保不再有来自外部css或内联css的body的css。

处理CSS的好方法

在项目名称中添加样式表,即style.css或您喜欢的任何内容。将css文件拖放到主页头部分,它会自动添加其引用。现在开始在该文件中编写css。所有子页面将根据您的说明自动从该文件继承该样式。您也可以使用一些第三方CSS编辑器轻松编写CSS和学习。我通常使用Rapid CSS

必须尝试

我非常喜欢的模式是.Net本身和Jetbrains Resharper。多数民众赞成真的很酷!!