部分视图使用错误的css样式表,即使没有链接

时间:2016-07-19 19:40:40

标签: css asp.net-mvc

首先我创建了名为" showCatButton.cshtml"的部分视图。并与CategoryList2.css样式表相关联。



body {

}

#mainMenu{
    left:0px;
    position:fixed;
    top:50%;
    transform: translateY(-50%);
    list-style-type:none;
}
.subMenu {
     list-style-type:none;
}
li
{
    width:300px;
    height:50px;
    border-radius:5px;
    background:linear-gradient(to bottom, #45484d 0%,#000000 100%);
    color:white;
    border:1px solid black;
    text-align:center;
}
li:hover
{
    color:black;
    background:linear-gradient(to bottom, #e6e6e6 30%,#e6e6e6 40%,#e6e6e6 50%
    , #f2f2f2 60%, #f2f2f2 70%, #f2f2f2 80%, #f2f2f2 90%, #f2f2f2 100%);
}
#mainMenu li ul {
    display:none;
}
#mainMenu li:hover ul {
    display:block;
    position:absolute;
    top:0px;
    left:300px;
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link type="text/css" rel="stylesheet" href="~/Content/CategoryList2.css"/>
</head>

<body> 
      <ul id="mainMenu">
         some-unimportant code.
       </ul>
</body>
</html>
&#13;
&#13;
&#13;

接下来,我创建了Header局部视图。使用以下代码。

&#13;
&#13;
<html>
<head>
    <meta name="viewport" content="width=device-width" />
</head>

<body>
    <script src='@Url.Content("~/Scripts/jquery-3.1.0.min.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/Scripts/jquery-ui-1.11.4.min.js")' type="text/javascript"></script>
    <div id="Header">
        <ul>
            <li>
                Main
            </li>
            <li>
                Delivery methods
            </li>
            <li>
                About shop
            </li>
            <li>
                Contacts
            </li>
        </ul>
    </div>


</body>
</html>
&#13;
&#13;
&#13; 即使没有链接,它也使用CategoryList2.css样式表。尽管我没有添加任何链接。 我通过跟随coode添加部分视图以进行链接。
&#13;
&#13;
@using OnlineShop.Models;
@using System.Data.Entity;


    @{
        Layout = null;
    }
<html>
<head>
    
    <meta name="viewport" content="width=device-width" />
    <title>Main page</title>
    <link type="text/css" rel="stylesheet" href="~/Content/MainPage.css" />
</head>
<body>

    <div>
        @Html.Partial("~/Views/PartialViews/Header.cshtml")
    </div>
    <div id="CategoryList">
          @Html.Partial("~/Views/PartialViews/showCatButton.cshtml")   
    </div><br/>
</body>
</html>
&#13;
&#13;
&#13; 什么是问题?

1 个答案:

答案 0 :(得分:0)

这些不是局部视图,它们是完整的html页面。将局部视图看作是一个包含在其父视图中的html。没有任何HTML身体或头部标签。你已经从父母那里继承了那些。

我会将样式和脚本保存在一个位置,即父页面。假设您在部分视图中拥有所有可用内容。