我有个小问题。 我将一个 div 放在没有 masterrpage 的 html 中，它工作得很好 - css 工作但是当我把它放在带有 masterpage 的 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;
}
没有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>
带有母版页的 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>
不应该看起来像那样:
源代码(母版页所在页面):
<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>
带有母版页的 html 不做黄色部分..我该怎么办？
谢谢你:)
最佳答案
在我看来，主页上的 css 文件路径不正确。
您的主页或 css 文件或 aspx 是否在单独的文件夹中？如果是这样，您应该像母版页文件中那样链接 css 文件:
<link rel="Stylesheet" href="~/StyleSheetStars.css" type="text/css" runat="server" />
~/ 指向应用程序的根目录。同样，这取决于您的目录结构，但我有预感这是您问题的根源。您还需要 runat="server" 属性。
请注意，~/ 在传统 HTML 中不起作用，但在 aspx 文件中使用时是有效路径。
请参阅类似的 SO 问题 here .
关于html - 主页 CSS 文件未正确链接与 HTML 等效文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30126397/