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-head 中调用样式表，如下所示：

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

您可以简单地导入您的外部 CSS：

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

css 与<link />文档头部中的标签链接，如下所示

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

那应该这样做。

于 2013-04-16T16:00:50.003 回答