初学者html和CSS。为什么这不起作用?

时间:2015-01-03 17:09:20

标签: html css

请查看我的网站90.231.109.239。 我无法让字体适用于我的内容区域。 文章“Norra Strandv.10”应该在Courgette中,但我只得到标准字体。 有人可以帮忙吗?

这是我的index.html <

!DOCTYPE html>
<html>
    <head>
        <title> Lasses hem </title>
        <link rel = "stylesheet" href = "/css/main.css" type = "text/css"/>
    </head>
    <body>
        <div id="page">
            <div id="header" class="frame">
                <h1> Lasses hem</h1>
            </div>
                <div id = "menu" class = "frame">
                    <ul>
                        <li> <a id="home" href='/index.html'>Home</a> </li>
                        <li> <a id="away" href='/info.php'>Away</a> </li>
                        <li> <a id="Temp" href='/temperature.php'>Temp</a> </li>
                        <li> <a id="Led" href='/controller.php'>Led</a> </li>
                    </ul>
                    </ul>
                </div>

                <div = "content" class ="frame h1">
                    Norra Strandv. 10 
                </div>

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

这是我的css文件

@import url(http://fonts.googleapis.com/css?family=The+Girl+Next+Door);
@import url(http://fonts.googleapis.com/css?family=Courgette);
@import url(http://fonts.googleapis.com/css?family=Pacifico);
#page{
    width:700px;
    margin: auto;
    border:solid 1px #CCC;
    border-radius:5px;
    background-color:#FFF;
}
.frame {
    width: 700px;
    margin: 0px;
    padding: 0px;
    background-color: #FFF;
}
.frame h1{
    text-align: center;
    font-size: 300%;
}
#header {
    background-color: #1DB21A;
    color: #FFF;
    height: 55px;
    font-family: 'Courgette', cursive;
}
#menu {
    height: 22px;
    font-family: Arial, Helvetica, sans-serifs;
    background-color: #000;
    color: #FFF;
    float: left;
}
#menu ul {
    list-style-type:none;
    margin: 0px;
    padding: 0px 50px;
}
#menu li {
    display: inline;
    float: left;
}
#menu a {
    display: block;
    width: 60px;
    height: 22px;
    text-decoration:none;
    background-color: #000;
    color: #FFF;
}
#menu a:hover{
    background-color: #1DB21A;
    color: #FFF;
}
#content {
    padding: 40px 50px;
    width: 600px;
    font-family: 'Courgette', cursive;
    font-size: 150%;
}

3 个答案:

答案 0 :(得分:3)

您忘记了id属性

<div = "content" class ="frame h1">

转入

<div id="content" class ="frame h1">

Fixed Image

答案 1 :(得分:0)

更改

<div = "content" class ="frame h1">
                    Norra Strandv. 10 
                </div>

<div id= "content" class ="frame h1">
                    Norra Strandv. 10 
                </div>

答案 2 :(得分:0)

您刚输入错误。 你错过了... 只需在indexhtml文件中输入id =“content”...