Question

我不能为我的生活弄清楚为什么我的代码在浏览器中不起作用。它在Dreamweaver中表现得很好，但是当我将它加载到我的服务器上时，就像类元素没有被读取一样。如果我把它直接放在样式格式中它可以工作。例如，bla将红色显示为红色，但bla正确设置了类元素设置，并且在服务器上运行时就像它只是blah一样。我已经验证了很多次并修复了我能想到的所有问题。它说我有几个流浪标签，我不能帮助，但我想知道是不是这样但我无法在网上找到任何关于修复标签或任何确认，如果这真的是问题。我相当迷失，经过几天的谷歌搜索，解决问题，并直接猜测如何解决它，希望有人能够对错误有所了解。这是代码。

<!doctype html>
<html>
<head>

<!--links to the css sheet for all the style info-->
<link rel="stylesheet" type="text/css" href="../style.css">


<!--Change favicon.ico to the images folder-->
<link rel="shortcut icon" href="favicon.ico">

<meta charset="utf-8">
<title>sophia videos</title>
<style>

/*
body {
    background-image:url(background2.jpg);
    background-repeat: no-repeat;
}
*/

a {
    font-size:22px;
)


.footer {
    position: absolute;
    bottom: 10px;   
    color:#036;
}


.vid_list {
    list-style-type: none;
    text-align:left;
    color:#F6F; 
    font-size:24px;
    padding-left: 6em;
    width:40%;
    font-style: italic;

}

a.vid_list {
    color:#09F;
    font-size:20px;
    font-style:normal;
}

.vid_h2 { 
    font-size:48px;
    color:#0C3;
    text-align:center;
}

</style>
</head>
<body>

<h1 style="text-align:center"><i>Sophia</i></h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2 class="vid_h2">Videos</h2>
<p>&nbsp;</p>

<div class="vid_list">
<h2>Family</h2>
<ol style="list-style-type:none">
    <li><a href="/var/video/family/">Family</a></li>
    <li><a href="//var/video/friends/">Friends</a></li>
    <li><a href="/var/misc">Misc</a></li>
    <li><a href="/var/video/okinawa">Okinawa</a></li>
    <li><a href="/var/video/tokyo">Tokyo</a></li>
</ol>

<h2>Friends</h2>
<ol style="list-style-type:none">
    <li><a href="/var/video/family/">Family</a></li>
    <li><a href="//var/video/friends/">Friends</a></li>
    <li><a href="/var/misc">Misc</a></li>
    <li><a href="/var/video/okinawa">Okinawa</a></li>
    <li><a href="/var/video/tokyo">Tokyo</a></li>
</ol>

<h2>Misc</h2>
<ol style="list-style-type:none">
    <li><a href="/var/video/family/">Family</a></li>
    <li><a href="//var/video/friends/">Friends</a></li>
    <li><a href="/var/misc">Misc</a></li>
    <li><a href="/var/video/okinawa">Okinawa</a></li>
    <li><a href="/var/video/tokyo">Tokyo</a></li>
</ol>

<h2>Okinawa</h2>
<ol style="list-style-type:none">
    <li><a href="/var/video/family/">Family</a></li>
    <li><a href="//var/video/friends/">Friends</a></li>
    <li><a href="/var/misc">Misc</a></li>
    <li><a href="/var/video/okinawa">Okinawa</a></li>
    <li><a href="/var/video/tokyo">Tokyo</a></li>
</ol>

<h2>Tokyo</h2>
<ol style="list-style-type:none">
    <li><a href="/var/video/family/">Family</a></li>
    <li><a href="//var/video/friends/">Friends</a></li>
    <li><a href="/var/misc">Misc</a></li>
    <li><a href="/var/video/okinawa">Okinawa</a></li>
    <li><a href="/var/video/tokyo">Tokyo</a></li>
</ol>
</div>






<footer class="footer">May the force be with you.</footer>

<!--link to nav bar menu. Make last thing in body-->
<?php include "../menu.php";?>

</body>
</html>

相关的CSS文件是

的style.css：

@charset "utf-8";

/*
@font-face {
    font-family: "arizoniaregular";
    src: url("arizonia-regular-webfont.eot");
    src: url("arizonia-regular-webfont.eot?#iefix") format("embedded-opentype"),
         url("arizonia-regular-webfont.woff2") format("woff2"),
         url("arizonia-regular-webfont.woff") format("woff"),
         url("arizonia-regular-webfont.ttf") format("truetype"),
         url("arizonia-regular-webfont.svg#arizoniaregular") format("svg");
    font-weight: normal;
    font-style: normal;
}
*/

/*sophia header at top*/
h1 {
    color:#96F;
    text-align: center;
    font-family:"arizoniaregular", "Times New Roman", serif;
    font-size: 50px;
}

/*alters nav text*/
a {
    color:#090;
    font-size: 20px;
}

/*alters nav location*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align:right;
    color:#C3C;
}

.footer {
    position: absolute;
    bottom: 10px;
    color:#036;
}

和menu.php：

<!DOCTYPE html>
<html>

<style>

a {
    color:#090;
    font-size: 20px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align:right;
    color:#C3C;
}
</style>

<body>

<nav>
    <ul>
        <li><a href="http://testserver.com/">Home</a></li>
        <li><a href="http://testserver.com/dog/">Pictures</a></li>
        <li><a href="http://testserver.com/cat">Videos</a></li>
        <li><a href="http://testserver.com/tree/">Files</a></li>
        <li><a href="http://testserver.com/test//">Test</a></li>
    </ul>
</nav>

</body>
</html>

我花了一些时间来弄清楚如何在问题框中发布所有这些代码并让它正确格式化所有内容。我希望它是正确的，我的问题和我去问的方式是可以理解/适当的。我们非常感谢您提供的任何帮助或见解。

类元素CSS的问题

0 个答案: