0

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>&copy;<?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>

すべて同じフォルダに

4

3 に答える 3

0

@Michaelが述べたように、外部スタイルシートの呼び出し方法についてさらに情報を提供してください。通常、HTML ヘッドでスタイルシートを次のように呼び出します。

<link rel="stylesheet" href="css/styles.css">
于 2013-04-16T14:43:39.193 に答える
0

<link />css は、このようにドキュメントの head セクションのタグでリンクされています

<link href="cssfolder/yourcss.css" media="all" rel="stylesheet" type="text/css"/>

それはそれを行う必要があります。

于 2013-04-16T16:00:50.003 に答える
0

外部 CSS をインポートするだけです。

<style type="text/css">
    @import url("external.css");
</style>
于 2013-04-16T14:46:39.090 に答える