主页CSS文件未正确链接与HTML等效

I've a little problem. I put a div in a html with no mastrerpage and it works perfectly - the css work but when i put this in a html with masterpage it doesn't. the css:

我有点问题。我把一个div放在没有mastrerpage的html中,它完美地工作 - css工作但是当我把它放在一个带有母版页的html中时却没有。 css:

@import url(http://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);

.cont {
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
overflow: hidden;
}

hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255,255,255,.1);
}

div.title { font-size: 2em; }

h1 span {
font-weight: 300;
color: #Fd4;
}

div.stars {
width: 270px;
display: inline-block;
}

input.star { display: none; }

label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}

input.star:checked ~ label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
}

input.star-5:checked ~ label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
content: '\f006';
font-family: FontAwesome;
}

the html without masterpage:

没有母版页的html:

<head runat="server">
<link rel="Stylesheet" href="StyleSheetStars.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/fontawesome/4.2.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="stars" >
  <input class="star star-5" id="star5" type="radio" name="star" runat="server"/>
  <label class="star star-5" for="star5"></label>
  <input class="star star-4" id="star4" type="radio" name="star" runat="server"/>
  <label class="star star-4" for="star4"></label>
  <input class="star star-3" id="star3" type="radio" name="star" runat="server"/>
  <label class="star star-3" for="star3"></label>
  <input class="star star-2" id="star2" type="radio" name="star" runat="server"/>
  <label class="star star-2" for="star2"></label>
  <input class="star star-1" id="star1" type="radio" name="star" runat="server"/>
  <label class="star star-1" for="star1"></label>
  </div>

</form>
</body>
</html>

the html with masterpage:

带有母版页的html:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="Stylesheet" href="StyleSheetStars.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 <div class="stars" >
  <input class="star star-5" id="star5" type="radio" name="star" runat="server"/>
  <label class="star star-5" for="star5"></label>
  <input class="star star-4" id="star4" type="radio" name="star" runat="server"/>
  <label class="star star-4" for="star4"></label>
  <input class="star star-3" id="star3" type="radio" name="star" runat="server"/>
  <label class="star star-3" for="star3"></label>
  <input class="star star-2" id="star2" type="radio" name="star" runat="server"/>
  <label class="star star-2" for="star2"></label>
  <input class="star star-1" id="star1" type="radio" name="star" runat="server"/>
  <label class="star star-1" for="star1"></label>
 </div>

</asp:Content>

Than't suppose to look like that: 主页CSS文件未正确链接与HTML等效

不要以为看起来像那样:

主页CSS文件未正确链接与HTML等效

The cource code(The page with the masterpage):

cource代码(带有母版页的页面):

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

</title>
<link rel="Stylesheet" href="StyleSheetStars.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<form method="post" action="Default2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTk3NjIwNTUxMGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgUFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjUFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjQFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjMFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjIFH2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkc3RhcjFwT8uSu9sOfORC1N0/HVYkxqPn1CouicTkSUkSxVv1uA==" />
</div>

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="9397DC0D" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAcCx8QyBKNwgVY6o3mkNcKvfQCB0pUsOJpy4fnv8J365PqbTooLxpm6rqKM1qnpL0WKM6j7xyqFjsDqMxeM+3DfnbRT9DeSeStRy6aSOUv9JHI5MYLCO3LtU7cAJVvEBlyMO7fmjkJSfq6Zbgk2kTWnqiOGYOCf0K23WNfp2M1RTaC01aLKYB4/+EAAYp0t4jA=" />
</div>
<div>

<div class="stars" >
  <input value="star5" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star5" class="star star-5" />
  <label class="star star-5" for="star5"></label>
  <input value="star4" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star4" class="star star-4" />
  <label class="star star-4" for="star4"></label>
  <input value="star3" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star3" class="star star-3" />
  <label class="star star-3" for="star3"></label>
  <input value="star2" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star2" class="star star-2" />
  <label class="star star-2" for="star2"></label>
  <input value="star1" name="ctl00$ContentPlaceHolder1$star" type="radio" id="ContentPlaceHolder1_star1" class="star star-1" />
  <label class="star star-1" for="star1"></label>
</div>
<br />
<input type="submit" name="ctl00$ContentPlaceHolder1$Button1" value="Button" id="ContentPlaceHolder1_Button1" />
<span id="ContentPlaceHolder1_Label1">Label</span>
<br />

</div>
</form>
</body>
</html>

The html with the masterpage don't do the yellow part.. What can I do?

带有母版页的html不做黄色部分..我该怎么办?

Thank you :)

谢谢 :)

1 个解决方案

#1

It seems to me that the path to your css file isn't correct from the masterpage.

在我看来,您的css文件的路径在主页上是不正确的。

Is your masterpage or css file or aspx in a separate folder? If so, you should link the css file as so in the masterpage file:

您的母版页或css文件或aspx是否在单独的文件夹中?如果是这样,您应该在母版页文件中链接css文件:

<link rel="Stylesheet" href="~/StyleSheetStars.css" type="text/css" runat="server" />

Where ~/ goes to the root of the application. Again, it depends on your directory structure, but I have a hunch that this is the root of your issue. You will also need the runat="server" attribute.

在哪里〜/转到应用程序的根目录。同样,这取决于您的目录结构,但我有一种预感,这是您的问题的根源。您还需要runat =“server”属性。

Please note that ~/ does not work in traditional HTML, but is a valid path when used in an aspx file.

请注意〜/在传统HTML中不起作用,但在aspx文件中使用时是一个有效的路径。

Please see similar SO question here.

请在此处查看类似的问题。

#1

It seems to me that the path to your css file isn't correct from the masterpage.

在我看来,您的css文件的路径在主页上是不正确的。

Is your masterpage or css file or aspx in a separate folder? If so, you should link the css file as so in the masterpage file:

您的母版页或css文件或aspx是否在单独的文件夹中?如果是这样,您应该在母版页文件中链接css文件:

<link rel="Stylesheet" href="~/StyleSheetStars.css" type="text/css" runat="server" />

在哪里〜/转到应用程序的根目录。同样,这取决于您的目录结构,但我有一种预感,这是您的问题的根源。您还需要runat =“server”属性。

Please note that ~/ does not work in traditional HTML, but is a valid path when used in an aspx file.

请注意〜/在传统HTML中不起作用,但在aspx文件中使用时是一个有效的路径。

Please see similar SO question here.

请在此处查看类似的问题。

秒客网

主页CSS文件未正确链接与HTML等效

1 个解决方案

#1

#1

相关文章