2017-04-04 228 views
0

我已经将项目中的一些CSS换成了基本的ASP Web表单模板,以便我可以试验用户控件。我试图将我为母版页所做的代码也实施到模板中。我之前的做法是将所有样式放置在母版页上。我现在已将所有样式放入site.css(不确定这是否正确)。它看起来大部分是正确的,但有一些事情是不同的,我不知道为什么。将一些CSS从一个项目交换到另一个项目

当前的site.css状态:

/* Move down content because we have a fixed navbar that is 50px tall */ 
body { 
    padding-top: 50px; 
    padding-bottom: 20px; 
} 

/* Wrapping element */ 
/* Set some basic padding to keep content from hitting the edges */ 
.body-content { 
    padding-left: 15px; 
    padding-right: 15px; 
} 

/* Override the default bootstrap behavior where horizontal description lists 
    will truncate terms that are too long to fit in the left column 
*/ 
.dl-horizontal dt { 
    white-space: normal; 
} 

/* Set widths on the form inputs since otherwise they're 100% wide */ 
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="select"] { 
    max-width: 280px; 
} 

/* Responsive: Portrait tablets and up */ 
@media screen and (min-width: 768px) { 
    .jumbotron { 
     margin-top: 20px; 
    } 

} 

li { 
    border-right: 1px solid #ff6600; 
} 

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    background: #2B3533; 
    border: 1px solid #ff6600; 
} 

    ul li { 
     display: block; 
     position: relative; 
     float: left; 
     background: #2B3533; 
    } 

li ul { 
    display: none; 
} 

ul li a { 
    display: block; 
    padding: 1em; 
    text-decoration: none; 
    white-space: nowrap; 
    color: #fff; 
} 

li:hover > ul { 
    display: block; 
    position: absolute; 
} 

li:hover li { 
    float: none; 
} 

li:hover a { 
    background: #2B3533; 
} 

li:hover li a:hover { 
    background: #ff6600; 
} 

.main-navigation li ul li { 
    border-top: 0; 
} 

ul li a:hover { 
    background: #ff6600; 
} 

ul ul ul { 
    left: 100%; 
    top: 0; 
} 

ul:before, 
ul:after { 
    content: " "; 
    display: table; 
} 

ul:after { 
    clear: both; 
} 

母版页代码:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="ComputingProjectwh.SiteMaster" %> 

<!DOCTYPE html> 

<html lang="en"> 
<head runat="server"> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title><%: Page.Title %> - My ASP.NET Application</title> 

    <asp:PlaceHolder runat="server"> 
     <%: Scripts.Render("~/bundles/modernizr") %> 
    </asp:PlaceHolder> 
    <webopt:bundlereference runat="server" path="~/Content/css" /> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 

</head> 
<body> 
    <form id="form1" runat="server"> 
     <asp:ScriptManager runat="server"> 
      <Scripts> 
       <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%> 
       <%--Framework Scripts--%> 
       <asp:ScriptReference Name="MsAjaxBundle" /> 
       <asp:ScriptReference Name="jquery" /> 
       <asp:ScriptReference Name="bootstrap" /> 
       <asp:ScriptReference Name="respond" /> 
       <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" /> 
       <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" /> 
       <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" /> 
       <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" /> 
       <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" /> 
       <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" /> 
       <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" /> 
       <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" /> 
       <asp:ScriptReference Name="WebFormsBundle" /> 
       <%--Site Scripts--%> 
      </Scripts> 
     </asp:ScriptManager> 
     <ul class="main-navigation"> 
      <li><a href="/Home.aspx">Synther Physics</a></li> 
      <li><a href="/RevisionTopicList.aspx">Revision by Topic</a> 
       <ul> 
        <li><a href="/RevisionPages/1. Further Mechanics/Further Mechanics Topic List.aspx">Further Mechanics</a> 
         <ul> 
          <li><a href="/RevisionPages/1. Further Mechanics/Moments and Energy.aspx">Moments and Energy</a></li> 
          <li><a href="/RevisionPages/1. Further Mechanics/Motion in a Circle.aspx">Motion in a Circle</a></li> 
         </ul> 
        </li> 
        <li><a href="/RevisionPages/2. Gravitaional Fields/Universal Gravitation.aspx">Gravitaional Fields</a> 
         <ul> 
          <li><a href="/RevisionPages/2. Gravitaional Fields/Universal Gravitation.aspx">Universal Gravitation</a></li> 
         </ul> 
        </li> 
        <li><a href="/RevisionPages/3. Electric and Magnetic Fields/Electric and Magnetic Fields Topic List.aspx">Electric and Magnetic Fields</a> 
         <ul> 
          <li><a href="/RevisionPages/3. Electric and Magnetic Fields/Capacitance.aspx">Capacitance</a></li> 
          <li><a href="/RevisionPages/3. Electric and Magnetic Fields/Electric Fields.aspx">Electric Fields</a></li> 
          <li><a href="/RevisionPages/3. Electric and Magnetic Fields/Magnetic Fields.aspx">Magnetic Fields</a></li> 
         </ul> 
        </li> 
        <li><a href="/RevisionPages/4. Nuclear and Particle Physics/Nuclear and Particle Physics Topic List.aspx">Nuclear and Particle Physics</a> 
         <ul> 
          <li><a href="/RevisionPages/4. Nuclear and Particle Physics/Electrons and Nuceli.aspx">Electrons and Nuclei</a></li> 
          <li><a href="/RevisionPages/4. Nuclear and Particle Physics/Particle Physics.aspx">Particle Physics</a></li> 
         </ul> 
        </li> 
        <li><a href="/RevisionPages/5. Nuclear Radiation/Nuclear Decay.aspx">Nuclear Radiation</a> 
         <ul> 
          <li><a href="/RevisionPages/5. Nuclear Radiation/Nuclear Decay.aspx">Nuclear Decay</a></li> 
         </ul> 
        </li> 
        <li><a href="/RevisionPages/6. Thermodynamics/Thermodynamics Topic List.aspx">Thermodynamics</a> 
         <ul> 
          <li><a href="/RevisionPages/6. Thermodynamics/Gas Laws and Kinetic Theory.aspx">Gas Laws and Kinetic Theory</a></li> 
          <li><a href="/RevisionPages/6. Thermodynamics/Internal Energy, Absolute Zero and Change of State.aspx">Internal Energy, Absolute Zero and Change of State</a></li> 
          <li><a href="/RevisionPages/6. Thermodynamics/Specific Heat Capacity.aspx">Specific Heat Capacity</a></li> 
         </ul> 
        </li> 
        <li><a href="/RevisionPages/7. Space/Space Topic List.aspx">Space</a> 
         <ul> 
          <li><a href="/RevisionPages/7. Space/Astrophysics.aspx">Astrophysics</a></li> 
          <li><a href="/RevisionPages/7. Space/Cosmology.aspx">Cosmology</a></li> 
         </ul> 
        </li> 
        <li><a href="/RevisionPages/8. Oscillations/Oscillations.aspx">Oscillations</a> 
         <ul> 
          <li><a href="/RevisionPages/8. Oscillations/Oscillations.aspx">Oscillations</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li><a href="/RevisionTestList.aspx">Tests by Topic</a> 
       <ul> 
        <li><a href="/TestPages/1. Further Mechanics/Further Mechanics Test List.aspx">Further Mechanics</a> 
         <ul> 
          <li><a href="/TestPages/1. Further Mechanics/Moments and Energy Test.aspx">Moments and Energy</a></li> 
          <li><a href="/TestPages/1. Further Mechanics/Motion in a Circle Test.aspx">Motion in a Circle</a></li> 
         </ul> 
        </li> 
        <li><a href="/TestPages/2. Gravitaional Fields/Universal Gravitation Test.aspx">Gravitaional Fields</a> 
         <ul> 
          <li><a href="/TestPages/2. Gravitaional Fields/Universal Gravitation Test.aspx">Universal Gravitation</a></li> 
         </ul> 
        </li> 
        <li><a href="/TestPages/3. Electric and Magnetic Fields/Electric and Magnetic Fields Test List.aspx">Electric and Magnetic Fields</a> 
         <ul> 
          <li><a href="/TestPages/3. Electric and Magnetic Fields/Capacitance Test.aspx">Capacitance</a></li> 
          <li><a href="/TestPages/3. Electric and Magnetic Fields/Electric Fields Test.aspx">Electric Fields</a></li> 
          <li><a href="/TestPages/3. Electric and Magnetic Fields/Magnetic Fields Test.aspx">Magnetic Fields</a></li> 
         </ul> 
        </li> 
        <li><a href="/TestPages/4. Nuclear and Particle Physics/Nuclear and Particle Physics Test List.aspx">Nuclear and Particle Physics</a> 
         <ul> 
          <li><a href="/TestPages/4. Nuclear and Particle Physics/Electrons and Nuceli Test.aspx">Electrons and Nuclei</a></li> 
          <li><a href="/TestPages/4. Nuclear and Particle Physics/Particle Physics Test.aspx">Particle Physics</a></li> 
         </ul> 
        </li> 
        <li><a href="/TestPages/5. Nuclear Radiation/Nuclear Decay Test.aspx">Nuclear Radiation</a> 
         <ul> 
          <li><a href="/TestPages/5. Nuclear Radiation/Nuclear Decay Test.aspx">Nuclear Decay</a></li> 
         </ul> 
        </li> 
        <li><a href="/TestPages/6. Thermodynamics/Thermodynamics Test List.aspx">Thermodynamics</a> 
         <ul> 
          <li><a href="/TestPages/6. Thermodynamics/Gas Laws and Kinetic Theory Test.aspx">Gas Laws and Kinetic Theory</a></li> 
          <li><a href="/TestPages/6. Thermodynamics/Internal Energy, Absolute Zero and Change of State.aspx">Internal Energy, Absolute Zero and Change of State</a></li> 
          <li><a href="/TestPages/6. Thermodynamics/Specific Heat Capacity.aspx">Specific Heat Capacity</a></li> 
         </ul> 
        </li> 
        <li><a href="/TestPages/7. Space/Space Test List.aspx">Space</a> 
         <ul> 
          <li><a href="/TestPages/7. Space/Astrophysics Test.aspx">Astrophysics</a></li> 
          <li><a href="/TestPages/7. Space/Cosmology.aspx">Cosmology</a></li> 
         </ul> 
        </li> 
        <li><a href="/TestPages/8. Oscillations/Oscillations Test.aspx">Oscillations</a> 
         <ul> 
          <li><a href="/TestPages/8. Oscillations/Oscillations Test.aspx">Oscillations</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li><a href="/Formula Analysis.aspx">Formula Analysis</a></li> 
      <li><a href="/Sylabus Breakdown.aspx">Sylabus Breakdown</a></li> 
      <asp:LoginView runat="server" ViewStateMode="Disabled"> 
       <AnonymousTemplate> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a runat="server" href="~/Account/Register">Register</a></li> 
         <li><a runat="server" href="~/Account/Login">Log in</a></li> 
        </ul> 
       </AnonymousTemplate> 
       <LoggedInTemplate> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %>!</a></li> 
         <li> 
          <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" /> 
         </li> 
        </ul> 
       </LoggedInTemplate> 
      </asp:LoginView> 
     </ul> 
     <div> 
      <asp:ContentPlaceHolder ID="MainCOntent" runat="server"> 
      </asp:ContentPlaceHolder> 
      <footer> 
       <p>&copy; <%: DateTime.Now.Year %> - Synther Physics</p> 
      </footer> 
     </div> 
    </form> 
</body> 
</html> 

我试图让这个它看起来像这样: Drop down 然而,目前看起来是这样的: broken dropw down

其中链接是蓝色和承保的。

如果任何人都可以看到我可以如何排序或告诉我这将是一个真正的帮助。

回答

1

试试这个,而不是

.main-navigation > li > a { 
    display: block; 
    padding: 1em; 
    text-decoration: none; 
    white-space: nowrap; 
    color: #fff; 

}

+0

曾为完美,非常感谢你。 –

相关问题