我正在使用 WAMP 在本地查看我的网站。使用嵌入式样式表时页面加载和工作正常
( <style type="text/css">
CSS
</style> )
使用我的页面，但是当我尝试链接到外部样式表时，我的页面根本不会显示，甚至没有样式的文本也不会显示，什么也没有。我的路径都是正确的，我什至尝试将我的样式表放在与我的页面相同的文件夹中以查看是否有效但没有成功。
需要一些帮助
我的 css 保存为:style.css
*{
margin:0;
}
@font-face {
font-family: 'Aguafina Script';
font-style: normal;
font-weight: 400;
src: local('Aguafina Script Regular'), local('AguafinaScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/aguafinascript/v2/65g7cgMtMGnNlNyq_Z6CvDVi_4UGEKHjyEZCTqR5Ysg.woff) format('woff'); }
#wrapper{
height:100%;
margin-left:0px;
margin-bottom:0px;
}
#sidebar{
position: absolute;
left:0;
top:0;
width:350px;
background:rgba(222,222,222,0.9);
text-align: center;
animation:mymove 1s;
-webkit-animation:mymove 1.35s;
-moz-animation:mymove 1s;
}
#nav{
margin-top: 20px;
}
#nav ul{
text-align: center;
padding: 0;
}
#nav li {
list-style-type: none;
margin: auto;
font-size: 19px;
text-transform: uppercase;
margin-top: 15px;
letter-spacing: 6px;
}
#nav li a{
text-decoration: none;
color:#666;
}
#nav li a:hover{
color:#0bf;
}
#sidebar img{
margin-top: 15px;
}
h1{
font-family: 'Aguafina Script';
font-size: 3em;
padding-bottom: 15px;
border-bottom: 2px dotted #aaa;
text-decoration: none;
width:80%;
color:#0bf;
margin: auto;
}
#contact{
margin-top:20%;
bottom:0;
color:#666;
font-size: 12px;
}
@-webkit-keyframes mymove{
0%{
margin-left: -350px;
}
100%{
margin-left: 0px; }
}
}
我的 html 保存为 index.php
<!DOCTYPE html>
<html>
<head>
<title>My Test Site</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sidebar">
<img src="logo.png" width="200" height="200">
<h1>Example</h1>
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a>
<li><a href="">Gallery</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div id="contact">
<p>+44 784 737 9557</p>
<p>MATTY@EXAMPLE.COM</p>
<p>YORKSHIRE, UK</p>
<p>©<?php echo date('Y'); ?> Peelblue Design</p>
</div>
</div>
<script type="text/javascript">
//set div height 100%
$(function(){
$('#sidebar, #cvbar').css({'height':($(document).height())+'px'});
$(window).resize(function(){
$('#sidebar').css({'height':($(document).height())+'px'});
});
});
//sidebar slide in on page load
$("div#sidebar")
.css("margin-left",-$(this).width())
.animate({
marginLeft:0
}, 1200);
</script>
</body>
</html>
都在同一个文件夹中
最佳答案
您可以简单地导入您的外部 CSS:
<style type="text/css">
@import url("external.css");
</style>
关于html - 链接到外部样式表时不会加载页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16039937/