Question

我有一个主页，我保留了一些CSS样式。但是当我运行应用程序时，css正在某些页面上添加而不在其他页面上，并且它还在页面的某些元素上呈现而不在其他页面上呈现。

这里是代码：

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

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">
    <title></title>
    <link href="stylesheets/StyleSheet1.css" type="text/css" rel="Stylesheet" />

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
    ul {
  list-style: none;
}

ul#pri.nav {
  margin-left: 0px;
  z-index: -1;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  text-decoration: none;
  width: 97%;
  background-color: rgb(180, 221, 180);
}

ul.nav {
  height: 10px;
}

ul.nav li {
  float: left;
  margin-top: 0px;
  padding: 10px 13px;
  font-family: Arial, sans-serif;
  font-size: small;
  line-height: 15px;
  cursor: pointer;
  font-weight: 700;
}

ul.nav#pri li {
  margin-top: 0px;
  float: left;
  margin-right: 5px;
  font-family: 'Arial Rounded MT';
  color: #fff;
  width: 100px;
  height: 6px;
  text-align: center;
  padding: 20px;
  display: block;
  -moz-border-radius-topleft: 15px;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topright: 15px;
  -webkit-border-top-right-radius: 15px;
  border-bottom-style: none;
  border-bottom-color: inherit;
  border-bottom-width: medium;
  background-color: #0fc15e;
}

ul.nav#pri li a {
  text-decoration: none;
  color: #fff;
}

ul.nav#pri li.active,
ul.nav#pri li:hover ul.nav#sec {
  display: block;
  font-family: 'Arial Rounded MT';
  color: #a67cd5;
}

.nav#pri li:hover ul {
  color: #2b95b2;
}

ul.nav#sec {
  display: none;
  /*float:left;
text-align:center;
border-top-right-radius:15px;
border-top-left-radius:15px;
text-decoration:none;
color:#fff;


 font-family:'Arial Rounded MT';
 font-size:15px;
 color:#fff;
 margin-top:-1px;
 width:97%;
    */
  /*height:25px;
 border-top-right-radius:15px;*/
}


/*ul.nav#pri li li.active
{

}*/
      .auto-style2 {
        height: 550px;
      }

      .auto-style3 {
        height: 454px;
        margin-top: 40px;
      }

      .auto-style4 {
        height: 133px;
        margin-top: 81px;
      }

      .auto-style5 {
        margin-left: 57px;
      }

      .auto-style6 {
        width: 123px;
      }
    </style>
  </head>

  <body style="height: 600px">
    <form id="form1" runat="server" class="auto-style2">
      <div class="auto-style2">
        <div class="auto-style3">

          <div style="margin-top :80px">
            <div style="width:100%; float:left; margin-top: -20px;">
              <div style="float:left; width:44%; text-align:justify; margin-left:20px; 
   margin-top:-20px;">

                <asp:Image ID="Image1" Height="40" Width="150" ImageAlign="Middle" runat="server" ImageUrl="~/images/ Logo.png" />
              </div>
            </div>
          </div>
          <br />
          <br />

          <div>
            <ul id="pri" class="nav" style="height: 10px; margin-top: 30px">
              <li class="active"><a href="AfterLogin.aspx">Home</a></li>
              <li><a href="rubrics.aspx">Rubrics</a></li>
              <li><a href="CreateUser.aspx">Create User</a></li>
              <li><a href="#">Reports</a>
                <ul id="sec" class="nav" style="margin-left: 3px">
                  <li><a href="a">a</a></li>
                  <li><a href="b">b</a></li>
                  <li><a href="c">c</a></li>

                </ul>
              </li>
              <li class="auto-style6"><a href="AdminMessaging.aspx">Messages</a></li>

              <li class="auto-style5">
                <asp:LinkButton runat="server" id="logout" onclick="logout_Click">Sign Out</asp:LinkButton>
              </li>
            </ul>

          </div>

          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">





          </asp:ContentPlaceHolder>


        </div>
      </div>

    </form>
    <div id="p1" class="auto-style4">
      <div style="height:10px;"></div>

      <div style="color:#F5F5F5;text-align:center;">
        Copyright © xyz
      </div>
    </div>

   </body>
   </html>

外部样式表：

           #p1
{
     width:100%;
    background-color:#0a6438;
    height:100px;
    border-bottom-right-radius:15px;
    border-bottom-left-radius:15px;
    margin-top:-5px;
    margin-bottom:2px;
    width :initial;

}

我没有获得页脚的必需css。

Answer 1

我建议您在页面不在网站的根目录中时，而不是在文件夹中呈现样式。

将链接更改为：

<link href="~/stylesheets/StyleSheet1.css" type="text/css" rel="Stylesheet" />

使其呈现适合于正在呈现的实际页面的位置的相对路径。

我还建议不要在内联和样式表中混合样式。将它们全部放在外部工作表中。

某些页面上的CSS呈现而不是其他页面

1 个答案: