将外部.css文件链接到Html页面

时间:2015-01-29 13:24:41

标签: html css stylesheet href

我无法将外部文件表链接到单独的html页面。 .css文件和html文件也在同一个文件夹中,但是当我运行它时,内容才会出现。任何帮助表示赞赏。谢谢!

CSS代码

div
{
    border-radius:5px;
}

#header
{
    z-index:1;
    width:97.%;
    height:60px;
    background-color:red;
    margin-top:-20px;
    margin-bottom:10px;
    position:fixed;
}

#name
{
    float:left;
    margin-left:5px;
    padding-top:5px;
    font-size:16px;
    font-family:Verdana, sans-serif;
    color: #ffffff;
}

#email
{
    float:left;
    margin-left:5px;
    padding-top:5px;
    font-size:16px;
    font-family:Verdana, sans-serif;
    color: #ffffff;
}


#sidebar
{
    left:90px;
    top:160px;
    position:fixed;
    width:200px;
    height:600px;
    background-color:gray;
}

#content
{
    left:290px;
    top:160px;
    position:fixed;
    width:600px;
    height:600px;
    background-color:lightblue;
}

p
{
    padding-left: 50px;
    padding-top: 50px;
}

HTML代码

<!DOCTYPE html>

<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>

<body>
    <div id="page">
        <div class="topNaviagationLink"><a href="index.html">Home</a></div>
        <div class="topNaviagationLink"><a href="index.html">About</a></div>
        <div class="topNaviagationLink"><a href="index.html">Portfolio</a></div>
        <div class="topNaviagationLink"><a href="index.html">Services</a></div>
        <div class="topNaviagationLink"><a href="index.html">Contact</a></div>
    </div>
    <div id="mainPicture">
        <div class="picture">
            <div id="headerTitle">Project</div>
            <div id="headerSubtext">HTML Project</div>
        </div>
    </div>
        <div class="contentBox">
        <div class="innerBox">
            <div class="contentTitle">The Title of an Article</div>
          <div class="contentText"><p>content </p><br />
        <p>Content.</p><br />
          <p>Other Content.</p></div>



    </div>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

这就是你所需要的。请看那里。我注意到丢失了div,检查你的代码。 http://jsfiddle.net/vo9hLzqf/

如果您对#email #name等其他样式有疑问,请在HTML中检查是否设置了正确的类型

如果您的css是#email,则应使用<div id="email">%yourcode%</div> 和.email将是<div class="email">%yourcode%</div>

    <!DOCTYPE html>

<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>

<body>
    <div id="page">
        <div class="topNaviagationLink"><a href="index.html">Home</a></div>
        <div class="topNaviagationLink"><a href="index.html">About</a></div>
        <div class="topNaviagationLink"><a href="index.html">Portfolio</a></div>
        <div class="topNaviagationLink"><a href="index.html">Services</a></div>
        <div class="topNaviagationLink"><a href="index.html">Contact</a></div>
    </div>
    <div id="mainPicture">
        <div class="picture">
            <div id="headerTitle">Project</div>
            <div id="headerSubtext">HTML Project</div>
        </div>
    </div>
        <div class="contentBox">
        <div class="innerBox">
            <div class="contentTitle">The Title of an Article</div>
          <div class="contentText"><p>content </p><br />
        <p>Content.</p><br />
          <p>Other Content.</p></div>


            </div>
</div>